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 at 22:32
  • 1
    Made a post on the Gutenberg support form here: wordpress.org/support/topic/how-to-use-wordpress-packages – Raphael Rafatpanah Sep 25 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 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 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. – Raphael Rafatpanah Sep 26 at 16:50
up vote 0 down vote accepted

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(
        settings.formats.time
            .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 (
        <DateTimePicker
            currentDate={ date }
            onChange={ ( date ) => setState( { date } ) }
            locale={ settings.l10n.locale }
            is12Hour={ is12HourTime }
            />
    );

} );

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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