FormInputDate

A component that allows to pick a date using a date picker. It accepts and works with values in a short ISO string format, e.g. 2020-07-28.

Example

<FormInputDate
  value=""
  submitButtonText="Pick the date"
  closeLabel="Close"
  title="The best day"
  placeholder="Please pick the date"
  onChange={(event) => {
    alert(`The best day is ${event.target.value}`);
  }}
/>

Field input date with disabled weekend

<FormInputDate
  value=""
  submitButtonText="Pick the date"
  closeLabel="Close"
  title="The best day"
  placeholder="Please pick the date"
  disableWeekendDates={true}
  onChange={(event) => {
    alert(`The best day is ${event.target.value}`);
  }}
/>

Internalization

<FormInputDate
  value=""
  submitButtonText="Wählen Sie das Datum"
  closeLabel="Schließen"
  title="Der beste Tag"
  placeholder="Bitte wählen Sie das Datum"
  onChange={(event) => {
    alert(`Der beste Tag ist ${event.target.value}`);
  }}
  monthNames={[
    "Januar",
    "Februar",
    "März",
    "April",
    "Mai",
    "Juni",
    "Juli",
    "August",
    "September",
    "Oktober",
    "November",
    "Dezember",
  ]}
  weekDays={["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"]}
/>