Javascript ile güncel saat biçimlendirmesi

102

Javascript ile şimdiki zamanı belirli bir formatta almak istiyorum.

Aşağıdaki işlevle ve arama bana 01 Şubat 2013 Cuma 13:56:40 GMT + 1300 (Yeni Zelanda Yaz Saati) verecektir, ancak 1 Şubat 2013 Cuma 14:00 pm gibi biçimlendirmek istiyorum 

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

Elbette yukarıdaki kodun herhangi bir biçimlendirme mantığı yok ama henüz "çalışan" biçimlendiricilere rastlamadım.

javascript  date  time  format 
— Seong Lee
kaynak
Node.js için benzer bir soru için bkz. Stackoverflow.com/questions/10645994/…
— Ohad Schneider

Yanıtlar:

163

Bir JavaScript Tarihinin, parçalarını çıkarmanıza izin veren birkaç yöntemi vardır:

getFullYear()- 4 basamaklı yılı
getMonth()döndürür - Yılın ayını temsil eden sıfır tabanlı bir tamsayı (0-11) döndürür.
getDate()- Ayın gününü (1-31) döndürür.
getDay()- Haftanın gününü (0-6) döndürür. 0 Pazar, 6 Cumartesi.
getHours()- Günün saatini (0-23) döndürür.
getMinutes()- Dakikayı döndürür (0-59).
getSeconds()- Saniyeyi döndürür (0-59).
getMilliseconds()- Milisaniyeleri (0-999) döndürür.
getTimezoneOffset()- Makinenin yerel saati ile UTC arasındaki dakika sayısını döndürür.

"Cuma", "Şubat" veya "Öğleden Sonra" gibi yerelleştirilmiş dizeler almanıza olanak tanıyan yerleşik yöntemler yoktur. Bunu kendiniz kodlamalısınız. İstediğiniz dizeyi elde etmek için en azından günlerin ve ayların dize temsillerini saklamanız gerekir:

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

Ardından, yukarıdaki yöntemleri kullanarak bir araya getirin:

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>
Snippet'i genişlet

Standart kitaplığıma eklemek istediğim bir tarih biçimi işlevim var. İstenen çıktıyı tanımlayan bir biçim dizesi parametresi alır. Biçim dizeleri vardır gevşek dayalı .Net özel tarih ve saat biçim dizeleri . Biçimi için aşağıdaki biçim dizesi çalışacağını dile getirmiştir: "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

İşte tam tarih biçimlendirme işlevim:

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;
};
— gilly3
kaynak
Çok teşekkürler. Son kodumun biraz ince ayar gerektirmesine rağmen, içgörüleriniz yardımcı oldu.
— Seong Lee
Tarihi nasıl biçimlendiririm = "2016/03/01 11:00" bugüne kadar = "01 Mart 2016 11:00:00 GMT + 0530 (IST) Cts"
— Vishal Singh
MMMM[0]0 dizinindeki yazdırılamayan karakter yerine doğru ay adını nasıl döndürür? Olması gerekmiyor MMMM[M]mu? Sadece aptal mıyım? (
— Boşver. Çakışmaları
192

Denemek isteyebilirsin 

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

Dokümantasyon

— Ye Lin Aung
kaynak
1
Metodun neden benim için çalışmıyor? d.toLocaleTimeString()ve d.toLocaleTimeString()çalışmıyor.
— afzalex
@afzalex herhangi bir geri dönüş almadığınızı mı söylüyorsunuz?
— Ye Lin Aung
Evet. Herhangi bir yöntem bulamadım toLocaleTimeString()vetoLocaleTimeString()
— afzalex
afzalex bunu deneyin: new Date (). toLocaleString ();
— blueberry0xff
console.log (new Date (). toLocaleString ()); // 27.09.2015, 14:52:18
— blueberry0xff
37

2017 güncellemesi : tarihleri ​​ve saatleri biçimlendirmek için toLocaleDateString ve toLocaleTimeString'i kullanın. Bu yöntemlere iletilen ilk parametre, en-us gibi bir yerel değerdir . İkinci parametre, bulunduğunda, hafta içi uzun biçim gibi biçimlendirme seçeneklerini belirtir.

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));
Snippet'i genişlet

Çıktı: 25 Ekim 2017 Çarşamba 20:19

Daha fazla ayrıntı için lütfen aşağıdaki bağlantıya bakın.

Tarih ve Saat Dizeleri (JavaScript)

