Formattazione dell'ora corrente con Javascript


101

Voglio ottenere l'ora corrente in un formato specifico con javascript.

Con la funzione di seguito e chiamandola mi darà Fri Feb 01 2013 13:56:40 GMT + 1300 (New Zealand Daylight Time) ma voglio formattarlo come venerdì 2:00 pm 1 Feb 2013

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

Ovviamente, il codice sopra non ha alcuna logica di formattazione, ma non mi sono ancora imbattuto in alcun formattatore "funzionante".


Per una domanda simile per Node.js vedi stackoverflow.com/questions/10645994/…
Ohad Schneider

Risposte:


161

Una data JavaScript ha diversi metodi che ti consentono di estrarne le parti:

getFullYear()- Restituisce l'anno a 4 cifre
getMonth()- Restituisce un numero intero a base zero (0-11) che rappresenta il mese dell'anno.
getDate()- Restituisce il giorno del mese (1-31).
getDay()- Restituisce il giorno della settimana (0-6). 0 è domenica, 6 è sabato.
getHours()- Restituisce l'ora del giorno (0-23).
getMinutes()- Restituisce i minuti (0-59).
getSeconds()- Restituisce il secondo (0-59).
getMilliseconds()- Restituisce i millisecondi (0-999).
getTimezoneOffset()- Restituisce il numero di minuti tra l'ora locale della macchina e UTC.

Non ci sono metodi incorporati che consentono di ottenere stringhe localizzate come "Friday", "February" o "PM". Devi codificarlo tu stesso. Per ottenere la stringa che desideri, devi almeno memorizzare le rappresentazioni di stringa di giorni e mesi:

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

Quindi, mettilo insieme usando i metodi sopra:

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>

Ho una funzione di formattazione della data che mi piace includere nella mia libreria standard. Accetta un parametro di stringa di formato che definisce l'output desiderato. Le stringhe di formato sono vagamente basate su stringhe di formato data e ora personalizzate .Net . Per il formato specificato la seguente stringa di formato funzionerebbe: "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

Ecco la mia funzione di formattazione completa della data:

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

Molte grazie. Sebbene il mio codice finale avesse bisogno di un po 'di aggiustamento, le tue intuizioni hanno aiutato.
Seong Lee

Come faccio a formattare la data = "2016/03/01 11:00" a data = "Sab 1 marzo 2016 11:00:00 GMT + 0530 (IST)"
Vishal Singh

In che modo MMMM[0]restituisce il nome del mese corretto invece del carattere non stampabile all'indice 0? Non dovrebbe essere MMMM[M]? Sono solo stupido? (Non importa. Lo imposta sul carattere non stampabile, che sostituisce in seguito per evitare conflitti)
Danegraphics

190

Potresti provare

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

Documentazione


1
perchè il tuo metodo non funziona per me? d.toLocaleTimeString()e d.toLocaleTimeString()non funzionano.
afzalex

@afzalex vuoi dire che non riceverai alcun ritorno?
Ye Lin Aung

sì. Non ho trovato alcun metodo toLocaleTimeString()etoLocaleTimeString()
afzalex

afzalex prova questo: new Date (). toLocaleString ();
blueberry0xff

console.log (new Date (). toLocaleString ()); // 27/09/2015, 14:52:18
blueberry0xff

37

Aggiornamento 2017 : utilizzare toLocaleDateString e toLocaleTimeString per formattare date e ore. Il primo parametro passato a questi metodi è un valore locale, ad esempio en-us . Il secondo parametro, se presente, specifica le opzioni di formattazione, come la forma lunga per il giorno della settimana.

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

Uscita: mercoledì 25 ottobre 2017, 20:19

Si prega di fare riferimento al collegamento sotto per maggiori dettagli.

Stringhe di data e ora (JavaScript)


2
In questo momento - oltre quattro anni dopo le prime risposte a questa domanda - questa è ora la soluzione più conveniente e flessibile e la risposta a questa domanda. Dovrebbe essere promosso più in alto come esempio di pratica corrente (AD 2018) :-)
Jochem Schulenklopper

