How do you display JavaScript datetime in 12 hour AM/PM format?
Asked Answered
S

34

500

How do you display a JavaScript datetime object in the 12 hour format (AM/PM)?

Strother answered 17/1, 2012 at 1:7 Comment(3)
Don't waste your time https://mcmap.net/q/37345/-how-do-you-display-javascript-datetime-in-12-hour-am-pm-format its working..Garget
@Garget WARNING: toLocaleTimeString() may behave differently based on region / location. Measure twice, cut once.Malpractice
@AbandonedCart is that actually a saying?Cavendish
S
801

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

console.log(formatAMPM(new Date));
Strother answered 17/1, 2012 at 1:8 Comment(0)
P
439

If you just want to show the hours then..

var time = new Date();
console.log(
  time.toLocaleString('en-US', { hour: 'numeric', hour12: true })
);  

Output : 7 AM

If you wish to show the minutes as well then...

var time = new Date();
console.log(
  time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })
);

Output : 7:23 AM

Precis answered 24/4, 2016 at 10:41 Comment(9)
What about hour, minutes, and AM/PM?Fret
As of Feb 2018 its working just fine on chrome Neolisk - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…Doth
it should return 07:23, IMOSharl
@HumbleDolt You might be confusing 'numeric' with '2-digit'.Ardehs
@Katie in 2019 tooTrott
Source: caniuse.com/#search=toLocaleString() - "...supported in effectively all browsers (since IE6+, Firefox 2+, Chrome 1+ etc)"Cp
this is the best answer but how do you change the capitalization of AM/PMErwin
Great answer! Here's a link to the MDN docs for information on the options if anyone needs it: Intl.DateTimeFormat()Herbart
@Ardehs hour: '2-digit', minute: '2-digit'Ambulate
K
51

Here's a way using regex:

console.log(new Date('7/10/2013 20:12:34').toLocaleTimeString().replace(/([\d]+:[\d]{2})(:[\d]{2})(.*)/, "$1$3"))
console.log(new Date('7/10/2013 01:12:34').toLocaleTimeString().replace(/([\d]+:[\d]{2})(:[\d]{2})(.*)/, "$1$3"))

This creates 3 matching groups:

  • ([\d]+:[\d]{2}) - Hour:Minute
  • (:[\d]{2}) - Seconds
  • (.*) - the space and period (Period is the official name for AM/PM)

Then it displays the 1st and 3rd groups.

WARNING: toLocaleTimeString() may behave differently based on region / location.

