DateTime Edit

DateTimePicker is a React component that renders a calendar and clock for date and time selection. The calendar and clock components can be accessed individually using the DatePicker and TimePicker components respectively.

Date Time component

Best practices Best practices

Date pickers should:

  • Use smart defaults and highlight the current date.

Top ↑

Usage Usage

Render a DateTimePicker.

import { DateTimePicker } from '@wordpress/components';
import { useState } from '@wordpress/element';

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

    return (
            currentDate={ date }
            onChange={ ( newDate ) => setDate( newDate ) }
            is12Hour={ true }

Top ↑

Props Props

The component accepts the following props:

currentDate currentDate

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

  • Type: string
  • Required: No
  • Default: today’s date

Top ↑

onChange onChange

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

  • Type: Function
  • Required: Yes

Top ↑

is12Hour is12Hour

Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is displayed and the time format is assumed to be MM-DD-YYYY.

  • Type: bool
  • Required: No
  • Default: false

Top ↑

isInvalidDate isInvalidDate

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.

  • Type: Function
  • Required: No