local client-side JavaScript numeric date format (in browser)

Question

So I couldn't find a good answer for how to get a numeric date format in client-side JavaScript specific to the users locale. E.g. if your language is 'en-US' I would like to get 'MM/DD/YYYY'.

Answer 1

Date.toLocaleDateString can be passed the options {year: 'numeric', month: '2-digit', day: '2-digit',} to format a date in a numeric format that nearest matches the user's locale.

To get a date format with "YYYY", "MM" and "DD" placeholders, you can replace a specific year, month and day with the respective placeholder string.

// Replace with date format e.g. 'MM/DD/YYYY'
const FALLBACK_DATE_FORMAT = 'your fallback date format';

// Memoize return value
let cachedNumericFixedWidthDateFormat = null;

function getNumericFixedWidthDateFormat() {
    if (cachedNumericFixedWidthDateFormat !== null) {
        return cachedNumericFixedWidthDateFormat;
    }

    let dateFormat;
    try {
        const dummyDate = new Date();
        dummyDate.setFullYear(1984);
        dummyDate.setMonth(0);
        dummyDate.setDate(23);

        dateFormat = dummyDate.toLocaleDateString(undefined, {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
        }).replace('1984', 'YYYY').replace('01', 'MM').replace('23', 'DD');
    } catch (err) {
        // TODO: Monitor errors!

        return FALLBACK_DATE_FORMAT;
    }

    if (checkIsValidDateFormat(dateFormat)) {
        cachedNumericFixedWidthDateFormat = dateFormat;

        return dateFormat;
    } else {
        // TODO: Add monitoring!

        return FALLBACK_DATE_FORMAT;
    }
}

function checkIsValidDateFormat(dateFormat) {
    const yearCharsMatches = dateFormat.match(/YYYY/g);
    const monthCharsMatches = dateFormat.match(/MM/g);
    const dayCharsMatches = dateFormat.match(/DD/g);
    const digitCharMatches = dateFormat.match(/[0-9]/g);

    return yearCharsMatches !== null && yearCharsMatches.length === 1
        && monthCharsMatches !== null && monthCharsMatches.length === 1
        && dayCharsMatches !== null && dayCharsMatches.length === 1
        && digitCharMatches === null;
}

// Output for Mozilla Firefox 87.0 on Ubuntu 20.04:
//     en-US: 'MM/DD/YYYY'
//     de-DE: 'DD.MM.YYYY'
//     es-ES, es-AR, en-GB: 'DD/MM/YYYY'
console.log(getNumericFixedWidthDateFormat());

original TypeScript playground

Answer 2

While it is very hard to determine the the locale of the user, we can determine the user's preferred languages and pass these to a Intl.DateTimeFormat() constructor to create a date formatter.

Pass a Date object to the format function of the formatter to format the date to the pre-specified conditions.

// Function that returns an instance of the DateTimeFormat constructor.
const createDateFormatter = () => new Intl.DateTimeFormat([], {
  year: '2-digit',
  month: '2-digit',
  day: '2-digit'
});

// Current date of today.
const date = new Date();

// Create a new formatter.
const dateFormatter = createDateFormatter();

// Format the date.
const formattedDate = dateFormatter.format(date);
console.log(formattedDate);