Strappato. Il port of strftime di @ thdoan sembra più flessibile. Ad esempio, toLocalTimeStringoffre 4 stili di data full long medium shorte forse il significato di questi termini è definito da qualche parte. Nel frattempo, strftime potrebbe (probabilmente) eguagliare uno di questi e molti altri. D'altra parte, toLocalTimeStringsupporta i fusi orari. Spero che includa fusi orari che utilizzano l'ora legale ...
capitano puget

14

Puoi usare il mio porto di strftime :

/* 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;
  });
}

Utilizzo del campione:

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

Il codice più recente è disponibile qui: https://github.com/thdoan/strftime


Questo e spettacolare. Grazie mille.
PerpetualStudent

7

Guarda gli interni della classe Date e vedrai che puoi estrarre tutti i bit (data, mese, anno, ora, ecc.).

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

Per qualcosa di simile Fri 23:00 1 Feb 2013il codice è come:

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

**** Modificato il 29/05/2019 per rendere felici 3 votanti negativi


9
w3schools non è eccezionale. Vedi w3fools . Le migliori fonti di riferimento includono MDN e MSDN .
gilly3

Date # getDay restituisce un numero intero, non il nome del giorno della settimana. Inoltre, imho MDN fa peggio nel far passare rapidamente il punto per quanto riguarda l'oggetto Date, quindi non capisco perché sia ​​necessario disprezzare.
Ninjaxor

Il problema date.getMinutes()è che restituisce una singola cifra quando i minuti sono inferiori a 10, risultando in orari come "10: 4 am" invece del più comune "10:04 am".
Jochem Schulenklopper

@JochemSchulenklopper Aggiunto il codice non di data per visualizzare uno zero iniziale nei minuti
Lee Meador

@Ninjaxor Aggiunto codice non relativo alla data per convertire un numero in una stringa. Questo dovrebbe funzionare se vuoi nomi inglesi.
Lee Meador

4

Ci sono molte ottime biblioteche là fuori, per chi è interessato

In questi giorni non dovrebbe esserci davvero bisogno di inventare i propri specificatori di formattazione.


Volevo solo menzionare, a partire da ottobre 2017, momentè lo standard attuale per le cose relative al tempo in Javascript.
shawon191

grazie @ shawon191 per l'aggiornamento :) ya, momentrocce. d3ha anche aggiunto un po 'di tempo, quindi se lo stai già utilizzando, potresti essere in grado di salvare un'importazione di libreria github.com/d3/d3/blob/master/API.md#time-formats-d3-time-format
slf

1

2.39 KB minimizzati. Un file. https://github.com/rhroyston/clock-js

L'ora attuale è

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

Per lavorare con la classe Date di base puoi guardare MDN per i suoi metodi (invece di W3Schools per questo motivo ). Lì puoi trovare una buona descrizione di ogni metodo utile per accedere a ogni singolo componente data / ora e informazioni relative al fatto che un metodo sia deprecato o meno.

Altrimenti puoi guardare Moment.js che è una buona libreria da utilizzare per l'elaborazione di data e ora. Puoi usarlo per manipolare la data e l'ora (come l'analisi, la formattazione, i18n, ecc.).


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;

}

Utilizzo e risultato:

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

0

Per questo vero stile mysql usa questa funzione di seguito: 2019/02/28 15:33:12

  • Se fai clic sul file
  • Pulsante "Esegui snippet di codice" di seguito
  • Ti mostrerà un semplice esempio di orologio digitale in tempo reale. La demo apparirà sotto lo snippet di codice.

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 (ad esempio: HH: MM: SS, 07:55:55 o 18:50:30) su Chrome:

nuovo Date (Date.now ()). toTimeString (). substr (0,8);

sul bordo :

new Date (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


La tua risposta non risponde in alcun modo all'OP.
Sнаđошƒаӽ

Cos'è la funzione checkTime?
Weijing Jay Lin

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.