Javascript .toLocaleString() not honoring '2-digit'

Question

Original Question: How do I get the hour/month to respect a '2-digit' formatting.

const event = new Date(2012, 3, 20, 3, 0, 0);

Edit... Apologies all, I don't use this very often

The real issue is depending on which version of chrome you are on, it respects this formatting differently:

For example:

new Date(1561984526000).toLocaleString("ja-JP", {hour: "2-digit"})
// Chrome 80 (and other releases): "08時"
// Chrome 79: "8時"

Related: [How to get correct output of hour: “2-digit” for toLocaleString(“en-US”) with AM/PM?](https://stackoverflow.com/questions/55988030/how-to-get-correct-output-of-hour-2-digit-for-tolocalestringen-us-with-am) — Tyler Roper, Feb 14 '20 at 17:30
Maybe consider another method of testing your date formatting? MDN has a [section for `toLocaleString`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) on reasons to avoid comparing formatted date values to static values with this method. — chazsolo, Feb 14 '20 at 17:34
Hi, in your edit you destroyed your original question. Please restore the question so it makes sense in entirety. (You can append.) Thanks. — Matt Johnson-Pint, Feb 14 '20 at 18:25
Also, now you seem to be asking the opposite - why it wasn't doing 2-digit before and now it is? Probably a bug that was fixed. — Matt Johnson-Pint, Feb 14 '20 at 18:27

score 3 · Answer 1 · answered Feb 14 '20 at 18:05

The main problem is that you are passing options in the first parameter, which is for the locale string. options belongs in the second parameter.

You also need to include the other fields (year, day, minute) if you want them in the results.

const event = new Date(2012, 3, 20, 3, 0, 0);
console.log(event.toLocaleString('en-US', { 
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit' }
));

You can pass undefined in the first parameter if you want it to use the user's current locale.

const event = new Date(2012, 3, 20, 3, 0, 0);
console.log(event.toLocaleString(undefined, { 
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit' }
));

score 2 · Answer 2 · answered Feb 14 '20 at 18:01

2

this is because you forget to add hour12:false

const myDate = new Date(2012, 3, 20, 3, 0, 0)
  ,   dateOpt = { month: '2-digit', hour: '2-digit', hour12:false }
  
  
console.log( myDate.toLocaleString(dateOpt) ); // 20/04/2012 à 03:00:00
// or 
console.log( myDate.toLocaleString('en-US',dateOpt) ); // 04, 03

answered Feb 14 '20 at 18:01

Mister Jojo

16,804
3
16
39

It's kind of stupid that you can't have padded 12 hour formats. "01:00 pm" apparently isn't valid. Makes input masking a bit more difficult. – pbarney Jul 01 '21 at 15:57
@pbarney not really `hour12:true` will add `AM` or `PM` – Mister Jojo Jul 01 '21 at 16:13
I think you're not understanding. You can have `1:30 PM` but _not_ `01:30 PM`. – pbarney Jul 08 '21 at 19:50
@pbarney Ah, I see, your reasoning rests on a false base: the W3C imposes to respect the international standards of formatting of the dates / times according to each country, it is not made to format the dates and the times according to your fancy. – Mister Jojo Jul 09 '21 at 00:32

score 1 · Answer 3 · edited Feb 16 '20 at 21:06

1

Personally I never trust in toLocaleString function, I prefer to use getMonth and lpad to formatting a date manually.

Another advantage is that you don't depend on anything to do it

function lpad (strModify, intMaxPad) 
{
    if (typeof strModify == 'undefined') 
    {
        return false;
    }
    strModify = strModify.toString();
    return strModify.length < intMaxPad ? lpad("0" + strModify, intMaxPad) : strModify;
}

$(function(){

    var objDate = new Date(2012, 3, 20, 3, 0, 0);
    console.log( lpad((objDate.getMonth() + 1), 2) + '/' + lpad(objDate.getDate(), 2) + '/' + objDate.getFullYear()  );
});

You can also use the ~~Moment~~ Luxon library

edited Feb 16 '20 at 21:06

marc_s

704,970
168
1,303
1,425

answered Feb 14 '20 at 17:55

jmrobin92

31
3

This eliminates the locale awareness that `toLocaleString` offers - for example, m/d/y vs d/m/y formats for the date portion. Also, the Moment team recommends [Luxon](https://moment.github.io/luxon/) for all new development. – Matt Johnson-Pint Feb 14 '20 at 17:58
Yeah yeah, Luxon instead. But toLocaleString, has had constant changes through the browser versions, that has made some functions have unexpected behaviors. I think it is better option to use a library if you want to manage dates in javascript in the easiest way. – jmrobin92 Feb 14 '20 at 18:09
Sure. Also, [date-fns](https://date-fns.org/) and [js-Joda](https://js-joda.github.io/js-joda/) are good alternatives. :) – Matt Johnson-Pint Feb 14 '20 at 18:24

Javascript .toLocaleString() not honoring '2-digit'

3 Answers3

Linked