DatePicker

About #

It is based on the react-datepicker library.

Note: Pass a value of null if you don't want the default value of Date.now().

Simple usecase #

function () {
  const [value, setValue] = React.useState(Date.now())

  const handleChange = newValue => {
    setValue(newValue)
  }

  return (
    <Field label="Date">
      <DatePicker name="welcome" onChange={handleChange} value={value} />
    </Field>
  )
}
Copy

Pass props from the original library. #

function () {
  const [value, setValue] = React.useState(Date.now())

  const handleChange = newValue => {
    setValue(newValue)
  }

  return (
    <Field label="Date">
      <DatePicker
        dateFormat="MMM dd yyyy"
        name="welcome2"
        maxDate={new Date()}
        popperProps={{ zIndex: 50 }}
        yearDropdownItemNumber={30}
        onChange={handleChange}
        value={value}
      />
    </Field>
  )
}
Copy

Give an Icon #

function () {
  const [value, setValue] = React.useState(Date.now())

  const handleChange = newValue => {
    setValue(newValue)
  }

  return (
    <Field label="Date">
      <DatePicker icon={<DateIcon color="light.100" />} name="welcome3" value={value} onChange={handleChange} />
    </Field>
  )
}
Copy

fr locale #

function () {
  const [value, setValue] = React.useState(Date.now())

  const handleChange = newValue => {
    setValue(newValue)
  }

  return (
    <Field label="Date">
      <DatePicker locale={dateFR} name="welcome4" value={value} onChange={handleChange} />
    </Field>
  )
}
Copy

Properties #

Packages #

Dependencies #

Peer dependencies #