Calendar Input

This is an Input wrapper around calendar to display an input that shows the calendar when in focus.

Demo

Below you'll find a customizable demo of the CalendarInput component. Click "show full demo" to see this and other components.

Demo

The Gregorian with initial date is then generated with this code.

<CalendarInput
    label="Gregorian date (with initial date)"
    calendar="gregory"
    locale="en-GB"
    date="2021-10-13"
    onDateSelect={handelDateChange}
/>

API Reference

The component takes the same props as the calendar component, as well as the props for InputField that are relevant to an input of type text.

It adds one property clearable which is a boolean. If set to true, it adds a clear button to delete the selected date.

Links

• Calendar