change time format to 24 hours in javascript

Question

I have a time format like: 12/16/2011 3:49:37 PM and I got this format by:

var newDate = new Date(timeFromat);
timeFormat = newDate.toLocaleString();

My actual format was GMT and I converted it to my bowers time by using the code above.

and I want to change it to 24h time format so I want this date to be changed like: 12/16/2011 15:49:37 and I want to do it in javascript.

Thats what I did

var firstPartOftimeFormat = timeFormat.substring(0,9);
var secondPartOftimeFormat = timeFormat.substring(10,20);

but it does not work when the date format is like: 3/16/2011. but the following part works.

var time = $("#starttime").val();
var hours = Number(secondPartOftimeFormat.match(/^(\d+)/)[1]);
var minutes = Number(secondPartOftimeFormat.match(/:(\d+)/)[1]);
var AMPM = secondPartOftimeFormat.match(/\s(.*)$/)[1];
if(AMPM == "PM" && hours<12) hours = hours+12;
if(AMPM == "AM" && hours==12) hours = hours-12;
var sHours = hours.toString();
var sMinutes = minutes.toString();
if(hours<10) sHours = "0" + sHours;
if(minutes<10) sMinutes = "0" + sMinutes;
alert(sHours + ":" + sMinutes);

Can you suggest other approach?

thanks

Various solutions to your problem: http://stackoverflow.com/questions/1056728/where-can-i-find-documentation-on-formatting-a-date-in-javascript — Alex van den Hoogen, Mar 12 '14 at 09:49
Why are you using `toLocaleString` (which behaves differently for different locales) when you want a specific output format? I'd use a manual formatting here. — John Dvorak, Mar 12 '14 at 09:49
Do not set any time format javascript `Date` by default return time in 24hr. — Mithlesh Kumar, Mar 12 '14 at 09:55
Thanks, but my time format was GMT and I converted it to my browers time by var newDate = new Date(timeFromat); timeFormat = newDate.toLocaleString(); and the time is a past time. — user3409650, Mar 12 '14 at 10:41

score 68 · Answer 1 · answered Oct 24 '15 at 09:08

68

use dateObj.toLocaleString([locales[, options]])

Option 1 - Using locales

var date = new Date();
console.log(date.toLocaleString('en-GB'));

Option 2 - Using options

var options = { hour12: false };
console.log(date.toLocaleString('en-US', options));

answered Oct 24 '15 at 09:08

LiranBo

2,054
2
23
39

8

Doesn't seem to work by now for some reason, it still returns time in 12 hours format. – Redoman Feb 16 '18 at 12:12
2

it should be selected answer! – Amir Hedieh Mar 20 '19 at 17:04
I mistakenly first tried `date.toLocaleString(options)`, which didn't work but didn't fail, but then changed it to `date.toLocaleString('en-US', options)`, which did work. – hBrent Oct 08 '21 at 22:13

score 18 · Answer 2 · edited Apr 04 '21 at 13:05

18

hourCycle: 'h23' is Perfect

Thanks to https://stackoverflow.com/users/12425695/luis-serrano

new Date().toLocaleString('ru-RU', {
    timeZone: 'Europe/Moscow',
    hourCycle: 'h23',
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit"
});

edited Apr 04 '21 at 13:05

Syscall

19,327
10
37
52

answered Apr 04 '21 at 10:57

user3640561

191
1
6

2

I think nowadays you use `hour12`, which is a boolean. So it would be something like: ```hour12: false, year: "numeric", month: "2-digit", etc etc etc``` – S. Dre Jun 30 '22 at 07:45

score 12 · Answer 3 · answered Jan 09 '19 at 22:02

Using some resources
Date/toLocaleDateString^_MDN
Date/toLocaleTimeString^_MDN

const lang = navigator.language || navigator.languages[0];
const date = new Date();
const date_locale = date.toLocaleDateString(lang, {
  day: 'numeric',
  month: 'short',
  year: 'numeric'
});
const time_locale = date.toLocaleTimeString(lang);

const formatted = `${date_locale} ${time_locale}`;
console.log(formatted)

above we deduce the current language from the Window's Navigator object.
In case lang ends up being undefined it's perfectly fine, defaults will be used.

To force a desired format, you can manually set lang to i.e: 'en-US', 'eu', 'en-GB', 'de-DE', 'hr-HR' etc...

