eola Style Guide 2024: Calendar

Calendar

This is a date picker to provide a simple way to select a value from the calendar form. This has Formik baked into it for ease of use.

Examples

Calendar - using a hidden input

<Formik initialValues={{calendar: undefined}} onSubmit={()=> {}}>
  {({ values }) => (
    <Form style={{ width: '100%', maxWidth: 480 }}>
      <Calendar
        name="calendar"
        availableDays={dayjs().add(2, 'days').toDate()}
      />
      <p>{dayjs(values.calendar).format('DD/MM/YYYY')}</p>
    </Form>    
  )}
</Formik>

Calendar - input field

<Formik initialValues={{date: undefined}} onSubmit={()=> {}}>
  {({ values }) => (
    <Form>
      <Calendar
        showInput
        name="date"
        availableDays={dayjs().add(2, 'days').toDate()}
        onDateChange={() => setCalendarOpen(false)}
      />
      <p>{dayjs(values.date).format('DD/MM/YYYY')}</p>
    </Form>
  )}
</Formik>