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.



format


Default value:string
"yyyy-MM-dd"


The date-fns format of the max, min and value props.


Also used to format the formatValue returned from the onChange function.


Example:


PropTypeValue
formatstring
"MM-yyyy-dd"
name*string
"field_name"
onChange*function
function handleOnChange(event, formatValue) {
  setValue(formatValue)
}
value*string
""


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 FormatExample = () => {
  const [value, setValue] = React.useState("");

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

  return (
    <DateInput
      format="MM-yyyy-dd"
      name="field_name"
      onChange={handleOnChange}
      value={value}
    />
  );
};

export default FormatExample;