Wie zeigt man JavaScript datetime im 12-Stunden-AM / PM-Format an?

306

Wie zeigt man ein JavaScript-Datum / Uhrzeit-Objekt im 12-Stunden-Format (AM / PM) an?

javascript datetime date time format bbrame
quelle
3
Verschwenden Sie nicht Ihre Zeit stackoverflow.com/a/17538193/3541385 es funktioniert ..
Ritesh
2
@Ritesh Zweimal WARNING: toLocaleTimeString() may behave differently based on region / location.messen, einmal schneiden.
Verlassener Wagen
@AbandonedCart ist das eigentlich ein Sprichwort?
Gilbert-v
1
@ gilbert-v One should double-check one's measurements for accuracy before cutting a piece of wood; otherwise it may be necessary to cut again, wasting time and material.Diese Frage wird wahrscheinlich besser bei Google gestellt.
Verlassener Wagen
Ich werde mich nie daran gewöhnen, wie verdammt kompliziert es ist, mit einfachen Daten in JavaScript zu arbeiten. 😠
ashleedawg

Antworten:

545 

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));
Erweitern Sie das Snippet

bbrame
quelle
3
Außerdem haben Sie die Variable "Stunden" zweimal deklariert, aber "strTime" zu einer zufälligen globalen Variable gemacht. Es ist nicht sehr elegant, aber dies scheint die richtige Technik mit nativen Methoden zu sein.
Jon z
Hallo, kannst du mir erklären, was du damit machst: Minuten = Minuten <10? '0' + Minuten: Minuten;
Balz
2
@Balz Wenn die Minuten kleiner als 10 sind (z. B. 16:04), fügt diese Anweisung die Zeichenfolge "0" hinzu, sodass die formatierte Ausgabe "4:04 PM" anstelle von "4: 4 PM" lautet. Beachten Sie, dass sich dabei die Minuten von einer Zahl in eine Zeichenfolge ändern.
Caleb Bell
7
Ich bevorzuge dies minutes = ('0'+minutes).slice(-2);eher als minutes = minutes < 10 ? '0'+minutes : minutes;
Vignesh
1
Die @ Vignesh-Lösung für die Minuten ist besser, denn wenn Sie die vorgeschlagene Lösung ausführen, wird 21:00:00 zu 9: 000. Vignesh's gibt Ihnen die richtigen Minuten als: 00. Wenn Sie die obige Lösung verwenden würden, müssten Sie auch die 00 berücksichtigen. (Minuten> 0 && Minuten <10)? '0' + Minuten: Minuten;
Robbie Smith
201

Wenn Sie nur die Stunden anzeigen möchten, dann ..

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

Ausgabe: 7 Uhr

Wenn Sie auch die Protokolle anzeigen möchten, dann ...

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

Ausgabe: 7:23 Uhr

Abhay Kumar
quelle
Was ist mit Stunde, Minuten und AM / PM?
reutsey
3
toLocaleStringwird nur auf IE11 + unterstützt.
Neolisk
Ab Februar 2018 funktioniert es einwandfrei auf Chrome Neolisk - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
lfender6445
es sollte 07:23, IMO
Humble Dolt
@HumbleDolt Man könnte verwirrend 'numeric'mit '2-digit'.
Hon2a
55

Sie können auch die Verwendung von date.js in Betracht ziehen :

<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>
Erweitern Sie das Snippet

Mike Christensen
quelle
45

Hier ist eine Möglichkeit, Regex zu verwenden:

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"))
Erweitern Sie das Snippet

Dadurch werden 3 übereinstimmende Gruppen erstellt:

  • ([\d]+:[\d]{2}) - Stunde: Minute
  • (:[\d]{2}) - Sekunden
  • (.*) - Raum und Zeitraum (Zeitraum ist der offizielle Name für AM / PM)

Dann werden die 1. und 3. Gruppe angezeigt.