— Joomler
kaynak
2
Şu anda - bu soruya ilk cevaplardan dört yıl sonra - bu artık en uygun ve esnek çözüm ve bu sorunun cevabı. Mevcut (AD 2018) bir uygulama örneği olarak daha yüksek tanıtılmalıdır :-)
— Jochem Schulenklopper
Yırtık. @ thdoan'ın strftime limanı daha esnek görünüyor. Örneğin, toLocalTimeString4 tarih stili sunar full long medium shortve belki de bu terimlerin ne anlama geldiği bir yerlerde tanımlanmıştır. Bu arada, strftime bunlardan herhangi biri ve daha fazlasıyla (muhtemelen) eşleşebilir. Öte yandan toLocalTimeStringsaat dilimlerini destekler. Bunun gün ışığından yararlanma saatini kullanan saat dilimlerini içermesini umuyorum ...
— kaptan puget
15

Benim strftime bağlantı noktamı kullanabilirsiniz :

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

Örnek kullanım:

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

En son koda buradan ulaşabilirsiniz: https://github.com/thdoan/strftime

— thdoan
kaynak
Bu harika. Çok teşekkür ederim.
— PerpetualStudent
6

Date sınıfının iç kısımlarına bakın ve tüm bitleri (tarih, ay, yıl, saat vb.) Çıkarabileceğinizi göreceksiniz.

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

Fri 23:00 1 Feb 2013Kod gibi bir şey için:

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);
Snippet'i genişlet

**** 3 olumsuz oy vereni mutlu etmek için 2019-05-29'da değişiklik yapıldı

— Lee Meador
kaynak
10
w3schools harika değil. W3fools'a bakın . Daha iyi referans kaynakları arasında MDN ve MSDN bulunur .
— gilly3
Date # getDay, haftanın gününün adını değil, bir tamsayı döndürür. Ayrıca imho MDN, Date nesnesi ile ilgili noktayı hızlı bir şekilde anlamada daha kötüdür, bu yüzden kötülemenin neden olması gerektiğini anlamıyorum.
— Ninjaxor
Sorun date.getMinutes(), dakikalar 10'dan az olduğunda tek bir rakam döndürmesidir, bu da daha yaygın olan "10:04 am" yerine "10:00 am" gibi zamanlarla sonuçlanır.
— Jochem Schulenklopper
@JochemSchulenklopper Dakikaların başındaki sıfırın gösterilmesi için tarihsiz kod eklendi
— Lee Meador
@Ninjaxor Bir sayıyı dizeye dönüştürmek için tarihle ilgili olmayan kod eklendi. İngilizce isimler istiyorsanız bu çalışmalıdır.
— Lee Meador
4

İlgilenenler için birçok harika kütüphane var

Bugünlerde kendi biçimlendirme belirleyicilerinizi icat etmeye gerçekten ihtiyaç duyulmamalı.

— slf
kaynak
Sadece, Ekim 2017 itibariyle momentJavascript'te zamanla ilgili şeyler için mevcut standart olduğunu belirtmek istedim .
— shawon191
teşekkürler @ shawon191 güncelleme için :) ya, momentkayalar. d3ayrıca bazı zaman öğeleri de ekledi, bu nedenle zaten kullanıyorsanız, bir kitaplık içe aktarımı
— slf
1

2.39KB küçültülmüş. Bir dosya. https://github.com/rhroyston/clock-js

Geçerli Saat

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"
— Ronnie Royston
kaynak
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);
Snippet'i genişlet

— Cris
kaynak
0

Temel Date sınıfıyla çalışmak için MDN yöntemlerine bakabilirsiniz ( bu nedenle W3Schools yerine ). Burada, her bir tarih / saat bileşenine erişmek için yararlı olan her yöntem hakkında iyi bir açıklama ve bir yöntemin kullanımdan kaldırılıp kaldırılmadığına ilişkin bilgiler bulabilirsiniz.

Aksi takdirde , tarih ve saat işleme için kullanmak için iyi bir kitaplık olan Moment.js'ye bakabilirsiniz . Tarih ve saati değiştirmek için kullanabilirsiniz (örneğin ayrıştırma, biçimlendirme, i18n, vb.).

— Ragnarokkr
kaynak
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;

}

Kullanım ve sonuç:

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

Bu gerçek mysql stili için aşağıdaki işlevi kullanın: 2019/02/28 15:33:12

  • Tıklarsanız
  • Aşağıdaki 'Kod parçacığını çalıştır' düğmesi
  • Basit bir gerçek zamanlı dijital saat örneğinizi gösterecektir Demo, kod parçacığının altında görünecektir.

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>
Snippet'i genişlet

— Daniel Lee
kaynak
-1

ISO8601 (ör. HH: MM: SS, 07:55:55 veya 18:50:30) chrome üzerinde:

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

sınırda :

new Date (Date.now ()). toLocaleTimeString ();

— Wael Chorfan
kaynak
-3 
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

— Umashankar Chaudhary
kaynak
Cevabınız hiçbir şekilde OP'ye cevap vermiyor.
— Sнаđошƒаӽ
CheckTime işlevi nedir?
— Weijing Jay Lin
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.