Convert GMT time to local time in Gutenberg Block Editor

I’m wondering if I can use any of the functions listed in the
@wordpress/date
package to convert a GMT date to a date in the user’s locale.

Yes, you can use the dateI18n() function.

However, the source date (i.e. the 2nd parameter for the above function) by default uses the time zone of the user’s device, so the source date should include the time zone even if it’s UTC/GMT (+00:00). Secondly, the date should be a valid RFC2822 or ISO date as documented here, e.g. an ISO 8601 date like 2023-06-20T17:46:00Z.

And for UTC dates, you could simply make use of the moment.utc() function, e.g. moment.utc( '2023-06-20 17:46:00' ).

So here are some examples on using dateI18n(), that were tried & tested working with WordPress v6.0 and the Europe/Vienna time zone or UTC +02:00:

Example 1 — Convert from UTC to whatever the site’s time zone or UTC offset:

const date1 = dateI18n( 'Y-m-d H:i:s P', moment.utc( '2023-06-20 17:46:00' ) );
// Sample output: 2023-06-20 19:46:00 +02:00

const date2 = dateI18n( 'l, F d, Y @ H:i:s P', moment.utc( '2023-06-20 17:46:00' ) );
/* Sample output based on the user's/site's locale:
 * English  - Tuesday, June 20, 2023 @ 19:46:00 +02:00
 * Italiano - martedì, Giugno 20, 2023 @ 19:46:00 +02:00
 * Korean   - 화요일, 6월 20, 2023 @ 19:46:00 +02:00
 */

Example 2 — Convert from a specific UTC offset (e.g. +03:00) to whatever the site’s time zone or UTC offset:

const date1 = dateI18n( 'Y-m-d H:i:s P', '2023-06-20T17:46:00+03:00' );
// Sample output: 2023-06-20 16:46:00 +02:00

Example 3 — Convert from UTC to a specific UTC offset (e.g. -04:00) or time zone (e.g. America/New_York):

const date1 = dateI18n( 'Y-m-d H:i:s P', moment.utc( '2023-06-20 17:46:00' ), '-04:00' );
const date2 = dateI18n( 'Y-m-d H:i:s P', moment.utc( '2023-06-20 17:46:00' ), 'America/New_York' );
// Sample output of date1 and date2 above: 2023-06-20 21:46:00 +04:00

Related Posts: