No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.



Required Props


The following props are required for rendering the <DateInput />:


name


Standard HTML attribute for the field name.


onChange


A function for custom handling of onChange events.


Receives the input field's onChange event and the formatValue (formatted as per format).




Note:


    

  • It is recommended to update your local state with the formatValue rather than the event.target.value.
    • 





value


A date string formatted as per the format prop (or an empty string).


Example:


PropTypeValue
name*string
"field_name"
onChange*function
function handleOnChange(event, formatValue) {
  setValue(formatValue)
}
value*string
"2000-12-31"


Implementation:


import React from "react";
import DateInput from "@idesigncode/date-input/DateInput.mjs";
import "@idesigncode/date-input/theme.css";
import "@idesigncode/date-input/layout.css";

const RequiredPropsExample = () => {
  const [value, setValue] = React.useState("2000-12-31");

  const handleOnChange = (event, formatValue) => {
    setValue(formatValue);
  };

  return (
    <DateInput name="field_name" onChange={handleOnChange} value={value} />
  );
};

export default RequiredPropsExample;