Datepicker

Use to select a single date from the calendar.

Edit the code below to see your changes live!

function Example() {
  const [date, setDate] = useState<string>();

  return (
    <Form>
      <FormGroup>
        <Datepicker
          label="Label"
          placeholder="Placeholder"
          min="06/03/2020"
          max="06/19/2020"
          onDateChange={(value: string) => setDate(value)}
          value={date}
          locale="en-AU"
        />
      </FormGroup>
    </Form>
  );
}

function Example() {
  const [date, setDate] = useState<string>();
  return (
    <Form>
      <FormGroup>
        <Datepicker
          label="Label"
          placeholder="Placeholder"
          min="06/03/2020"
          max="06/19/2020"
          onDateChange={(value: string) => setDate(value)}
          value={date}
          locale="en-AU"
        />
      </FormGroup>
    </Form>
  );
}

API

Supports all native <input [type="date"] /> element attributes.

Datepicker

Prop Name	Type	Default	Description
`onDateChange` *	`(date: string) => void`		Callback called with value of selected date.
`label`	`string`		Adds a label to the field.
`value`	`string`		The ISO time that should be used as the input value.
`max`	`string`		Maximum date in ISO format that can selected in the calendar.
`min`	`string`		Minimum date in ISO format that can selected in the calendar.
`dateFormat`	`string`	`EE, dd MMM, yyyy`	Format for selected date to be displayed in input.
`locale`	`string`	`en-US`	Locale used to format the the date and calendar. See DateTimeFormat

Props ending with * are required

Error State

Datepicker allows you to pass in an error message that will control the styles of a counter. The logic on the datepicker can be controlled with the onDateChange prop.

Edit the code below to see your changes live!

function Example() {
  const [date, setDate] = useState<string>();
  const [errors, setErrors] = useState('Please select a date.');
  const handleChange = (value: string) => {
    if (value) {
      setErrors('');
    } else {
      setErrors('Please select a date.');

      return;
    }

    return setDate(value);
  };

  return (
    <Form>
      <FormGroup>
        <Datepicker
          error={errors}
          label="Label"
          placeholder="Placeholder"
          onDateChange={handleChange}
          value={date}
          required
        />
      </FormGroup>
    </Form>
  );
}

function Example() {
  const [date, setDate] = useState<string>();
  const [errors, setErrors] = useState('Please select a date.');
  const handleChange = (value: string) => {
    if (value) {
      setErrors('');
    } else {
      setErrors('Please select a date.');
      return;
    }
    return setDate(value);
  };
  return (
    <Form>
      <FormGroup>
        <Datepicker
          error={errors}
          label="Label"
          placeholder="Placeholder"
          onDateChange={handleChange}
          value={date}
          required
        />
      </FormGroup>
    </Form>
  );
}

Beta