Kilian answered 9/7, 2013 at 0:43 Comment(5)
People don't use Regex enough. This worked for me without adding the jquery/microsoftajax library suggestions above.Pileup
What would be the regex be to have a trailing zero at the beginning of the hour if it was a single digit. Say in your first example of 8:12 PM it would be 08:12 PM?Segmental
@404 it's the same, ([\d]+:[\d]{2}) is the part we are interested in. Use the colon (:) as the separator and we see the first part is [\d]+. The plus means one or more. So it's looking for one or more digit (including zero. If you had to guarantee a zero is there, it would be (0[\d]:[\d]{2}). This now reads, look for 0 plus one other digit, then colon, then the rest.Kilian
console.log(new Date().toLocaleTimeString().replace(/([\d]+:[\d]{2})(:[\d]{2})(.*)/, "$1$3")); To get current timeCorrales
Doesn't work in Australia. new Date('7/10/2013 20:12:34').toLocaleTimeString() gives 20:12:34, and regex just gave 20:12. @abhay-kumar answer time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true }) worked.Alba
T
50

If you don't need to print the am/pm, I found the following nice and concise:

var now = new Date();
var hours = now.getHours() % 12 || 12;  // 12h instead of 24h, with 12 instead of 0. 

This is based off @bbrame's answer.

Translator answered 7/1, 2014 at 5:13 Comment(3)
@koolinc for midnight it shows 12. I'm not sure what else the desired behavior would be.Translator
I stand corrected. In my country the 24-hour clock is used, so I'm not that familiar with the 12-hour clock. Indeed midnight is 12:00am.Continuance
This method is perfect if need only hour in 12 hr formatTagore
L
37

In modern browsers, use Intl.DateTimeFormat and force 12hr format with options:

    let now = new Date();

    new Intl.DateTimeFormat('default',
        {
            hour12: true,
            hour: 'numeric',
            minute: 'numeric'
        }).format(now);

    // 6:30 AM

Using default will honor browser's default locale if you add more options, yet will still output 12hr format.

Longlived answered 18/12, 2019 at 5:26 Comment(2)
to use this, assign the new string to a variable eg: let result = new Intl.DateTi.... alert(result);Palmy
Can also do: const time = new Date().toLocaleString([], { hour: 'numeric', minute: 'numeric' }); //"6:30 AM"Especial
G
34

As far as I know, the best way to achieve that without extensions and complex coding is like this:

     date.toLocaleString([], { hour12: true});

Javascript AM/PM Format

<!DOCTYPE html>
<html>
<body>
    <p>Click the button to display the date and time as a string.</p>

    <button onclick="myFunction()">Try it</button>
    <button onclick="fullDateTime()">Try it2</button>
    <p id="demo"></p>
    <p id="demo2"></p>
    <script>
        function myFunction() {
            var d = new Date();
            var n = d.toLocaleString([], { hour: '2-digit', minute: '2-digit' });
            document.getElementById("demo").innerHTML = n;
        }
        function fullDateTime() {
            var d = new Date();          
            var n = d.toLocaleString([], { hour12: true});
            document.getElementById("demo2").innerHTML = n;
        }
    </script>
</body>
</html>

I found this checking this question out.

How do I use .toLocaleTimeString() without displaying seconds?

Gaddis answered 25/1, 2017 at 13:16 Comment(2)
This is the most simple answer. Vote up because is a javascript native solution. ThanksHarter
This is a nice native solution.Cocytus
S
23

Use Moment.js for this

Use below codes in JavaScript when using moment.js

H, HH       24 hour time
h, or hh    12 hour time (use in conjunction with a or A)

The format() method returns the date in specific format.

moment(new Date()).format("YYYY-MM-DD HH:mm"); // 24H clock
moment(new Date()).format("YYYY-MM-DD hh:mm A"); // 12H clock (AM/PM)
moment(new Date()).format("YYYY-MM-DD hh:mm a"); // 12H clock (am/pm)
Simonne answered 1/2, 2019 at 17:7 Comment(1)
This 12H format saved my day, thanks.Athelstan
A
20

My suggestion is use moment js for date and time operation.

https://momentjs.com/docs/#/displaying/format/

console.log(moment().format('hh:mm a'));
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
Aland answered 15/3, 2017 at 13:5 Comment(0)
B
19

Updated for more compression

const formatAMPM = (date) => {
  let hours = date.getHours();
  let minutes = date.getMinutes();    
  const ampm = hours >= 12 ? 'pm' : 'am';

  hours %= 12;
  hours = hours || 12;    
  minutes = minutes < 10 ? `0${minutes}` : minutes;

  const strTime = `${hours}:${minutes} ${ampm}`;

  return strTime;
};

console.log(formatAMPM(new Date()));
Bohman answered 18/11, 2020 at 15:9 Comment(1)
Its working fine ThanksFredette
L
15

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

Option 1 - Using locales

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

Option 2 - Using options

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

Note: supported on all browsers but safari atm

Lovelovebird answered 24/10, 2015 at 9:13 Comment(1)
W
13

Short RegExp for en-US:

var d = new Date();
d = d.toLocaleTimeString().replace(/:\d+ /, ' '); // current time, e.g. "1:54 PM"
Worst answered 14/8, 2013 at 17:52 Comment(4)
this doesn´t work on latest safari and firefox browsers, time still uses 24 hour formatJuxon
answers get outdated as time goes by. Feel free to edit and update!Worst
This actually will make the string look like 1:54 PM CDT. To remove the CDT alter your regex to the following .replace(/:\d+ |\CDT/g, ' '). Although, CDT is just my timezone. If you have a different timezone I suppose you would need to change to that zone code.Ovotestis
The output of toLocaleTimeString is implementation dependent, so not reliably the same format everywhere.Televise
P
12

Please find the solution below

var d = new Date();
var amOrPm = (d.getHours() < 12) ? "AM" : "PM";
var hour = (d.getHours() < 12) ? d.getHours() : d.getHours() - 12;
return   d.getDate() + ' / ' + d.getMonth() + ' / ' + d.getFullYear() + ' ' + hour + ':' + d.getMinutes() + ' ' + amOrPm;
Pink answered 7/6, 2018 at 12:12 Comment(1)
Should be less than or equal to for hour calculation else noon shows up as 0. So: var hour = (d.getHours() <= 12). Still has issue with midnight so you have to check if zero then set to 12 too.Alee
S
9

It will return the following format like

09:56 AM

appending zero in start for the hours as well if it is less than 10

Here it is using ES6 syntax

const getTimeAMPMFormat = (date) => {
  let hours = date.getHours();
  let minutes = date.getMinutes();
  const ampm = hours >= 12 ? 'PM' : 'AM';
  hours = hours % 12;
  hours = hours ? hours : 12; // the hour '0' should be '12'
  hours = hours < 10 ? '0' + hours : hours;
  // appending zero in the start if hours less than 10
  minutes = minutes < 10 ? '0' + minutes : minutes;
  return hours + ':' + minutes + ' ' + ampm;
};
console.log(getTimeAMPMFormat(new Date)); // 09:59 AM
Sprouse answered 14/8, 2020 at 5:16 Comment(0)
S
6

I fount it's here it working fine.

var date_format = '12'; /* FORMAT CAN BE 12 hour (12) OR 24 hour (24)*/
 
 
var d       = new Date();
var hour    = d.getHours();  /* Returns the hour (from 0-23) */
var minutes     = d.getMinutes();  /* Returns the minutes (from 0-59) */
var result  = hour;
var ext     = '';
 
if(date_format == '12'){
    if(hour > 12){
        ext = 'PM';
        hour = (hour - 12);
        result = hour;

        if(hour < 10){
            result = "0" + hour;
        }else if(hour == 12){
            hour = "00";
            ext = 'AM';
        }
    }
    else if(hour < 12){
        result = ((hour < 10) ? "0" + hour : hour);
        ext = 'AM';
    }else if(hour == 12){
        ext = 'PM';
    }
}
 
if(minutes < 10){
    minutes = "0" + minutes; 
}
 
result = result + ":" + minutes + ' ' + ext; 
 
console.log(result);

and plunker example here

Scrophulariaceous answered 17/8, 2015 at 8:29 Comment(0)
C
6

Hopefully this answer is a little more readable than the other answers (especially for new comers).

Here's the solution I've implemented in some of my sites for informing the last time the site code was modified. It implements AM/PM time through the options parameter of date.toLocaleDateString (see related Mozilla documentation).

// Last time page code was updated/changed
const options = {
    year: "numeric",
    month: "long",
    weekday: "long",
    day: "numeric",
    hour: "numeric",
    minute: "numeric",
    second: "numeric",
    hour12: true // This is the line of code we care about here
    /*
        false: displays 24hs format for time
        true: displays 12, AM and PM format
    */
};

let last = document.lastModified;
let date = new Date(last);
let local = date.toLocaleDateString("en-US", options);
let fullDate = `${local}`;
document.getElementById("updated").textContent = fullDate;

Which output is in the format:

Saturday, May 28, 2022, 8:38:50 PM

This output is then displayed in the following HTML code:

<p>Last update: <span id="updated">_update_date_goes_here</span></p>

NOTE: In this use case, document.lastModified has some weird behaviors depending if it's run locally or on a external server (see this Stack Overflow question). Though it works correctly when I run it in my GitHub page (you should see it in action in the site at the footer).

Comnenus answered 29/5, 2022 at 0:45 Comment(0)
M
5

Check out Datejs. Their built in formatters can do this: http://code.google.com/p/datejs/wiki/APIDocumentation#toString

It's a really handy library, especially if you are planning on doing other things with date objects.

Mythopoeic answered 17/1, 2012 at 1:20 Comment(2)
Answers like "use library X" are not helpful. They can be good as comments though.Televise
@RobG: As you can see it's been quite a while since I wrote this answer. I realize this now.Mythopoeic
V
5
<script>
var todayDate = new Date();
var getTodayDate = todayDate.getDate();
var getTodayMonth =  todayDate.getMonth()+1;
var getTodayFullYear = todayDate.getFullYear();
var getCurrentHours = todayDate.getHours();
var getCurrentMinutes = todayDate.getMinutes();
var getCurrentAmPm = getCurrentHours >= 12 ? 'PM' : 'AM';
getCurrentHours = getCurrentHours % 12;
getCurrentHours = getCurrentHours ? getCurrentHours : 12; 
getCurrentMinutes = getCurrentMinutes < 10 ? '0'+getCurrentMinutes : getCurrentMinutes;
var getCurrentDateTime = getTodayDate + '-' + getTodayMonth + '-' + getTodayFullYear + ' ' + getCurrentHours + ':' + getCurrentMinutes + ' ' + getCurrentAmPm;
alert(getCurrentDateTime);
</script>
Vichyssoise answered 11/5, 2018 at 23:55 Comment(1)
Getting the module of the hour with 12 is excellent! This prevents getting zero when it's 12AM or it's 12PMDearr
T
3

Here is another way that is simple, and very effective:

        var d = new Date();

        var weekday = new Array(7);
        weekday[0] = "Sunday";
        weekday[1] = "Monday";
        weekday[2] = "Tuesday";
        weekday[3] = "Wednesday";
        weekday[4] = "Thursday";
        weekday[5] = "Friday";
        weekday[6] = "Saturday";

        var month = new Array(11);
        month[0] = "January";
        month[1] = "February";
        month[2] = "March";
        month[3] = "April";
        month[4] = "May";
        month[5] = "June";
        month[6] = "July";
        month[7] = "August";
        month[8] = "September";
        month[9] = "October";
        month[10] = "November";
        month[11] = "December";

        var t = d.toLocaleTimeString().replace(/:\d+ /, ' ');

        document.write(weekday[d.getDay()] + ',' + " " + month[d.getMonth()] + " " + d.getDate() + ',' + " " + d.getFullYear() + '<br>' + d.toLocaleTimeString());

    </script></div><!-- #time -->
Typewriting answered 9/12, 2013 at 1:4 Comment(0)
H
3

If you have time as string like so var myTime = "15:30", then you can use the following code to get am pm.

var hour = parseInt(myTime.split(":")[0]) % 12;
var timeInAmPm = (hour == 0 ? "12": hour ) + ":" + myTime.split(":")[1] + " " + (parseInt(parseInt(myTime.split(":")[0]) / 12) < 1 ? "am" : "pm");
Humor answered 17/7, 2022 at 11:32 Comment(2)
just what i need !Respect
@derarsattouf The pervious code had issue with 00:00 and 24:00, i have fixed that. please update your code with the above if you had used thisHumor
F
3

If anyone is looking for a 1-liner:

const formatAMPM = date => `${(date.getHours() % 12) || 12}:${date.getMinutes().toString().padStart(2, '0')} ${date.getHours() < 12 ? 'AM' : 'PM'}`    

OR more readable 3-liner (or if you don't have padStart in your browser):

const formatAMPM = (date) => {
  let minutes = date.getMinutes()
  minutes = minutes < 10 ? '0' + minutes : minutes
  return `${(date.getHours() % 12) || 12}:${minutes} ${date.getHours() < 12 ? 'AM' : 'PM'}`
}
Fariss answered 14/3, 2023 at 17:20 Comment(0)
C
2

function startTime() {
  const today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  var meridian = h >= 12 ? "PM" : "AM";
  h = h % 12;
  h = h ? h : 12;
  m = m < 10 ? "0" + m : m;
  s = s < 10 ? "0" + s : s;
  var strTime = h + ":" + m + ":" + s + " " + meridian;
  document.getElementById('time').innerText = strTime;
  setTimeout(startTime, 1000);
}

startTime();
<h1 id='time'></h1>
Chestnut answered 6/11, 2022 at 14:49 Comment(0)
F
1

you can determine am or pm with this simple code

var today=new Date();
var noon=new Date(today.getFullYear(),today.getMonth(),today.getDate(),12,0,0);
var ampm = (today.getTime()<noon.getTime())?'am':'pm';
Funerary answered 15/10, 2016 at 9:30 Comment(0)
V
1

try this

      var date = new Date();
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      var ampm = hours >= 12 ? "pm" : "am";
Varicotomy answered 10/9, 2019 at 17:43 Comment(3)
This is incorrect. The hours could be greater than 12.Patterman
When 12.00 pm the var ampm will be "pm". So 12.00 PM to 11.00 PM hours will be 12 to 23 that store "pm" value and for others, var ampm will store "am" value. Hope you understand.Varicotomy
Hi Juyel ! Indeed when the hours is greater than 12, the value would be PM. But the question is "How do you display JavaScript datetime in 12 hour AM/PM format?" - you need to help OP convert the entire time to the AM/PM format. For example, 14:30 would be 2:30 PM.Patterman
S
1

function formatTime( d = new Date(), ampm = true ) 
{
    var hour = d.getHours();
    
    if ( ampm )
    {
        var a = ( hour >= 12 ) ? 'PM' : 'AM';
        hour = hour % 12;
        hour = hour ? hour : 12; // the hour '0' should be '12'  
    }

    var hour    = checkDigit(hour);  
    var minute  = checkDigit(d.getMinutes());
    var second  = checkDigit(d.getSeconds());
  
    // https://mcmap.net/q/37346/-how-can-i-do-string-interpolation-in-javascript
    return ( ampm ) ? `${hour}:${minute}:${second} ${a}` : `${hour}:${minute}:${second}`;
}

function checkDigit(t)
{
  return ( t < 10 ) ? `0${t}` : t;
}

document.querySelector("#time1").innerHTML = formatTime();
document.querySelector("#time2").innerHTML = formatTime( new Date(), false );
<p>ampm true:   <span id="time1"></span> (default)</p>
<p>ampm false:  <span id="time2"></span></p>
Stormy answered 14/10, 2020 at 5:26 Comment(0)
S
1
   const formatAMPM = (date) => {
    try {
      let time = date.split(" ");
      let hours = time[4].split(":")[0];
      let minutes = time[4].split(":")[1];
      hours = hours || 12;
      const ampm = hours >= 12 ? " PM" : " AM";
      minutes = minutes < 10 ? `${minutes}` : minutes;
      hours %= 12;
      const strTime = `${hours}:${minutes} ${ampm}`;
      return strTime;
    } catch (e) {
      return "";
    }
  };

const startTime = "2021-12-07T17:00:00.073Z"
formatAMPM(new Date(startTime).toUTCString())
Snowfield answered 7/12, 2021 at 7:38 Comment(0)
G
0

var d = new Date();
var hours = d.getHours() % 12;
  hours = hours ? hours : 12;
    var test = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][(d.getMonth() + 1)] + " " + 
    ("00" + d.getDate()).slice(-2) + " " + 
    d.getFullYear() + " " + 
    ("00" + hours).slice(-2) + ":" + 
    ("00" + d.getMinutes()).slice(-2) + ":" + 
    ("00" + d.getSeconds()).slice(-2) + ' ' + (d.getHours() >= 12 ? 'PM' : 'AM'); 
    
document.getElementById("demo").innerHTML = test;
<p id="demo" ></p>
Geminius answered 13/10, 2017 at 7:50 Comment(0)
E
0
<h1 id="clock_display" class="text-center" style="font-size:40px; color:#ffffff">[CLOCK TIME DISPLAYS HERE]</h1>



<script>
            var AM_or_PM = "AM";

            function startTime(){

                var today = new Date();
                var h = today.getHours();
                var m = today.getMinutes();
                var s = today.getSeconds();

                h = twelve_hour_time(h);
                m = checkTime(m);
                s = checkTime(s);



                document.getElementById('clock_display').innerHTML =
                    h + ":" + m + ":" + s +" "+AM_or_PM;
                var t = setTimeout(startTime, 1000);

            }

            function checkTime(i){

                if(i < 10){
                    i = "0" + i;// add zero in front of numbers < 10
                }
                return i;
            }

            // CONVERT TO 12 HOUR TIME. SET AM OR PM
            function twelve_hour_time(h){

                if(h > 12){
                    h = h - 12;
                    AM_or_PM = " PM";
                }
                return h;

            }

            startTime();

        </script>
Ergener answered 1/2, 2018 at 22:11 Comment(0)
A
0

Here my solution

function getTime() {
var systemDate = new Date();
var hours = systemDate.getHours();
var minutes = systemDate.getMinutes();
var strampm;
if (hours >= 12) {
    strampm= "PM";
} else {
    strampm= "AM";
}
hours = hours % 12;
if (hours == 0) {
    hours = 12;
}
_hours = checkTimeAddZero(hours);
_minutes = checkTimeAddZero(minutes);
console.log(_hours + ":" + _minutes + " " + strampm);
}

function checkTimeAddZero(i) {
if (i < 10) {
    i = "0" + i
}
return i;
}
Alessandraalessandria answered 9/6, 2019 at 17:18 Comment(0)
N
0
function getDateTime() {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDate();

  if (month.toString().length == 1) {
    month = '0' + month;
  }
  if (day.toString().length == 1) {
    day = '0' + day;
  }

  var hours = now.getHours();
  var minutes = now.getMinutes();
  var ampm = hours >= 12 ? 'pm' : 'am';
  hours = hours % 12;
  hours = hours ? hours : 12;
  minutes = minutes < 10 ? '0' + minutes : minutes;
  var timewithampm = hours + ':' + minutes + ' ' + ampm;

  var dateTime = monthNames[parseInt(month) - 1] + ' ' + day + ' ' + year + ' ' + timewithampm;
  return dateTime;
}
Noticeable answered 1/10, 2019 at 9:46 Comment(0)
M
0

This is the easiest Way you can Achieve this using ternary operator or you can also use if else instead !

const d = new Date();
let hrs = d.getHours();
let m = d.getMinutes();
// Condition to add zero before minute
let min = m < 10 ? `0${m}` : m;
const currTime = hrs >= 12 ? `${hrs - 12}:${min} pm` : `${hrs}:${min} am`;
console.log(currTime);
Macedonia answered 24/5, 2022 at 9:47 Comment(1)
this gives 12pm as 0:00pm.Coppola
M
0

{new Date(progress.position * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }).substring(0,5)}