Here's an example for time:

const date = new Date();
console.log(date.toLocaleTimeString('en-US')) // 12h
console.log(date.toLocaleTimeString('en-GB')) // 24h
console.log(date.toLocaleTimeString())        // Default

Luis Serrano · Answer 4 · 2021-02-10T05:20:17.490

9

To get 24hrs format:

const date = new Date();
console.log(date.toLocaleTimeString([], {
    hourCycle: 'h23',
    hour: '2-digit',
    minute: '2-digit'
}));

edited Feb 10 '21 at 05:20

answered Feb 10 '21 at 05:15

Luis Serrano

91
1
2

score 5 · Answer 5 · answered Mar 12 '14 at 09:52

5

You can use the below code to get 24hrs format

new Date("3/16/2011 3:49:37 PM").getHours() // 15
new Date("3/16/2011 3:49:37 PM").getMinutes() // 49

answered Mar 12 '14 at 09:52

Raja Asthana

2,080
2
19
35

score 3 · Answer 6 · answered Nov 15 '17 at 06:48

try this:

// British English uses day-month-year order and 24-hour time without AM/PM
console.log(date.toLocaleString('en-GB'));
// → "20/12/2012 03:00:00"

reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString

score 2 · Answer 7 · answered Dec 14 '18 at 06:51

2

Try this, Its Perfectly Working fine for me. It gives 24 hrs time format

var Date= new Date();

var TimeFormat= date.toLocaleString('en-GB');

Your answer will be Fri Dec 14 2018 18:00:00 GMT+0530 (India Standard Time)

answered Dec 14 '18 at 06:51

keerthi

158
10

score 1 · Answer 8 · answered Jul 06 '22 at 06:04

1

new Date().toLocaleTimeString('fa-IR', { hour12: false, hour: '2-digit', minute: '2-digit' })

this is how it worked for me!

answered Jul 06 '22 at 06:04

Outsider

9
2

score 1 · Answer 9 · answered Jan 11 '23 at 06:35

1

Try this, It's Working fine for me. It gives 24 hrs time format.

let time = new Date(new Date().toLocaleString('en-GB', { timeZone: 'Europe/London' }));

answered Jan 11 '23 at 06:35

Motalib Hossain

63
1
9

score 0 · Answer 10 · edited Feb 03 '17 at 10:54

0

Try this function

<script type="text/javascript">
    <!--
    function displayTime() {
        var currentDate = new Date();
        var currentHour = currentDate.getHours();
        var currentMinute = currentDate.getMinutes();
        var currentSecond = currentDate.getSeconds();
        document.getElementById('timeDiv').innerHTML = 'Hour: ' + currentHour + ' Minute: ' + currentMinute + ' Second: ' + currentSecond;
    }

    window.onload = function() {
        window.setInterval('displayTime()', 1000);
    }
    // -->
</script>

edited Feb 03 '17 at 10:54

secelite

1,353
1
11
19

answered Mar 12 '14 at 09:54

Systematix Infotech

2,345
1
14
31

Thanks, but my time format was GMT and I converted it to my browers time by var newDate = new Date(timeFromat); timeFormat = newDate.toLocaleString(); and the time is a past time. but your solution does not work. since When I apply getHours() in timeFormat = newDate.toLocaleString().getHourse(); it does not work – user3409650 Mar 12 '14 at 10:39

score 0 · Answer 11 · answered Mar 12 '14 at 09:55

0

Try this

var d = new Date();
alert(d.getHours());
alert(d.getMinutes());

answered Mar 12 '14 at 09:55

Ravendra Kumar

1,072
10
29

score 0 · Answer 12 · answered Feb 04 '23 at 17:15

0

console.log(Utilities.formatDate(new Date(),"GMT+3","dd.MM.yy k:mm:ss"));

try in format k:m:s insted of hh:mm:ss to

Utilities.formatDate

Tutorial Class SimpleDateFormat

answered Feb 04 '23 at 17:15

Stanislav Titarenko

1

score 0 · Answer 13 · answered Feb 09 '23 at 07:32

0

const number = moment("02:00 PM", ["h:mm A"]).format("HH:mm"); console.log(number);

answered Feb 09 '23 at 07:32

Judith lobo

131
4

change time format to 24 hours in javascript

13 Answers13

Linked