React Date Picker Component

About#

This component, provided by CoreUI for React.js, offers a user-friendly interface and various customization options to ensure an excellent user experience.

With its responsive design and support for all modern browsers, the React Date Picker Component can be easily integrated into any application. The component comes with an array of styling options, including color, size, and shape, that can be easily adjusted to fit the application's design.

The React Date Picker Component is also fully customizable, allowing developers to tailor the component to their specific needs. With its set of APIs, developers can control the default value, visibility, and date range of the component.

One of the standout features of the React Date Picker Component is its accessibility. CoreUI has ensured that the component is fully compliant with the Web Content Accessibility Guidelines (WCAG), making it accessible to all users. The component supports keyboard navigation and screen readers, ensuring that users with disabilities can also benefit from its functionality.

Example#

Below is an example of a basic React DatePicker.

Days#

Basic examples demonstrating how to pick dates using the React Date Picker Component.

With timepicker#

In addition to supporting date selection, our React DatePicker component also includes a TimePicker feature that allows users to select a specific time of day. React TimePicker can be enabled by passing a timepicker prop to the <CDatePicker/> component

With footer#

Here is an example with the additional footer. The footer can be useful for displaying additional information or actions related to the selected date, such as "Today" or "Clear" buttons. The footer component is fully customizable and can be styled to match the rest of the application.

Weeks#

Illustration of week selection using the React Date Picker, including week number display.

Months#

Selecting whole months with the React Date Picker Component.

Years#

Picking years using the React Date Picker.

Sizing#

Set heights using size property like size="lg" and size="sm".

Disabled#

Add the disabled boolean attribute on the React Date Picker to give it a grayed out appearance and remove pointer events.

Readonly#

Add the inputReadOnly boolean attribute to prevent modification of the input's value.

Disabled dates#

CoreUI React DatePicker component includes a feature that allows you to disable certain dates, such as weekends or holidays. This can be accomplished by passing an array to disabledDate prop to the component, which determines which dates should be disabled based on custom logic.

Disabling weekends#

You can disable weekends by passing a function to the disabledDates prop. Here's how to do it:

Locale#

CoreUI React Date Picker allows users to display dates and times in a non-English locale. This is useful for applications that have international users or need to support multiple languages.

Auto#

By default, the DatePicker component uses the default browser locale, but it can be easily configured to use a different locale supported by the JavaScript Internationalization API. To set the locale, you can simply pass the desired language code as a prop to the DatePicker component. This feature enables to create more inclusive and accessible applications that cater to a diverse audience.

Chinese#

Below is an example of a basic React Date Picker with Chinese locales.

Japanese#

Below is an example of a basic React Date Picker with Japanese locales.

Korean#

Below is an example of a basic React Date Picker with Korean locales.

Right to left support#

RTL support is built-in and can be explicitly controlled through the $enable-rtl variables in scss.

Hebrew#

Persian#

Custom formats#

The provided code demonstrates how to use the inputDateFormat and inputDateParse properties. In this example, the format and parse functions from date-fns are employed to tailor the date presentation and interpretation.

import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'

The inputDateFormat property formats the date into a custom string, while the inputDateParse property parses a custom string into a Date object. The code showcases the date range in different formats based on locale, such as 'MMMM dd, yyyy' and 'yyyy MMMM dd', and accommodates different locales, like 'en-US' and 'es-ES'.

With timepicker#

If you need to display custom date and time formats, use the timepicker property along with inputDateParse and inputDateFormat. This allows users to select a date with a specified time format, such as 'MMM dd, yyyy h:mm:ss a'.

Weeks#

If you want to show weeks in a custom format, set the selectionType to 'week'. This configuration allows you to use inputDateParse and inputDateFormat to present and parse week-based date strings, like 'wo yyyy'. Additionally, the showWeekNumber property can be used to display week numbers in your preferred format.

Months#

If your application requires month selection in a specific format, set the selectionType property to 'month'. Using inputDateFormat and inputDateParse, you can customize the display of months, such as using the format 'MMM yyyy'.

Years#

If you need to work with custom year formats, set the selectionType to 'year'. This enables you to use inputDateFormat and inputDateParse to format years in a manner that suits your application's requirements, like 'yy'.

API#

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

• <CDatePicker />