JSFiddle - React, Tailwind, and code Playground

by Uday Hiwarale

JavaScript

// create internationlizaton DateTime object using a language
// use "default" for browser's default locale
// pass array like [ 'ban', 'us-in' ] for fallback
// list of locale: http://www.lingoes.net/en/translator/langcode.htm
var intlEnUs = new Intl.DateTimeFormat( 'en-US' ); // USA
var intlEnIn = new Intl.DateTimeFormat( 'en-GB' ); // great britain == india

// format a given date
var dateEnUS = intlEnUs.format( new Date() );
var intlEnIn = intlEnIn.format( new Date() );

console.log( 'dateEnUS', dateEnUS );
console.log( 'intlEnIn', intlEnIn );

// format using custom options
var dateTimeFormatterEnIn = new Intl.DateTimeFormat( 'en-in', {
	timeZone: 'Asia/Kolkata', // list of timezones: https://timezonedb.com/time-zones
  hour12: true, // false for 24hr
  weekday: 'long', // "long" (e.g., Thursday), "short" (e.g., Thu), "narrow" (e.g., T). 
  //era: 'long', // "long" (e.g., Anno Domini), "short" (e.g., AD), "narrow" (e.g., A)
  year: 'numeric', // "numeric" (e.g., 2012), "2-digit" (e.g., 12)
  month: "short", // (e.g., 2), "2-digit" (e.g., 02), "long" (e.g., March), "short" (e.g., Mar), "narrow" (e.g., M). 
  day: '2-digit', // "numeric" (e.g., 1), "2-digit" (e.g., 01)
  hour: '2-digit', // "numeric" (e.g., 1), "2-digit" (e.g., 01)
  minute: '2-digit', // "numeric" (e.g., 1), "2-digit" (e.g., 01)
  //second: '2-digit', // "numeric" (e.g., 1), "2-digit" (e.g., 01)
  //timeZoneName: "long", // "long" (e.g., British Summer Time), "short" (e.g., GMT+1)
} );

var dateEnInCustom = dateTimeFormatterEnIn.format( new Date() );
console.log( 'dateEnInCustom', dateEnInCustom );