171
Jak wyświetlać obiekt datetime JavaScript w formacie 12-godzinnym (AM/PM)?Jak wyświetlać datetime JavaScript w 12-godzinnym formacie AM/PM?
A
Odpowiedz
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;
}
+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.
+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>
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.
+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"
+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 -->
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.
+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>
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
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
+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
+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';
7
O ile mi wiadomo, najlepszym sposobem osiągnąć bez rozszerzeń i skomplikowane kodowanie jest tak:
date.toLocaleString([], { hour12: true});
<!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?
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>
-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';
};
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>
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>
Nie trać czasu http://stackoverflow.com/a/17538193/3541385 jego działanie. – Ritesh