FormikDatePicker

Basic Usage


import { FormikDatePicker } from '@krakentech/coral-formik';
import { Button } from '@krakentech/coral';
import { Formik, Form } from 'formik';
 
<Formik
    initialValues={{ datepicker: '' }}
    onSubmit={() => console.log('Submitted')}
    validationSchema={yup.object().shape({
        datepicker: yup.string().required('This field is required'),
    })}
>
    <Form method="post">
        <FormikDatePicker name="datepicker" label="Select date" />
        <Button type="submit">Submit</Button>
    </Form>
</Formik>

Full API

Name	Type	Default
`disabled`	`boolean` If `true`, the component will be disabled and not respond to user interactions.	`false`
`disableFuture`	`boolean` If `true`, future dates will be disabled.	`false`
`disablePast`	`boolean` If `true`, past dates will be disabled.	`false`
`defaultMonth`	`Date` The default month to display when the DatePicker is opened.
`endIcon`	`ReactNode` The icon displayed at the end of the DatePicker input.
`excludeDateIntervals`	`{ start: Date; end: Date; }[]` A list of date intervals to exclude from selection. Each interval is defined by a start and end date.	`[]`
`excludeDates`	`Date[]` A list of dates to exclude from selection.	`[]`
`fullWidth`	`ResponsiveVariant<boolean>` If `true`, the input will take up the full width of its container.
`id`	`string` The id of the input element. If unspecified, an id will be generated internally.
`includeDateIntervals`	`{ start: Date; end: Date; }[]` A list of date intervals to include from selection. Each interval is defined by a start and end date.	`[]`
`includeDates`	`Date[]` A list of dates to include from selection.	`[]`
`isClearable`	`boolean` If `true`, the input will be clearable, allowing users to remove the selected date. This will render a clear button inside the input field.	`false`
`label`	`string` The label for the DatePicker input field.
`locale`	`SupportedLocale` The locale to use for formatting dates.	`en-GB`
`maxDate`	`Date \| null` The maximum date allowed for selection.
`minDate`	`Date \| null` The minimum date allowed for selection.
`name`	`string` The field name used on the POST request when the form is submitted.
`nextMonthButtonLabel`	`string` The aria-label for the DatePicker’s next month button.	`'Next month'`
`nextYearButtonLabel`	`string` The aria-label for the DatePicker’s next year button.	`'Next year'`
`numberOfMonths`	`number` The number of months to display in the DatePicker.
`onBlur`	`FocusEventHandler<HTMLInputElement>` Callback fired when the input loses user focus. `event` The focus event source of the callback.
`onCalendarClose`	`() => void` Callback fired when the calendar popup is closed.
`onCalendarOpen`	`() => void` Callback fired when the calendar popup is opened.
`onChange`	`(date: Date \| DateRange \| null) => void` Callback fired when the selected date changes. `date` The selected date or date range, depending on the `selectsRange` prop.
`onClickOutside`	`(event: Event \| undefined) => void` Callback fired when the user clicks outside the DatePicker. `event` The event source of the callback
`onFocus`	`(event: Event \| undefined) => void` Callback fired when the DatePicker input gains user focus. `event` The focus event source of the callback.
`onInputClick`	`() => void` Callback fired when the DatePicker input is clicked.
`onKeyDown`	`(event: KeyboardEvent<HTMLDivElement>) => void` Callback fired when a key is pressed down on the DatePicker input.
`onMonthChange`	`(date: Date) => void` Callback fired when the month is changed. `date` The new month date.
`onSelect`	`(date: Date, event: Event \| undefined) => void` Callback fired when a date is selected. `date` The selected date. `event` The event source of the callback.
`open`	`boolean` If `true`, the DatePicker will be opened by default when rendered.
`theme`	`ResponsiveVariant<SharedThemeTypes>` The colourway applied to this component.	`'base100'`
`placeholderText`	`string` The placeholder text for the input field.
`popperPlacement`	`Placement` Position of the popper relative to the input.
`previousMonthButtonLabel`	`string` The aria-label for the DatePicker’s previous month button.	`'Previous month'`
`previousYearButtonLabel`	`string` The aria-label for the DatePicker’s previous year button.	`'Previous year'`
`optional`	`boolean` Add an optional flag to the label for this field (controlled by https://coral-oe.vercel.app/?path=/docs/guides-configuration—docs#overrides-optional-indicator optionalIndicator). This should be set to true if you have set this field to be optional in your validation schema.	`false`
`selectsRange`	`boolean` If `true`, the DatePicker will allow selecting a range of dates.	`false`
`shouldCloseOnSelect`	`boolean` If `true`, the DatePicker will close the calendar popup when a date is selected.	`true`
`showYearPicker`	`boolean` If `true`, the DatePicker will show a year picker rather than a month picker.	`false`
`showYearDropdown`	`boolean` If `true`, the DatePicker will show a year dropdown for selecting years.	`false`
`startIcon`	`ReactNode` The icon displayed at the start of the DatePicker input field.
`tabIndex`	`number` The tab index for the DatePicker input.
`title`	`string` The label title for the DatePicker input.
`yearDropdownItemNumber`	`number` The number of items which are displayed in the year dropdown in each direction.	`100`
`upLevelButtonLabel`	`string` The aria-label for the button that moves back to calendar view from Month or Year view.	`'Back to Calendar'`
`monthSelectionLabel`	`string` The aria-label for the manual month selection.	`'Select Month'`
`yearSelectionLabel`	`string` The aria-label for the manual year selection.	`'Select Year'`
`datesTableLabel`	`ReactNode`
`monthsTableLabel`	`ReactNode`
`yearsTableLabel`	`ReactNode`
`validate`	`FieldValidator \| undefined` An optional field level validation function. See Formik docs for more details