DatePicker - Keep React

The Date Picker component offers an intuitive way for users to select dates from a calendar. With this component, users can easily navigate through months and years to pick specific dates. The Date Picker supports a range of customization options, allowing developers to control date formats, highlight specific dates, set minimum and maximum selectable dates, and more.

Table of Contents#

Default Date Picker#

The DefaultDatePicker component is a simple implementation of a date picker component. It display a single date selection interface. Users can choose a date, and the selected date is managed using state.

Date Range Picker#

A Date Range Picker is a user interface component that allows users to select a range of dates, typically represented by a start date and an end date.

DatePicker With Two Month#

The DatePicker component has been enhanced with an additional feature that allows users to view and select dates from two consecutive months simultaneously. This feature is enabled by setting the showTwoMonth prop to true.

Date Range Picker From Two Month#

The DatePicker component has been enhanced with an additional feature that allows users to view and select dates from two consecutive months simultaneously. This feature is enabled by setting the showTwoMonth prop to true.

Month Picker#

A Month Picker is a user interface component that allows users to select a specific month and year from a calendar-like interface.

Year Picker#

A Year Picker is a user interface component that allows users to select a specific year from a list or dropdown.

Time Picker#

A Time Picker is a user interface component that allows users to select a specific time, usually down to the hour and minute, from a set of available options.

API Reference#

Explore the available props for the date picker component

PropertyDescriptionTypeDefault
childrenChild components and content to be placed within the date picker component.ReactNodeReactNode
showTwoMonthShow the two month picker componentbooleanfalse

Reference#

To learn more about the Date Picker, please see the documentation of React Date Picker