React DatePicker

The React DatePicker component provides an intuitive interface for date selection and navigation. It offers a comprehensive set of features including multiple view modes, date range restrictions, custom rendering, and accessibility support for building robust date-picking experiences.

Getting started

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let's add the React DatePicker component to the project.

Installing Syncfusion® React packages

To use the React DatePicker component in this project, the @syncfusion/react-calendars package needs to be installed using the following command:

npm install @syncfusion/react-calendars

Adding CSS reference

In this article, the Material theme is applied using CSS styles, which are available in installed packages. The necessary Material CSS styles for the DatePicker component and its dependents were imported into the src/App.css file.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-calendars/styles/material.css';

Adding DatePicker component

To include the DatePicker component in your application, import the DatePicker from the @syncfusion/react-calendars package in App.tsx.

import { DatePicker } from "@syncfusion/react-calendars";

Add the DatePicker component in application as shown in below code example.

import { DatePicker } from '@syncfusion/react-calendars';

export default function App() {
    return (
       <div className="component-section">
         <DatePicker />
        </div>
    );
};

Run the project

To run the project, use the following command:

npm run dev

The DatePicker component provides a simple and intuitive way to select dates. By default, it displays the current month and allows users to navigate between months and years.

Views

The DatePicker component supports multiple view modes including Month, Year, and Decade. You can programmatically track which view is currently active using the onViewChange event handler.

The DatePicker starts with the Month view by default and allows users to drill up to Year and Decade views or back down to more specific selections. The example below demonstrates how to detect and display the current view mode:

Year picker

The DatePicker component allows users to select a year by setting both the start and depth properties to Decade view. This configuration opens the DatePicker in decade view, displaying a range of years and able to pick a specific year directly from this view.

Month picker

The DatePicker component allows users to select a month by setting both the start and depth properties to Year view. This configuration opens the DatePicker in year view, showing all months of the selected year and can choose a specific month directly.

Controlled Vs Uncontrolled

The DatePicker component can be used in both controlled and uncontrolled modes. In controlled mode, the component's value is managed by the parent component, while in uncontrolled mode, the component manages its own state.

Disabled Dates

The DatePicker component allows you to disable specific dates, preventing users from selecting them. This is useful for blocking out holidays, weekends, or any dates that should not be selectable in your application.

You can disable dates in the DatePicker using the cellTemplate prop, which lets you customize how individual date cells are rendered. In the example below, we've disabled the 4th, 15th, and 25th days of each month by applying the sf-disabled CSS class:

Special Dates

The DatePicker is used to customize the appearance of specific dates by highlighting important dates, events, or special occasions with custom styling, icons, or indicators.

Format

The DatePicker component supports various date formats, allowing you to display and receive date values in formats that best suit your application needs. You can specify custom date formats using the format property, which accepts standard date format patterns.

Dialog Mode

The DatePicker component supports dialog-style rendering through the pickerVariant property. Setting pickerVariant to Popup enables the DatePicker to open in a modal-like popup, simulating a dialog experience.

Action Button

The DatePicker component provides the footerTemplate property, which allows customizing the footer section of the popup. Using this, action buttons like Ok and Cancel can be added to handle user interactions such as committing or discarding selected dates.

Non-Editable

The DatePicker component provides the editable property, which controls whether users can manually type a date into the input field. When set to false, the input becomes read-only, and dates can only be selected using the calendar popup. This ensures consistent date formatting in DatePicker component.

Variants

The DatePicker component enhances user interaction through its three distinct visual variants: Standard, Outlined and Filled.

Appearance

Disabled

The DatePicker component can be disabled to prevent user interaction. This is useful when you want to temporarily disable the date selection functionality, such as during form validation or when certain conditions are not met. You can disable the DatePicker by setting the disabled property to true.

ReadOnly

The DatePicker component can be set to read-only mode, which allows users to view the selected date but prevents them from making any changes. This is useful when you want to display a date value that should not be altered by the user, such as in a read-only form or when the date is determined by another process. You can set the DatePicker to read-only mode by setting the readOnly property to true.

Float Label

The DatePicker component supports different label display modes through the labelMode property. This property controls how the label or placeholder text appears in relation to the input field.

Available label mode options:

• "Never": The label will never float in the input when the placeholder is available.
• "Always": The floating label will always float above the input.
• "Auto": The floating label will float above the input after focusing or entering a value in the input.

Forms support

The DatePicker component can be integrated into forms to allow users to select dates as part of form submissions. This integration ensures that the selected date is included in the form data, making it easy to handle and validate user input. You can use the DatePicker component within a form by placing it inside a <form> element and handling the form submission as needed.

Accessibility

The DatePicker component follows accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the DatePicker component is outlined below.

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

WAI-ARIA attributes

The DatePicker component follows the WAI-ARIA patterns to meet accessibility requirements. The following ARIA attributes are used in the DatePicker component:

Keyboard interaction

The DatePicker component follows keyboard interaction guidelines, making it accessible for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported: