how to change 24 hours format to 12 hours?

Question

my question is about i am using below code for date and time in 24 hours format, but here i need to change the format to 12 hours. please help me solve the issue.

$(document).ready(function() {
  // Making 2 variable month and day
  var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

  // make single object
  var newDate = new Date();
  // make current time
  newDate.setDate(newDate.getDate());
  // setting date and time
  $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

  setInterval(function() {
    // Create a newDate() object and extract the seconds of the current time on the visitor's
    var seconds = new Date().getSeconds();
    // Add a leading zero to seconds value
    $("#sec").html((seconds < 10 ? "0" : "") + seconds);
  }, 1000);

  setInterval(function() {
    // Create a newDate() object and extract the minutes of the current time on the visitor's
    var minutes = new Date().getMinutes();
    // Add a leading zero to the minutes value
    $("#min").html((minutes < 10 ? "0" : "") + minutes);
  }, 1000);

  setInterval(function() {
    // Create a newDate() object and extract the hours of the current time on the visitor's
    var hours = new Date().getHours();
    // Add a leading zero to the hours value
    $("#hours").html((hours < 10 ? "0" : "") + hours);
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div class="clock">
  <div id="Date"></div>

  <ul>
    <li id="hours"></li>
    <li id="point">:</li>
    <li id="min"></li>
    <li id="point">:</li>
    <li id="sec"></li>
  </ul>
</div>

possible duplicate https://stackoverflow.com/questions/23946698/changing-date-time-format-using-jquery-javascript — Akhil Aravind, Jun 19 '18 at 09:15
Also note that using three separate intervals is rather wasteful. Put all your logic in a single one — Rory McCrossan, Jun 19 '18 at 09:16

score 0 · Answer 1 · answered Jun 19 '18 at 09:21

use ("0"+hours%12).slice(-2) to do two digits 12 hours format and use (hours/12 == 0) to get AM/PM:

$(document).ready(function() {
  // Making 2 variable month and day
  var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

  // make single object
  var newDate = new Date();
  // make current time
  newDate.setDate(newDate.getDate());
  // setting date and time
  $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

  setInterval(function() {
    // Create a newDate() object and extract the seconds of the current time on the visitor's
    var seconds = new Date().getSeconds();
    // Add a leading zero to seconds value
    $("#sec").html((seconds < 10 ? "0" : "") + seconds);
  }, 1000);

  setInterval(function() {
    // Create a newDate() object and extract the minutes of the current time on the visitor's
    var minutes = new Date().getMinutes();
    // Add a leading zero to the minutes value
    $("#min").html((minutes < 10 ? "0" : "") + minutes);
  }, 1000);

  setInterval(function() {
    // Create a newDate() object and extract the hours of the current time on the visitor's
    var hours = new Date().getHours();
    // Add a leading zero to the hours value
    $("#hours").html(("0"+hours%12).slice(-2) + " " + ((hours/12 == 0)?"AM":"PM"));
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div class="clock">
  <div id="Date"></div>

  <ul>
    <li id="hours"></li>
    <li id="point">:</li>
    <li id="min"></li>
    <li id="point">:</li>
    <li id="sec"></li>
  </ul>
</div>

With this method `12pm` becomes `0pm`. It's also telling me my local time is 10pm, when it's actually 10am — Rory McCrossan, Jun 19 '18 at 09:31

SOUser · Answer 2 · 2018-06-19T09:45:44.160

0

use this method.

function ampmFormat(date) {
     var hours = date.getHours();
     var minutes = date.getMinutes();
     var ampm = hours >= 12 ? 'pm' : 'am';
     hours = hours % 12;
     hours = hours ? hours : 12; 
     minutes = minutes < 10 ? '0'+minutes : minutes;
     var strTime = hours + ':' + minutes + ' ' + ampm;
     return strTime;
  }

Then you can add day , month and year with this.

edited Jun 19 '18 at 09:45

answered Jun 19 '18 at 09:31

SOUser

44
7

score 0 · Answer 3 · answered Jun 19 '18 at 09:58

Add the following code after assigning current hour to hours var.

var timing = hours >= 12 ? 'PM' : 'AM';
hours %= 12;      
if(hours == 0)
hours = 12;          
$("#ampm").html(timing);

Add this line to html

<li id="ampm"></li>

Updated code -

$(document).ready(function() {
  // Making 2 variable month and day
  var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

  // make single object
  var newDate = new Date();
  // make current time
  newDate.setDate(newDate.getDate());
  // setting date and time
  $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

  setInterval(function() {
    // Create a newDate() object and extract the seconds of the current time on the visitor's
    var seconds = new Date().getSeconds();
    // Add a leading zero to seconds value
    $("#sec").html((seconds < 10 ? "0" : "") + seconds);
  }, 1000);

  setInterval(function() {
    // Create a newDate() object and extract the minutes of the current time on the visitor's
    var minutes = new Date().getMinutes();
    // Add a leading zero to the minutes value
    $("#min").html((minutes < 10 ? "0" : "") + minutes);
  }, 1000);

  setInterval(function() {
    // Create a newDate() object and extract the hours of the current time on the visitor's
    var hours = new Date().getHours();
    var timing = hours >= 12 ? 'PM' : 'AM';
    hours %= 12;      
    if(hours == 0)
      hours = 12;          
    $("#ampm").html(timing);            
    // Add a leading zero to the hours value
    $("#hours").html((hours < 10 ? "0" : "") + hours);
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clock">
  <div id="Date"></div>

  <ul>
    <li id="hours"></li>
    <li id="point">:</li>
    <li id="min"></li>
    <li id="point">:</li>
    <li id="sec"></li>
    <li id="ampm"></li>
  </ul>
</div>

your welcome @neeraja and if this or any answer has solved your question please consider accepting it by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. — Piyush Modi, Jun 19 '18 at 10:36

Adam Perea · Answer 4 · 2018-06-19T09:47:22.937

-1

You can do that manually.

If ( hours > 12){
    hours = hours % 12;
}
else{
    hours = hours;
}

You can also add a String to go with,

var ampm = am;
If ( hours > 12){
    hours = hours % 12;
    ampm = pm;
}
else{
    hours = hours;
    ampm = am;
}

Or a boolean or whatever.... I hope, it's useful

edited Jun 19 '18 at 09:47

answered Jun 19 '18 at 09:19

Adam Perea

320
2
9

With this method `12pm` becomes `0pm` – Rory McCrossan Jun 19 '18 at 09:31
are you sure my friend ? – Adam Perea Jun 19 '18 at 09:48
Ahahahah, fine then :) – Adam Perea Jun 19 '18 at 09:49
tq @ Rory McCrossan – neeraja Jun 19 '18 at 10:26

how to change 24 hours format to 12 hours?

4 Answers4