It seems like there is an out of the box Date block provided by Wordpress: https://wordpress.org/gutenberg/handbook/packages/packages-date/

How can we enable/use this block, or another datepicker block, within the Gutenberg editor?

  • 1
    have you opened an issue on the gutenberg github repo? Not that this is offtopic, but you're 1000x more likely to get an answer there for gutenberg questions
    – Tom J Nowell
    Sep 25, 2018 at 22:32
  • 1
    Made a post on the Gutenberg support form here: wordpress.org/support/topic/how-to-use-wordpress-packages Sep 25, 2018 at 22:47
  • 1
    This is not a block you can add in your editor. It‘s a component developers can use when building something for the editor.
    – swissspidy
    Sep 26, 2018 at 0:32
  • @RaphaelRafatpanah I meant their github issues, they'll see it where you posted but they're likely to migrate you to the github repo issue tracker
    – Tom J Nowell
    Sep 26, 2018 at 16:46
  • @TomJNowell, I was initially going to post a GitHub issue. When opening a new issue, I chose the question option, and was then directed to the forms. Sep 26, 2018 at 16:50

1 Answer 1


WordPress does NOT provide date picker block by default but have date component inside core. You need to call relevant components for date picker to work. Here's code from core Date Component

import { DateTimePicker } from '@wordpress/components';
import { getSettings } from '@wordpress/date';
import { withState } from '@wordpress/compose';

const MyDateTimePicker = withState( {
    date: new Date(),
} )( ( { date, setState } ) => {
    const settings = getSettings();

    // To know if the current timezone is a 12 hour time with look for "a" in the time format.
    // We also make sure this a is not escaped by a "/".
    const is12HourTime = /a(?!\\)/i.test(
            .toLowerCase() // Test only the lower case a
            .replace( /\\\\/g, '' ) // Replace "//" with empty strings
            .split( '' ).reverse().join( '' ) // Reverse the string and test for "a" not followed by a slash

    return (
            currentDate={ date }
            onChange={ ( date ) => setState( { date } ) }
            locale={ settings.l10n.locale }
            is12Hour={ is12HourTime }

} );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.