Aktuelle Zeitformatierung mit Javascript


101

Ich möchte die aktuelle Zeit in einem bestimmten Format mit Javascript abrufen.

Mit der unten stehenden Funktion und dem Aufruf erhalte ich am Freitag, den 01. Februar 2013 um 13:56:40 Uhr GMT + 1300 (neuseeländische Sommerzeit), aber ich möchte sie wie Freitag, 14:00 Uhr, den 1. Februar 2013 formatieren

var d = new Date();
var x = document.getElementById("time");
x.innerHTML = d;

Natürlich hat der obige Code keine Formatierungslogik, aber ich habe noch keine "funktionierenden" Formatierer gefunden.


Für eine ähnliche Frage für Node.js siehe stackoverflow.com/questions/10645994/…
Ohad Schneider

Antworten:


159

Ein JavaScript-Datum verfügt über mehrere Methoden, mit denen Sie seine Teile extrahieren können:

getFullYear()- Gibt das 4-stellige Jahr zurück.
getMonth()- Gibt eine auf Null basierende Ganzzahl (0-11) zurück, die den Monat des Jahres darstellt.
getDate()- Gibt den Tag des Monats zurück (1-31).
getDay()- Gibt den Wochentag zurück (0-6). 0 ist Sonntag, 6 ist Samstag.
getHours()- Gibt die Stunde des Tages zurück (0-23).
getMinutes()- Gibt die Minute zurück (0-59).
getSeconds()- Gibt die Sekunde zurück (0-59).
getMilliseconds()- Gibt die Millisekunden (0-999) zurück.
getTimezoneOffset()- Gibt die Anzahl der Minuten zwischen der Ortszeit des Geräts und UTC zurück.

Es gibt keine integrierten Methoden, mit denen Sie lokalisierte Zeichenfolgen wie "Freitag", "Februar" oder "PM" abrufen können. Sie müssen das selbst codieren. Um die gewünschte Zeichenfolge zu erhalten, müssen Sie mindestens Zeichenfolgendarstellungen von Tagen und Monaten speichern:

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

Stellen Sie es dann mit den oben beschriebenen Methoden zusammen:

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var d = new Date();
var day = days[d.getDay()];
var hr = d.getHours();
var min = d.getMinutes();
if (min < 10) {
    min = "0" + min;
}
var ampm = "am";
if( hr > 12 ) {
    hr -= 12;
    ampm = "pm";
}
var date = d.getDate();
var month = months[d.getMonth()];
var year = d.getFullYear();
var x = document.getElementById("time");
x.innerHTML = day + " " + hr + ":" + min + ampm + " " + date + " " + month + " " + year;
<span id="time"></span>

Ich habe eine Datumsformatfunktion, die ich gerne in meine Standardbibliothek aufnehmen möchte. Es wird ein Format-String-Parameter verwendet, der die gewünschte Ausgabe definiert. Die Formatzeichenfolgen basieren lose auf benutzerdefinierten .Net-Formatzeichenfolgen für Datum und Uhrzeit . Für das von Ihnen angegebene Format würde die folgende Formatzeichenfolge funktionieren : "dddd h:mmtt d MMM yyyy".

var d = new Date();
var x = document.getElementById("time");
x.innerHTML = formatDate(d, "dddd h:mmtt d MMM yyyy");

Demo: jsfiddle.net/BNkkB/1

Hier ist meine vollständige Datumsformatierungsfunktion:

