How to use the @wordpress/date.dateI18n function in @wordpress/date
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.
gambitph / Stackable / src / block / blog-posts / edit.js View on Github 
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 &&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>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;
}
return {
content: blockContent,
placeholder,...map( range( 0, 12 ), value => ( {
// Following call generates a new date object for the particular month and gets its name.
label: dateI18n( 'F', new Date( [ 0, value + 1 ] ) ),
value,
} ) ),
];excerptElement.innerHTML = excerpt;
excerpt = excerptElement.textContent || excerptElement.innerText || '';
return (
<li>
<a rel="noreferrer noopener" href="{">
{ titleTrimmed ? (
{ titleTrimmed }
) :
__( '(no title)' )
}
</a>
{ displayPostDate && post.date_gmt &&
<time datetime="{">
{ dateI18n( dateFormat, post.date_gmt ) }
</time>
}
{ displayPostContent && displayPostContentRadio === 'excerpt' &&
<div>
{ excerptLength < excerpt.trim().split( ' ' ).length ?
excerpt.trim().split( ' ', excerptLength ).join( ' ' ) + ' ... <a rel="noopener noreferrer" href="+ post.link +">' + __( 'Read more' ) + '</a>' :
excerpt.trim().split( ' ', excerptLength ).join( ' ' ) }
</div>
}
{ displayPostContent && displayPostContentRadio === 'full_post' &&
<div>
</div></li>label = content.length > 0 ? content : blockType.title;
break;
case 'amp/amp-story-post-author':
const author = getAuthors().find( ( { id } ) => id === getEditedPostAttribute( 'author' ) );
label = author ? author.name : __( 'Post Author', 'amp' );
break;
case 'amp/amp-story-post-date':
const postDate = getEditedPostAttribute( 'date' );
const dateSettings = getDateSettings();
const dateFormat = dateSettings.formats.date;
const date = postDate || new Date();
label = dateI18n( dateFormat, date );
break;
case 'amp/amp-story-post-title':
label = getEditedPostAttribute( 'title' ) || blockType.title;
break;
default:
break;
}
return {
content: label,
icon: blockType.icon,
};
} )( BlockPreviewLabel );)
} )
: 'N/A' }
);
}
}
case 'DateTimePicker': {
const dateFormat = __experimentalGetSettings().formats.datetime;
return (
<div name="">
<time datetime="{">
{ dateI18n( dateFormat, fieldValue ) }
</time>
</div>
);
}
case 'NumberControl': {
let { locale } = __experimentalGetSettings().l10n;
locale = locale.replace( '_', '-' );
return (
<div name="">
{ !! fieldValue && fieldValue.toLocaleString( locale ) }
</div>
);
}
case 'MediaUpload': {export function PostScheduleLabel( { date, isFloating } ) {
const settings = __experimentalGetSettings();
return date && ! isFloating ?
dateI18n( settings.formats.datetimeAbbreviated, date ) :
__( 'Immediately' );
}