Moraine answered 5/7, 2023 at 8:56 Comment(0)
V
0

HTML

<header class="is-sticky">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="customNav">
                    <ul class="navMenuWeb">
                        <li><Link to="#">At a Glance</Link></li>
                        <li><Link to="#">Deposit</Link></li>
                        <li><Link to="#">Loan</Link></li>
                        <li><Link to="#">Products & Offers</Link></li>
                        <div class="clearfix"></div>
                    </ul>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
</header>

CSS

.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-animation: .95s ease-in-out 0s normal none 1 running fadeInDown;
  animation: .95s ease-in-out 0s normal none 1 running fadeInDown;
  z-index: 999;
  -webkit-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
}
Vichyssoise answered 26/3 at 11:11 Comment(0)
S
-1

Or just simply do the following code:

    <script>
        time = function() {
            var today = new Date();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();
            m = checkTime(m);
            s = checkTime(s);
            document.getElementById('txt_clock').innerHTML = h + ":" + m + ":" + s;     
            var t = setTimeout(function(){time()}, 0);
        }

        time2 = function() {
            var today = new Date();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();
            m = checkTime(m);
            s = checkTime(s);
            if (h>12) {
                document.getElementById('txt_clock_stan').innerHTML = h-12 + ":" + m + ":" + s;
            }               
            var t = setTimeout(function(){time2()}, 0);
        }

        time3 = function() {
            var today = new Date();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();
            if (h>12) {
                document.getElementById('hour_line').style.width = h-12 + 'em'; 
            }
            document.getElementById('minute_line').style.width = m + 'em';  
            document.getElementById('second_line').style.width = s + 'em';  
            var t = setTimeout(function(){time3()}, 0);
        }

        checkTime = function(i) {
            if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
            return i;
        }           
    </script>

Spratt answered 3/10, 2014 at 12:20 Comment(0)
S
-1

A short and sweet implementation:

// returns date object in 12hr (AM/PM) format
var formatAMPM = function formatAMPM(d) {
    var h = d.getHours();
    return (h % 12 || 12)
        + ':' + d.getMinutes().toString().padStart(2, '0')
        + ' ' + (h < 12 ? 'A' : 'P') + 'M';
};
Sixpack answered 21/9, 2017 at 17:2 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.