function formatDate(date, format, utc) {
    var MMMM = ["\x00", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var MMM = ["\x01", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    var dddd = ["\x02", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var ddd = ["\x03", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

    function ii(i, len) {
        var s = i + "";
        len = len || 2;
        while (s.length < len) s = "0" + s;
        return s;
    }

    var y = utc ? date.getUTCFullYear() : date.getFullYear();
    format = format.replace(/(^|[^\\])yyyy+/g, "$1" + y);
    format = format.replace(/(^|[^\\])yy/g, "$1" + y.toString().substr(2, 2));
    format = format.replace(/(^|[^\\])y/g, "$1" + y);

    var M = (utc ? date.getUTCMonth() : date.getMonth()) + 1;
    format = format.replace(/(^|[^\\])MMMM+/g, "$1" + MMMM[0]);
    format = format.replace(/(^|[^\\])MMM/g, "$1" + MMM[0]);
    format = format.replace(/(^|[^\\])MM/g, "$1" + ii(M));
    format = format.replace(/(^|[^\\])M/g, "$1" + M);

    var d = utc ? date.getUTCDate() : date.getDate();
    format = format.replace(/(^|[^\\])dddd+/g, "$1" + dddd[0]);
    format = format.replace(/(^|[^\\])ddd/g, "$1" + ddd[0]);
    format = format.replace(/(^|[^\\])dd/g, "$1" + ii(d));
    format = format.replace(/(^|[^\\])d/g, "$1" + d);

    var H = utc ? date.getUTCHours() : date.getHours();
    format = format.replace(/(^|[^\\])HH+/g, "$1" + ii(H));
    format = format.replace(/(^|[^\\])H/g, "$1" + H);

    var h = H > 12 ? H - 12 : H == 0 ? 12 : H;
    format = format.replace(/(^|[^\\])hh+/g, "$1" + ii(h));
    format = format.replace(/(^|[^\\])h/g, "$1" + h);

    var m = utc ? date.getUTCMinutes() : date.getMinutes();
    format = format.replace(/(^|[^\\])mm+/g, "$1" + ii(m));
    format = format.replace(/(^|[^\\])m/g, "$1" + m);

    var s = utc ? date.getUTCSeconds() : date.getSeconds();
    format = format.replace(/(^|[^\\])ss+/g, "$1" + ii(s));
    format = format.replace(/(^|[^\\])s/g, "$1" + s);

    var f = utc ? date.getUTCMilliseconds() : date.getMilliseconds();
    format = format.replace(/(^|[^\\])fff+/g, "$1" + ii(f, 3));
    f = Math.round(f / 10);
    format = format.replace(/(^|[^\\])ff/g, "$1" + ii(f));
    f = Math.round(f / 10);
    format = format.replace(/(^|[^\\])f/g, "$1" + f);

    var T = H < 12 ? "AM" : "PM";
    format = format.replace(/(^|[^\\])TT+/g, "$1" + T);
    format = format.replace(/(^|[^\\])T/g, "$1" + T.charAt(0));

    var t = T.toLowerCase();
    format = format.replace(/(^|[^\\])tt+/g, "$1" + t);
    format = format.replace(/(^|[^\\])t/g, "$1" + t.charAt(0));

    var tz = -date.getTimezoneOffset();
    var K = utc || !tz ? "Z" : tz > 0 ? "+" : "-";
    if (!utc) {
        tz = Math.abs(tz);
        var tzHrs = Math.floor(tz / 60);
        var tzMin = tz % 60;
        K += ii(tzHrs) + ":" + ii(tzMin);
    }
    format = format.replace(/(^|[^\\])K/g, "$1" + K);

    var day = (utc ? date.getUTCDay() : date.getDay()) + 1;
    format = format.replace(new RegExp(dddd[0], "g"), dddd[day]);
    format = format.replace(new RegExp(ddd[0], "g"), ddd[day]);

    format = format.replace(new RegExp(MMMM[0], "g"), MMMM[M]);
    format = format.replace(new RegExp(MMM[0], "g"), MMM[M]);

    format = format.replace(/\\(.)/g, "$1");

    return format;
};

Vielen Dank. Obwohl mein endgültiger Code ein wenig optimiert werden musste, haben Ihre Erkenntnisse geholfen.
Seong Lee

Wie formatiere ich date = "2016/03/01 11:00" bis date = "Sat Mar 01 2016 11:00:00 GMT + 0530 (IST)"
Vishal Singh

Wie wird MMMM[0]der korrekte Monatsname anstelle des nicht druckbaren Zeichens bei Index 0 zurückgegeben? Sollte es nicht sein MMMM[M]? Bin ich nur dumm (Nevermind. Es setzt es auf das nicht druckbare Zeichen, das es später ersetzt, um Konflikte zu vermeiden.)
Danegraphics

189

Vielleicht möchten Sie es versuchen

var d = new Date();
d.toLocaleString();       // -> "2/1/2013 7:37:08 AM"
d.toLocaleDateString();   // -> "2/1/2013"
d.toLocaleTimeString();  // -> "7:38:05 AM"

Dokumentation


1
Warum funktioniert Ihre Methode bei mir nicht? d.toLocaleTimeString()und d.toLocaleTimeString()arbeiten nicht.
Afzalex

@afzalex du meinst du bekommst keine Rendite?
Ye Lin Aung

Ja. Ich habe keine Methode gefunden toLocaleTimeString()undtoLocaleTimeString()
afzalex

afzalex versuche dies: new Date (). toLocaleString ();
blueberry0xff

console.log (neues Datum (). toLocaleString ()); // 2015.09.27, 02.52.18
blueberry0xff

37

Update 2017 : Verwenden Sie toLocaleDateString und toLocaleTimeString , um Datum und Uhrzeit zu formatieren. Der erste Parameter, der an diese Methoden übergeben wird, ist ein Gebietsschemawert, z. B. en-us . Der zweite Parameter, sofern vorhanden, gibt Formatierungsoptionen an, z. B. die Langform für den Wochentag.

let date = new Date();  
let options = {  
    weekday: "long", year: "numeric", month: "short",  
    day: "numeric", hour: "2-digit", minute: "2-digit"  
};  

console.log(date.toLocaleTimeString("en-us", options)); 

Ausgabe: Mittwoch, 25. Oktober 2017, 20:19 Uhr

Weitere Informationen finden Sie unter dem folgenden Link.

Datums- und Zeitzeichenfolgen (JavaScript)


2
Zu diesem Zeitpunkt - mehr als vier Jahre nach den ersten Antworten auf diese Frage - ist dies nun die bequemste und flexibelste Lösung und Antwort auf diese Frage. Es sollte als Beispiel für die aktuelle Praxis (AD 2018) höher gefördert werden :-)
Jochem Schulenklopper

Zerrissen. @ thdoans Strftime-Port sieht flexibler aus. Bietet beispielsweise toLocalTimeString4 Datumsstile an full long medium short, und möglicherweise wird irgendwo definiert, was diese Begriffe bedeuten. In der Zwischenzeit könnte die Strftime (wahrscheinlich) mit all diesen und vielen anderen mithalten. toLocalTimeStringUnterstützt andererseits Zeitzonen. Ich hoffe, das schließt Zeitzonen ein, die Sommerzeit verwenden ...
Kapitän Puget

14

Sie können meinen Port of Strftime verwenden :

/* Port of strftime(). Compatibility notes:
 *
 * %c - formatted string is slightly different
 * %D - not implemented (use "%m/%d/%y" or "%d/%m/%y")
 * %e - space is not added
 * %E - not implemented
 * %h - not implemented (use "%b")
 * %k - space is not added
 * %n - not implemented (use "\n")
 * %O - not implemented
 * %r - not implemented (use "%I:%M:%S %p")
 * %R - not implemented (use "%H:%M")
 * %t - not implemented (use "\t")
 * %T - not implemented (use "%H:%M:%S")
 * %U - not implemented
 * %W - not implemented
 * %+ - not implemented
 * %% - not implemented (use "%")
 *
 * strftime() reference:
 * http://man7.org/linux/man-pages/man3/strftime.3.html
 *
 * Day of year (%j) code based on Joe Orost's answer:
 * http://stackoverflow.com/questions/8619879/javascript-calculate-the-day-of-the-year-1-366
 *
 * Week number (%V) code based on Taco van den Broek's prototype:
 * http://techblog.procurios.nl/k/news/view/33796/14863/calculate-iso-8601-week-and-year-in-javascript.html
 */
function strftime(sFormat, date) {
  if (!(date instanceof Date)) date = new Date();
  var nDay = date.getDay(),
    nDate = date.getDate(),
    nMonth = date.getMonth(),
    nYear = date.getFullYear(),
    nHour = date.getHours(),
    aDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    aMonths = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    aDayCount = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334],
    isLeapYear = function() {
      if ((nYear&3)!==0) return false;
      return nYear%100!==0 || nYear%400===0;
    },
    getThursday = function() {
      var target = new Date(date);
      target.setDate(nDate - ((nDay+6)%7) + 3);
      return target;
    },
    zeroPad = function(nNum, nPad) {
      return ('' + (Math.pow(10, nPad) + nNum)).slice(1);
    };
  return sFormat.replace(/%[a-z]/gi, function(sMatch) {
    return {
      '%a': aDays[nDay].slice(0,3),
      '%A': aDays[nDay],
      '%b': aMonths[nMonth].slice(0,3),
      '%B': aMonths[nMonth],
      '%c': date.toUTCString(),
      '%C': Math.floor(nYear/100),
      '%d': zeroPad(nDate, 2),
      '%e': nDate,
      '%F': date.toISOString().slice(0,10),
      '%G': getThursday().getFullYear(),
      '%g': ('' + getThursday().getFullYear()).slice(2),
      '%H': zeroPad(nHour, 2),
      '%I': zeroPad((nHour+11)%12 + 1, 2),
      '%j': zeroPad(aDayCount[nMonth] + nDate + ((nMonth>1 && isLeapYear()) ? 1 : 0), 3),
      '%k': '' + nHour,
      '%l': (nHour+11)%12 + 1,
      '%m': zeroPad(nMonth + 1, 2),
      '%M': zeroPad(date.getMinutes(), 2),
      '%p': (nHour<12) ? 'AM' : 'PM',
      '%P': (nHour<12) ? 'am' : 'pm',
      '%s': Math.round(date.getTime()/1000),
      '%S': zeroPad(date.getSeconds(), 2),
      '%u': nDay || 7,
      '%V': (function() {
              var target = getThursday(),
                n1stThu = target.valueOf();
              target.setMonth(0, 1);
              var nJan1 = target.getDay();
              if (nJan1!==4) target.setMonth(0, 1 + ((4-nJan1)+7)%7);
              return zeroPad(1 + Math.ceil((n1stThu-target)/604800000), 2);
            })(),
      '%w': '' + nDay,
      '%x': date.toLocaleDateString(),
      '%X': date.toLocaleTimeString(),
      '%y': ('' + nYear).slice(2),
      '%Y': nYear,
      '%z': date.toTimeString().replace(/.+GMT([+-]\d+).+/, '$1'),
      '%Z': date.toTimeString().replace(/.+\((.+?)\)$/, '$1')
    }[sMatch] || sMatch;
  });
}

Beispielnutzung:

// Returns "Thursday 4:45pm 15 Sep 2016"
strftime('%A %l:%M%P %e %b %Y');

// You can optionally pass it a Date object
// Returns "Friday 2:00pm 1 Feb 2013"
strftime('%A %l:%M%P %e %b %Y', new Date('Feb 1, 2013 2:00 PM'));

Der neueste Code ist hier verfügbar: https://github.com/thdoan/strftime


Das ist fantastisch. Ich danke dir sehr.
PerpetualStudent

7

Schauen Sie sich die Interna der Date-Klasse an und Sie werden sehen, dass Sie alle Bits (Datum, Monat, Jahr, Stunde usw.) extrahieren können.

http://www.w3schools.com/jsref/jsref_obj_date.asp

Für so etwas wie Fri 23:00 1 Feb 2013den Code ist wie:

date = new Date();

weekdayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var dateString = weekdayNames[date.getDay()] + " " 
    + date.getHours() + ":" + ("00" + date.getMinutes()).slice(-2) + " " 
    + date.getDate() + " " + monthNames[date.getMonth()] + " " + date.getFullYear();

console.log(dateString);

**** Modifiziert am 29.05.2019, um 3 Downvoter bei Laune zu halten


9
w3schools ist nicht so toll. Siehe w3fools . Bessere Referenzquellen sind MDN und MSDN .
Gilly3

Datum # getDay gibt eine Ganzzahl zurück, nicht den Namen des Wochentags. Außerdem ist es imho MDN schlechter, wenn es darum geht, den Punkt in Bezug auf das Date-Objekt schnell zu vermitteln, sodass ich nicht verstehe, warum eine Herabsetzung stattfinden muss.
Ninjaxor

Das Problem dabei date.getMinutes()ist, dass eine einzelne Ziffer zurückgegeben wird, wenn die Minuten kleiner als 10 sind, was zu Zeiten wie "10: 4 Uhr" anstelle der üblicheren "10: 04 Uhr" führt.
Jochem Schulenklopper

@JochemSchulenklopper Der Nicht-Datumscode wurde hinzugefügt, um eine führende Null in Minuten anzuzeigen
Lee Meador

@Ninjaxor Nicht datumsbezogener Code hinzugefügt, um eine Zahl in eine Zeichenfolge umzuwandeln. Dies sollte funktionieren, wenn Sie englische Namen möchten.
Lee Meador

4

Es gibt viele großartige Bibliotheken für Interessierte

Es sollte heutzutage wirklich nicht nötig sein, eigene Formatierungsspezifizierer zu erfinden.


Ich wollte nur erwähnen, dass ab Oktober 2017 momentder aktuelle Standard für zeitbezogene Dinge in Javascript ist.
Shawon191

danke @ shawon191 für das Update :) ya, momentrockt. d3hat auch einige Zeitsachen hinzugefügt. Wenn Sie diese also bereits verwenden, können Sie möglicherweise einen Bibliotheksimport speichern. github.com/d3/d3/blob/master/API.md#time-formats-d3-time-format
SLF

1

2,39 KB minimiert. Eine Datei. https://github.com/rhroyston/clock-js

Aktuelle Zeit ist

var str = clock.month;
var m = str.charAt(0).toUpperCase() + str.slice(1,3); //gets you abbreviated month
clock.weekday + ' ' + clock.time + ' ' + clock.day + ' ' + m + ' ' + clock.year; //"tuesday 5:50 PM 3 May 2016"

1

d = Date.now();
d = new Date(d);
d = (d.getMonth()+1)+'/'+d.getDate()+'/'+d.getFullYear()+' '+(d.getHours() > 12 ? d.getHours() - 12 : d.getHours())+':'+d.getMinutes()+' '+(d.getHours() >= 12 ? "PM" : "AM");

console.log(d);


0

Um mit der Basis-Date-Klasse zu arbeiten, können Sie MDN nach seinen Methoden durchsuchen (aus diesem Grund anstelle von W3Schools ). Dort finden Sie eine gute Beschreibung aller Methoden, die für den Zugriff auf jede einzelne Datums- / Zeitkomponente nützlich sind, sowie Informationen darüber, ob eine Methode veraltet ist oder nicht.

Andernfalls können Sie sich Moment.js ansehen , eine gute Bibliothek für die Datums- und Zeitverarbeitung . Sie können damit Datum und Uhrzeit bearbeiten (z. B. Parsen, Formatieren, i18n usw.).


0
function formatTime(date){

  d = new Date(date);
  var h=d.getHours(),m=d.getMinutes(),l="AM";
  if(h > 12){
    h = h - 12;
  }
  if(h < 10){
    h = '0'+h;
  }
  if(m < 10){
    m = '0'+m;
  }
  if(d.getHours() >= 12){
    l="PM"
  }else{
    l="AM"
  }

  return h+':'+m+' '+l;

}

Verwendung & Ergebnis:

var formattedTime=formatTime(new Date('2020 15:00'));
// Output: "03:00 PM"

0

Verwenden Sie für diesen echten MySQL-Stil die folgende Funktion: 2019/02/28 15:33:12

  • Wenn Sie auf klicken
  • Klicken Sie unten auf die Schaltfläche "Code-Snippet ausführen"
  • Es zeigt Ihnen ein einfaches Beispiel für eine Echtzeit-Digitaluhr. Die Demo wird unter dem Code-Snippet angezeigt.

function getDateTime() {
        var now     = new Date(); 
        var year    = now.getFullYear();
        var month   = now.getMonth()+1; 
        var day     = now.getDate();
        var hour    = now.getHours();
        var minute  = now.getMinutes();
        var second  = now.getSeconds(); 
        if(month.toString().length == 1) {
             month = '0'+month;
        }
        if(day.toString().length == 1) {
             day = '0'+day;
        }   
        if(hour.toString().length == 1) {
             hour = '0'+hour;
        }
        if(minute.toString().length == 1) {
             minute = '0'+minute;
        }
        if(second.toString().length == 1) {
             second = '0'+second;
        }   
        var dateTime = year+'/'+month+'/'+day+' '+hour+':'+minute+':'+second;   
         return dateTime;
    }

    // example usage: realtime clock
    setInterval(function(){
        currentTime = getDateTime();
        document.getElementById("digital-clock").innerHTML = currentTime;
    }, 1000);
<div id="digital-clock"></div>


0

ISO8601 (zB: HH: MM: SS, 07:55:55 oder 18:50:30) auf Chrom:

neues Datum (Date.now ()). toTimeString (). substr (0,8);

am Rand:

neues Datum (Date.now ()). toLocaleTimeString ();


-2
function startTime() {
    var today = new Date(),
        h = checkTime(((today.getHours() + 11) % 12 + 1)),
        m = checkTime(today.getMinutes()),
        s = checkTime(today.getSeconds());
    document.getElementById('demo').innerHTML = h + ":" + m + ":" + s;
    t = setTimeout(function () {
        startTime()
    }, 500);
}
startTime();

}) ();

05:12:00


Ihre Antwort beantwortet in keiner Weise das OP.
Sнаđошƒаӽ

Was ist die checkTime-Funktion?
Weijing Jay Lin

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.