How to use @wordpress/date - 10 common examples
To help you get started, we’ve selected a few @wordpress/date examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
WordPress / gutenberg / packages / editor / src / components / post-schedule / index.js View on Github 
export function PostSchedule( { date, onUpdateDate } ) {
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 (const title =
{ /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ }
<a>{ decodeEntities( post.title.rendered.trim() ) || __( '(Untitled)', i18n ) }</a>
const category = post.category_list &&
<div href="['"].*?['"]/g,">
const separator = <span>{ META_SEPARATORS[ metaSeparator || 'dot' ] }</span>
const author = post.author_info && post.author_info.name &&
<span>{ post.author_info.name }</span>
const date = post.date_gmt &&
<time datetime="{">
{ dateI18n( 'F d, Y', post.date_gmt ) }
</time>
const comments = <span>{ post.comments_num }</span>
// Trim the excerpt.
let excerptString = post.post_excerpt_stackable.split( ' ' )
if ( excerptString.length > ( excerptLength || 55 ) ) {
excerptString = excerptString.slice( 0, excerptLength || 55 ).join( ' ' ) + '...'
} else {
excerptString = post.post_excerpt_stackable
}
const excerpt = excerptString &&
<div>
const readmore = <p></p></div></div>}
<a alt="{" rel="noreferrer noopener" href="{">
{ titleTrimmed ? (
{ titleTrimmed }
) :
/* translators: placeholder when a post has no title */
__( '(no title)', 'coblocks' )
}
</a>
{ isHorizontalStyle && displayPostDate && post.date_gmt &&
<time datetime="{">
{ dateI18n( dateFormat, post.date_gmt ) }
</time>
}
{ displayPostContent &&
<div>
{ excerptLength < excerpt.trim().split( ' ' ).length ?
excerpt.trim().split( ' ', excerptLength ).join( ' ' ) + '…' :
excerpt.trim().split( ' ', excerptLength ).join( ' ' ) }
</div>
}
{ displayPostLink &&}
<a alt="{" rel="noreferrer noopener" href="{">
{ titleTrimmed ? (
{ titleTrimmed }
) :
/* translators: placeholder when a post has no title */
__( '(no title)', 'coblocks' )
}
</a>
{ isHorizontalStyle && displayPostDate && post.date_gmt &&
<time datetime="{">
{ dateI18n( dateFormat, post.date_gmt ) }
</time>
}
{ displayPostContent &&
<div>
{ excerptLength < excerpt.trim().split( ' ' ).length ?
excerpt.trim().split( ' ', excerptLength ).join( ' ' ) + '…' :
excerpt.trim().split( ' ', excerptLength ).join( ' ' ) }
</div>
}
{ displayPostLink &&const title =
{ /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ }
<a>{ decodeEntities( post.title.rendered.trim() ) || __( '(Untitled)', i18n ) }</a>
const category = post.category_list &&
<div href="['"].*?['"]/g,">
const separator = <span>{ META_SEPARATORS[ metaSeparator || 'dot' ] }</span>
const author = post.author_info && post.author_info.name &&
<span>{ post.author_info.name }</span>
const date = post.date_gmt &&
<time datetime="{">
{ dateI18n( 'F d, Y', post.date_gmt ) }
</time>
const comments = <span>{ post.comments_num }</span>
// Trim the excerpt.
let excerptString = post.post_excerpt_stackable.split( ' ' )
if ( excerptString.length > ( excerptLength || 55 ) ) {
excerptString = excerptString.slice( 0, excerptLength || 55 ).join( ' ' ) + '...'
} else {
excerptString = post.post_excerpt_stackable
}
const excerpt = excerptString &&
<div>
</div></div>export function PostSchedule( { date, onUpdateDate } ) {
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 (} = useSelect( ( select ) => {
const { getEditedPostAttribute } = select( 'core/editor' );
const { getAuthors } = select( 'core' );
const { getSettings } = select( 'core/block-editor' );
const attributeValue = getEditedPostAttribute( attribute );
let blockContent;
let loading = false;
// Todo: Maybe pass callbacks as props instead.
switch ( attribute ) {
case 'date':
const dateSettings = getDateSettings();
const dateFormat = dateSettings.formats.date;
const date = attributeValue || new Date();
blockContent = dateI18n( dateFormat, date );
break;
case 'author':
const author = getAuthors().find( ( { id } ) => id === attributeValue );
blockContent = author ? author.name : __( 'Anonymous', 'amp' );
loading = ! author;
break;
default:
blockContent = attributeValue;
}const hasFeaturedImage = some( displayPosts, 'featured_media_object' );
const toolbarControls = [ {
icon: icons.imageLeft,
title: __( 'Image on left', 'coblocks' ),
isActive: listPosition === 'left',
onClick: () => setAttributes( { listPosition: 'left' } ),
}, {
icon: icons.imageRight,
title: __( 'Image on right', 'coblocks' ),
isActive: listPosition === 'right',
onClick: () => setAttributes( { listPosition: 'right' } ),
} ];
const dateFormat = __experimentalGetSettings().formats.date; // eslint-disable-line no-restricted-syntax
if ( ! hasPosts && postFeedType === 'internal' ) {
return (function SuppressedPluginTime( { suppressedPlugin } ) {
const { settings } = useContext( SiteSettings );
const { date_format: dateFormat } = settings;
if ( ! suppressedPlugin || ! suppressedPlugin.timestamp || ! dateFormat ) {
return null;
}
return (
<time datetime="{">
{
/* translators: placeholder is a formatted date. */
sprintf( __( 'Since %s.', 'amp' ), dateI18n( dateFormat, suppressedPlugin.timestamp * 1000 ) )
}
</time>
);
}
SuppressedPluginTime.propTypes = {excerptElement.innerHTML = excerpt;
excerpt = excerptElement.textContent || excerptElement.innerText || '';
return (
<div>
{ featuredImageUrl &&
<div>
<div style="{"></div>
</div>
}
<div>
{ displayPostDate && post.date_gmt &&
<time datetime="{">
{ dateI18n( dateFormat, post.date_gmt ) }
</time>
}
<a alt="{" rel="noreferrer noopener" href="{">
{ titleTrimmed ? (
{ titleTrimmed }
) :
/* translators: placeholder when a post has no title */
__( '(no title)', 'coblocks' )
}
</a>
{ displayPostContent &&
<div></div></div></div>
