datetimePlayground.js

/**
 * External dependencies
 */
import '@babel/polyfill';

/**
 * WordPress dependencies
 */
import '@wordpress/editor'; // This shouldn't be necessary

import { render } from '@wordpress/element';
import { DateTimePicker } from '@wordpress/components';
import { registerCoreBlocks } from '@wordpress/block-library';
import '@wordpress/format-library';
import { __experimentalGetSettings } from '@wordpress/date';
import { withState } from '@wordpress/compose';

/* eslint-disable no-restricted-syntax */
import '@wordpress/components/build-style/style.css';
/* eslint-enable no-restricted-syntax */

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

	// 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 }
		/>
	);
} );

function App() {
	return (
		<div style={ { width: '240px', marginLeft: 'auto', marginRight: 'auto' } }>
			<MyDateTimePicker />
		</div>

	);
}

registerCoreBlocks();
render(
	<App />,
	document.querySelector( '#app' )
);