WARNUNG: toLocaleTimeString () kann sich je nach Region / Standort unterschiedlich verhalten.

Steve Tauber
quelle
3
Die Leute benutzen Regex nicht genug. Dies funktionierte für mich, ohne die obigen Vorschläge für die jquery / microsoftajax-Bibliothek hinzuzufügen.
Uadrive
Was wäre der reguläre Ausdruck, wenn zu Beginn der Stunde eine nachgestellte Null wäre, wenn es sich um eine einzelne Ziffer handeln würde? Sagen Sie in Ihrem ersten Beispiel von 20.12 Uhr, es wäre 20.12 Uhr?
RADXack
1
@ 404 es ist das gleiche, ([\d]+:[\d]{2})ist der Teil, an dem wir interessiert sind. Verwenden Sie den Doppelpunkt (:) als Trennzeichen und wir sehen, dass der erste Teil ist [\d]+. Das Plus bedeutet eins oder mehrere. Es wird also nach einer oder mehreren Ziffern gesucht (einschließlich Null. Wenn Sie garantieren müssten, dass eine Null vorhanden ist, wäre dies der Fall (0[\d]:[\d]{2}). Dies lautet nun: Suchen Sie nach 0 plus einer weiteren Ziffer, dann nach Doppelpunkt und dann nach dem Rest.
Steve Tauber
1
console.log (new Date (). toLocaleTimeString (). replace (/ ([\ d] +: [\ d] {2}) (: [\ d] {2}) (. *) /, "$ 1 $ 3 ")); Um die aktuelle Zeit zu erhalten
Mujaffars
35

Wenn Sie die Uhr nicht drucken müssen, fand ich Folgendes schön und prägnant: 

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

Dies basiert auf der Antwort von @ bbrame.

Rattray
quelle
3
@koolinc für Mitternacht zeigt es 12. Ich bin nicht sicher, was das gewünschte Verhalten sonst wäre.
Rattray
Ich stehe korrigiert. In meinem Land wird die 24-Stunden-Uhr verwendet, daher bin ich mit der 12-Stunden-Uhr nicht so vertraut. In der Tat ist Mitternacht 12:00 Uhr.
KooiInc
16

Soweit ich weiß, ist der beste Weg, dies ohne Erweiterungen und komplexe Codierung zu erreichen, folgender:

     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>
Erweitern Sie das Snippet

Ich fand dies beim Auschecken dieser Frage.

Wie verwende ich .toLocaleTimeString (), ohne Sekunden anzuzeigen?

Edwin Mendez
quelle
12

Die Lösung finden Sie unten

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;
Krishnamoorthy Acharya
quelle
Sollte für die Stundenberechnung kleiner oder gleich sein, sonst wird der Mittag als 0 angezeigt. Also: var hour = (d.getHours () <= 12). Es gibt immer noch ein Problem mit Mitternacht, daher müssen Sie überprüfen, ob Null ist, und dann auch auf 12 setzen.
Ryan
11

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

Option 1 - Verwenden von Gebietsschemas

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

Option 2 - Verwenden von Optionen

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

Hinweis: Wird von allen Browsern außer Safari atm unterstützt

LiranBo
quelle
1
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
mimo
9

Kurzer RegExp für en-US:

var d = new Date();
d = d.toLocaleTimeString().replace(/:\d+ /, ' '); // current time, e.g. "1:54 PM"
Geo
quelle
Dies funktioniert nicht mit den neuesten Safari- und Firefox-Browsern. Die Zeit verwendet immer noch das 24-Stunden-Format
am
1
Antworten werden mit der Zeit veraltet. Fühlen Sie sich frei zu bearbeiten und zu aktualisieren!
Geo
Dadurch sieht die Zeichenfolge tatsächlich so aus 1:54 PM CDT. Um das zu entfernen, CDTändern Sie Ihren regulären Ausdruck wie folgt .replace(/:\d+ |\CDT/g, ' '). Obwohl CDT nur meine Zeitzone ist. Wenn Sie eine andere Zeitzone haben, müssten Sie wahrscheinlich zu diesem Zonencode wechseln.
Sadmicrowave
Die Ausgabe von toLocaleTimeString ist implementierungsabhängig und daher nicht überall zuverlässig dasselbe Format.
RobG
9

Verwenden und erzwingen Sie in modernen Browsern dasIntl.DateTimeFormat 12-Stunden-Format mit folgenden Optionen:

    let now = new Date();

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

    // 6:30 AM

Die Verwendung defaultberücksichtigt das Standardgebietsschema des Browsers, wenn Sie weitere Optionen hinzufügen, gibt jedoch weiterhin das 12-Stunden-Format aus.

mtm
quelle
Um dies zu verwenden, weisen Sie die neue Zeichenfolge einer Variablen zu, z. B.: let result = new Intl.DateTi .... alert (Ergebnis);
Scot Nery
7

Verwenden Sie Moment.js für diese

Verwenden Sie die folgenden Codes in JavaScript, wenn Sie moment.js verwenden

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

Die format()Methode gibt das Datum in einem bestimmten Format zurück.

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)
Ankur Mahajan
quelle
5

