Title: DatePicker
Published: April 14, 2026

---

# DatePicker

## In this article

 * [Usage](https://developer.wordpress.org/block-editor/reference-guides/components/date-picker/?output_format=md#usage)
 * [Props](https://developer.wordpress.org/block-editor/reference-guides/components/date-picker/?output_format=md#props)
    - [currentDate: Date | string | number | null](https://developer.wordpress.org/block-editor/reference-guides/components/date-picker/?output_format=md#currentdate-date-string-number-null)
    - [onChange: ( date: string ) => void](https://developer.wordpress.org/block-editor/reference-guides/components/date-picker/?output_format=md#onchange-date-string-void)
    - [events: { date: Date }[]](https://developer.wordpress.org/block-editor/reference-guides/components/date-picker/?output_format=md#events-date-date)
    - [isInvalidDate: ( date: Date ) => boolean](https://developer.wordpress.org/block-editor/reference-guides/components/date-picker/?output_format=md#isinvaliddate-date-date-boolean)
    - [onMonthPreviewed: ( date: string ) => void](https://developer.wordpress.org/block-editor/reference-guides/components/date-picker/?output_format=md#onmonthpreviewed-date-string-void)
    - [startOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6](https://developer.wordpress.org/block-editor/reference-guides/components/date-picker/?output_format=md#startofweek-0-1-2-3-4-5-6)

[ Back to top](https://developer.wordpress.org/block-editor/reference-guides/components/date-picker/?output_format=md#wp--skip-link--target)

DatePicker is a React component that renders a calendar for date selection. It can
be used independently or as part of the `DateTimePicker` component.

## 󠀁[Usage](https://developer.wordpress.org/block-editor/reference-guides/components/date-picker/?output_format=md#usage)󠁿

Render a DatePicker.

    ```language-jsx
    import { useState } from 'react';
    import { DatePicker } from '@wordpress/components';

    const MyDatePicker = () => {
        const [ date, setDate ] = useState( new Date() );

        return (
            <DatePicker
                currentDate={ date }
                onChange={ ( newDate ) => setDate( newDate ) }
            />
        );
    };
    ```

## 󠀁[Props](https://developer.wordpress.org/block-editor/reference-guides/components/date-picker/?output_format=md#props)󠁿

The component accepts the following props:

### 󠀁[currentDate: Date | string | number | null](https://developer.wordpress.org/block-editor/reference-guides/components/date-picker/?output_format=md#currentdate-date-string-number-null)󠁿

The current date at initialization. Optionally pass in a `null` value to specify
no date is currently selected.

 * Required: No
 * Default: today’s date

### 󠀁[onChange: ( date: string ) => void](https://developer.wordpress.org/block-editor/reference-guides/components/date-picker/?output_format=md#onchange-date-string-void)󠁿

The function called when a new date has been selected. It is passed the `currentDate`
as an argument.

 * Required: No

### 󠀁[events: { date: Date }[]](https://developer.wordpress.org/block-editor/reference-guides/components/date-picker/?output_format=md#events-date-date)󠁿

List of events to show in the date picker. Each event will appear as a dot on the
day of the event.

 * Required: No

### 󠀁[isInvalidDate: ( date: Date ) => boolean](https://developer.wordpress.org/block-editor/reference-guides/components/date-picker/?output_format=md#isinvaliddate-date-date-boolean)󠁿

A callback function which receives a Date object representing a day as an argument,
and should return a Boolean to signify if the day is valid or not.

 * Required: No

### 󠀁[onMonthPreviewed: ( date: string ) => void](https://developer.wordpress.org/block-editor/reference-guides/components/date-picker/?output_format=md#onmonthpreviewed-date-string-void)󠁿

A callback invoked when selecting the previous/next month in the date picker. The
callback receives the new month date in the ISO format as an argument.

 * Required: No

### 󠀁[startOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6](https://developer.wordpress.org/block-editor/reference-guides/components/date-picker/?output_format=md#startofweek-0-1-2-3-4-5-6)󠁿

The day that the week should start on. 0 for Sunday, 1 for Monday, etc.

 * Required: No
 * Default: 0

First published

April 14, 2026

Last updated

April 14, 2026

Edit article

[ Improve it on GitHub: DatePicker ](https://github.com/WordPress/gutenberg/edit/trunk/packages/components/src/date-time/date-picker/README.md)

[  Previous: DimensionControl](https://developer.wordpress.org/block-editor/reference-guides/components/dimension-control/)

[  Next: DateTime](https://developer.wordpress.org/block-editor/reference-guides/components/date-time/)