Jak wyświetlać datetime JavaScript w 12-godzinnym formacie AM/PM?

333

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; 
}

Źródło

2012-01-17 01:08:28 bbrame

+2

Również zadeklarowałeś zmienną "godziny" dwa razy, ale zrobiłeś "strTime" przypadkowym globalnym. To nie jest zbyt eleganckie, ale wydaje się, że jest to właściwa technika wykorzystująca natywne metody. –

+0

Witam, możesz mi wytłumaczyć, co robisz z tym: minuty = minuty <10? "0" + minuty: minuty; – Balz

+2

@ Baalz Jeśli minuty są mniejsze niż 10 (na przykład 16:04), wówczas ta instrukcja dodaje ciąg "0", aby sformatowane wyjście miało wartość "4:04 PM" zamiast "4: 4 PM". Zauważ, że w procesie minuty zmieniają się z liczby na ciąg. –

4

Zapoznaj się z Datejs. Ich wbudowane formatery mogą to zrobić: http://code.google.com/p/datejs/wiki/APIDocumentation#toString

To naprawdę przydatna biblioteka, szczególnie jeśli planujesz robić inne rzeczy z obiektami z datami.

Źródło

2012-01-17 01:20:02

+0

Odpowiedzi takie jak "* używaj biblioteki X *" nie są pomocne. Mogą być dobre jako komentarze. – RobG

+0

@RobG: Jak widzisz, minęło sporo czasu, odkąd napisałem tę odpowiedź. Zdaję sobie z tego teraz. –

43

Można również rozważyć użycie czegoś podobnego date.js:

<html> 
 
<script type="text/javascript" src="http://www.datejs.com/build/date.js"></script> 
 

 
<script> 
 
    (function() 
 
    { 
 
     document.write(new Date().toString("hh:mm tt")); 
 
    })(); 
 
</script> 
 
</html>

Źródło

2012-01-17 01:21:21

25

oto sposób za pomocą 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"))

Stwarza 3 grupy Dopasowanie:

([\d]+:[\d]{2}) - godzina: minuta
(:[\d]{2}) - Sekundy
(.*) - przestrzeń i period (okres jest oficjalną nazwą dla AM/PM)

Następnie wyświetla 1 i 3 grupy.

OSTRZEŻENIE: toLocaleTimeString() może zachowywać się inaczej w zależności od regionu/lokalizacji.

Źródło

2013-07-09 00:43:24

+2

Ludzie nie używają wystarczająco Regexa. To działało dla mnie bez dodawania sugestii biblioteki jquery/microsoftajax powyżej. – uadrive

+0

Jaki byłby regex, aby mieć końcowe zero na początku godziny, jeśli była to jedna cyfra. Powiedzcie w swoim pierwszym przykładzie o 20:12, że będzie 08:12? – 404

+1

@ 404 to samo, '([\ d] +: [\ d] {2})' jest częścią, którą jesteśmy zainteresowani. Użyj dwukropka (:) jako separatora i widzimy pierwszą część jest '[ \ d] + '. Plus oznacza jedno lub więcej. Tak więc szuka jednej lub więcej cyfr (w tym zero. Jeśli musiałbyś zagwarantować zero, to byłoby to '(0 [\ d]: [\ d] {2})." To teraz czyta, poszukaj 0 plus jedna inna cyfra, następnie dwukropek, a następnie reszta: –

7

Krótki RegExp dla en-US:

var d = new Date(); 
d = d.toLocaleTimeString().replace(/:\d+ /, ' '); // current time, e.g. "1:54 PM"

Źródło

2013-08-14 17:52:36 Geo

+0

, to nie działa na najnowszych przeglądarkach Safari i Firefox, czas nadal używa formatu 24 godzin – euther

+0

odpowiedzi stają się nieaktualne w miarę upływu czasu. edytuj i aktualizuj! – Geo

+0

To sprawi, że napis będzie wyglądał jak "1:54 PM CDT". Aby usunąć 'CDT' zmień swoje wyrażenie do następującego' .replace (/: \ d + | \ CDT/g, ' ") Chociaż CDT jest tylko moją strefą czasową.Jeśli masz inną strefę czasową, przypuszczam, że musiałbyś zmienić kod strefy. – sadmicrowave

2

Oto kolejny sposób, który jest prosty i bardzo skuteczny:

 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 -->

Źródło

2013-12-09 01:04:04 user3059774

28

Jeśli nie trzeba wydrukować am/pm, znalazłem następujące ładne i zwięzłe:

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

Jest to oparte na odpowiedzi @ bbrame.

Źródło

2014-01-07 05:13:44 rattray

+0

nie będzie działać na północy Przypuszczam, że – KooiInc

+2

@koolinc na północy pokazuje 12. Nie jestem pewien, jakie jeszcze pożądane byłoby zachowanie. – rattray

+0

Stoję poprawione. W moim kraju używany jest 24-godzinny zegar, więc nie jestem zaznajomiony z 12-godzinnym zegarem. Rzeczywiście północ o północy. – KooiInc

-1

Albo po prostu zrobić poniższy kod:

<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>

Źródło

2014-10-03 12:20:48

2

I czcionka to here to działa dobrze.

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); 

     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);

i przykładem plunker here

Źródło

2015-08-17 08:29:47 vamsikrishnamannem

9

użycie dateObj.toLocaleString([locales[, options]])

Opcja 1 - Korzystanie locales

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

Opcja 2 - Użycie opcji

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

Uwaga: obsługiwany we wszystkich przeglądarkach, ale safari atm

Źródło

2015-10-24 09:13:56 LiranBo

+1

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString – mimo

55

Jeśli chcesz tylko pokazać godziny potem ..

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

wyjściowa: 7 AM

Jeśli chcesz również pokazać minuty ...

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

wyjściowa: 07:23

Źródło

2016-04-24 10:41:17

+0

A co z godziną, minutami i godzinami AM/PM? – rfodge

+3

'ToLocaleString' jest obsługiwane tylko w IE11 +. – Neolisk

+0

Od lutego 2018 działa dobrze na chrome Neolisku - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString#Browser_compatibility – lfender6445

1

można określić AM lub PM z tego prostego kodu

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';

Źródło

2016-10-15 09:30:58 sarkiroka

7

O ile mi wiadomo, najlepszym sposobem osiągnąć bez rozszerzeń i skomplikowane kodowanie jest tak:

 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>

znalazłem to sprawdzenie na to pytanie.

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

Źródło

2017-01-25 13:16:08

8

Moja sugestia jest użycie chwila js daty i czasu pracy.

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>

Źródło

2017-03-15 13:05:03

-2

Krótkie i słodkie realizacja:

// 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'; 
};

Źródło

2017-09-21 17:02:41 johnchinjew

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>

Źródło

2017-10-13 07:50:06 sujithklr93

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>

Źródło

2018-02-01 22:11:34 Stnfordly

Jak wyświetlać datetime JavaScript w 12-godzinnym formacie AM/PM?

Odpowiedz

Powiązane problemy