Schauen Sie sich Datejs an . Die integrierten Formatierer können dies tun: http://code.google.com/p/datejs/wiki/APIDocumentation#toString

Es ist eine sehr praktische Bibliothek, insbesondere wenn Sie andere Dinge mit Datumsobjekten tun möchten.

Chris Laplante
quelle
Antworten wie " Bibliothek X verwenden " sind nicht hilfreich. Sie können jedoch als Kommentare gut sein.
RobG
1
@RobG: Wie Sie sehen, ist es schon eine ganze Weile her, seit ich diese Antwort geschrieben habe. Das merke ich jetzt.
Chris Laplante
4

Ich glaube, es ist hier, es funktioniert gut.

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

und Plunker Beispiel hier

vamsikrishnamannem
quelle
4 
<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>
Pankaj Upadhyay
quelle
2
Das Modul der Stunde mit 12 zu bekommen ist ausgezeichnet! Dies verhindert, dass es Null wird, wenn es 12 Uhr oder 12 Uhr ist
Lynnell Emmanuel Neri
3

Hier ist ein anderer Weg, der einfach und sehr effektiv ist:

        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 -->
user3059774
quelle
1

Mit diesem einfachen Code können Sie morgens oder abends bestimmen

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';
Sarkiroka
quelle
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>
Erweitern Sie das Snippet

Sujith S.
quelle
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>
Stnfordly
quelle
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;
}
Vik2696
quelle
0

Hier meine Lösung

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;
}
Prathamesh Mehr
quelle
-1

Oder machen Sie einfach den folgenden 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>

Zyan Jacob
quelle
-1

Eine kurze und süße Umsetzung:

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

Versuche dies

      var date = new Date();
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      var ampm = hours >= 12 ? "pm" : "am";
Md Juyel Rana
quelle
Das ist falsch. Die Stunden könnten größer als 12 sein.
Utsav T
Um 12.00 Uhr ist die var ampm "pm". Die Stunden von 12.00 bis 23.00 Uhr sind also 12 bis 23 Uhr, in denen der Wert "pm" gespeichert wird, und für andere speichert var ampm den Wert "am". Ich hoffe du verstehst.
Md Juyel Rana
Hallo Juyel! In der Tat wäre der Wert PM, wenn die Stunden größer als 12 sind. Die Frage lautet jedoch: "Wie wird die JavaScript-Datumszeit im 12-Stunden-AM / PM-Format angezeigt?" - Sie müssen OP dabei helfen, die gesamte Zeit in das AM / PM-Format zu konvertieren. Zum Beispiel wäre 14:30 Uhr 14:30 Uhr.
Utsav T