Change the js time format from 24hr to 12hr

Question

I have already asked a quesion How to hide time standards from javascript

but i need to change time format to 12 hr.

function display_c() {
      var refresh = 1000; // Refresh rate in milli seconds
      mytime = setTimeout('display_ct()', refresh)
    }

    function display_ct() {
      var strcount
      var x = new Date()
      document.getElementById('ct').innerHTML = x.toString().replace(/GMT(.*)/g,"");
      tt = display_c();
    }
display_ct()

<span id='ct'></span>

Possible duplicate of [How do you display javascript datetime in 12 hour AM/PM format?](http://stackoverflow.com/questions/8888491/how-do-you-display-javascript-datetime-in-12-hour-am-pm-format) — Vilas Kumkar, Feb 09 '17 at 07:40

prasanth · Accepted Answer · 2017-02-09T08:26:03.963

Match the hours with regex pattern /(\d+)(:)/ and check > 12 Then apply the condition.

Date methods

function display_c() {
  var refresh = 1000; // Refresh rate in milli seconds
  mytime = setTimeout('display_ct()', refresh)
}
var format;

function display_ct() {
  var strcount
  var x = new Date()
  document.getElementById('ct').innerHTML = x.toString().replace(/GMT(.*)/g, "").replace(/(\d+)(:)/,
    function(a, b, c) {
      b = parseInt(b);
      if (b > 12) {
        b = b - 12;
        format ='PM';
      }
    else{
      b=b;
    format="AM";
      }
      return b + c;
    })+format;
  tt = display_c();
}
display_ct()

<span id='ct'></span>

Or try with another model

function display_c() {
      var refresh = 1000; // Refresh rate in milli seconds
      mytime = setTimeout('display_ct()', refresh)
    }
var m =['Jan','Feb','Mar','Aprl','May','Jun','July','Aug','Sep','Oct','Nov','Dec'];
var w =['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];

    function display_ct() {
      var strcount
      var x = new Date()
      var h = x.getHours() > 12 ? x.getHours() -12 : x.getHours();
      var format = x.getHours() > 12 ? 'PM' : 'AM';
      document.getElementById('ct').innerHTML =w[x.getDay()]+' '+m[x.getMonth()]+' '+x.getFullYear()+' '+h+':'+x.getMinutes()+':'+x.getSeconds()+' '+format;
      tt = display_c();
    }
display_ct()

<span id='ct'></span>

simple show up use with regex model.. if need apply some action use the array model. because its get individual data of the `date ,time second's,month,year` — prasanth, Feb 09 '17 at 08:24

adricadar · Answer 2 · 2017-02-09T12:06:07.343

You can do that using momentjs string format. Using this you can display the date in the way you like.

In the below snippet you can see how to achieve same functionality.

function display_c() {
  var refresh = 1000; // Refresh rate in milli seconds
  mytime = setTimeout('display_ct()', refresh)
}

function display_ct() {
  var strcount
  var x = new Date()
  document.getElementById('ct').innerHTML = moment(x).format('ddd MMM DD gggg hh:mm:ss');
  tt = display_c();
}

display_ct()

<script src="http://momentjs.com/downloads/moment.js"></script>
<span id='ct'></span>

Note:

hh is for 12 hours format, you can find more formats accesing the documentation (you can see some that I used in my example).
The nice thing about this is that remove the need of using replace.
And it follows the KISS principle

Thanks, it is very useful.. but no need any external js. only want to edit with the same code — vishnu, Feb 09 '17 at 08:14

Change the js time format from 24hr to 12hr

2 Answers2