Pemformatan waktu saat ini dengan Javascript


101

Saya ingin mendapatkan waktu saat ini dalam format tertentu dengan javascript.

Dengan fungsi di bawah ini dan memanggilnya akan memberi saya Jumat 01 Feb 2013 13:56:40 GMT + 1300 (Waktu Musim Panas Selandia Baru) tetapi saya ingin memformatnya seperti Jumat 14:00 1 Feb 2013

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

Tentu saja, kode di atas tidak memiliki logika pemformatan tetapi saya belum menemukan pemformatan yang "berfungsi".


Untuk pertanyaan serupa untuk Node.js lihat stackoverflow.com/questions/10645994/…
Ohad Schneider

Jawaban:


161

Tanggal JavaScript memiliki beberapa metode yang memungkinkan Anda mengekstrak bagian-bagiannya:

getFullYear()- Mengembalikan tahun 4-digit
getMonth()- Mengembalikan bilangan bulat berbasis nol (0-11) yang mewakili bulan dalam setahun.
getDate()- Mengembalikan hari dalam sebulan (1-31).
getDay()- Mengembalikan hari dalam seminggu (0-6). 0 adalah Minggu, 6 adalah Sabtu.
getHours()- Mengembalikan jam dalam sehari (0-23).
getMinutes()- Mengembalikan menit (0-59).
getSeconds()- Mengembalikan detik (0-59).
getMilliseconds()- Mengembalikan milidetik (0-999).
getTimezoneOffset()- Mengembalikan jumlah menit antara waktu lokal mesin dan UTC.

Tidak ada metode bawaan yang memungkinkan Anda mendapatkan string yang dilokalkan seperti "Friday", "February", atau "PM". Anda harus mengkodekannya sendiri. Untuk mendapatkan string yang Anda inginkan, Anda setidaknya perlu menyimpan representasi string hari dan bulan:

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

Kemudian, gabungkan menggunakan metode di atas:

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>

Saya memiliki fungsi format tanggal yang ingin saya sertakan di perpustakaan standar saya. Dibutuhkan parameter string format yang mendefinisikan keluaran yang diinginkan. String format secara longgar didasarkan pada string format Tanggal dan Waktu kustom .Net . Untuk format yang Anda tentukan format string berikut akan bekerja: "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

Ini adalah fungsi pemformatan tanggal lengkap saya:

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

Terima kasih banyak. Meskipun kode terakhir saya membutuhkan sedikit penyesuaian, wawasan Anda membantu.
Seong Lee

Bagaimana saya memformat date = "2016/03/01 11:00" to date = "Sab 01 Mar 2016 11:00:00 GMT + 0530 (IST)"
Vishal Singh

Bagaimana MMMM[0]mengembalikan nama bulan yang benar dan bukan karakter yang tidak dapat dicetak pada indeks 0? Bukankah seharusnya begitu MMMM[M]? Apakah saya hanya bodoh? (Nevermind. Ini menetapkannya ke karakter yang tidak dapat dicetak, yang akan diganti nanti untuk menghindari konflik)
Danegraphics

190

Anda mungkin ingin mencoba

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

Dokumentasi


1
mengapa metode Anda tidak berhasil untuk saya? d.toLocaleTimeString()dan d.toLocaleTimeString()tidak bekerja.
afzalex

@afzalex maksud Anda Anda tidak mendapatkan pengembalian apa pun?
Ye Lin Aung

Iya. Saya tidak menemukan metode apa pun toLocaleTimeString()dantoLocaleTimeString()
afzalex

afzalex coba yang ini: new Date (). toLocaleString ();
blueberry0xff

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

37

Pembaruan 2017 : gunakan toLocaleDateString dan toLocaleTimeString untuk memformat tanggal dan waktu. Parameter pertama yang diteruskan ke metode ini adalah nilai lokal, seperti en-us . Parameter kedua, di mana ada, menentukan opsi pemformatan, seperti formulir panjang untuk hari kerja.

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

Output: Rabu, 25 Okt 2017, 20.19

Silakan lihat tautan di bawah ini untuk lebih jelasnya.

Tanggal dan Waktu String (JavaScript)


2
Saat ini - lebih dari empat tahun setelah jawaban pertama untuk pertanyaan ini - sekarang ini adalah solusi yang paling mudah dan fleksibel, dan jawaban untuk pertanyaan ini. Ini harus dipromosikan lebih tinggi sebagai contoh praktik saat ini (AD 2018) :-)
Jochem Schulenklopper

Robek. Porta strftime @ thdoan terlihat lebih fleksibel. Misalnya, toLocalTimeStringmenawarkan 4 gaya tanggal full long medium short, dan mungkin arti istilah tersebut didefinisikan di suatu tempat. Sementara itu, strftime bisa (mungkin) menyamai salah satu dari itu dan banyak lagi. Di sisi lain, toLocalTimeStringmendukung zona waktu. Saya berharap itu termasuk zona waktu yang menggunakan waktu musim panas ...
kapten puget

14

Anda dapat menggunakan port of strftime saya :

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

Penggunaan sampel:

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

Kode terbaru tersedia di sini: https://github.com/thdoan/strftime


Ini luar biasa. Terima kasih banyak.
PerpetualStudent

7

Lihatlah internal kelas Tanggal dan Anda akan melihat bahwa Anda dapat mengekstrak semua bit (tanggal, bulan, tahun, jam, dll).

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

Untuk sesuatu seperti Fri 23:00 1 Feb 2013kodenya seperti:

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

**** Dimodifikasi pada 2019-05-29 agar 3 downvoters senang


9
w3sekolah tidak bagus. Lihat w3fools . Sumber referensi yang lebih baik termasuk MDN dan MSDN .
gilly3

Date # getDay mengembalikan integer, bukan nama hari kerja. Juga, imho MDN tidak lebih buruk dalam menyampaikan maksudnya dengan cepat mengenai objek Tanggal, jadi saya tidak mengerti mengapa penghinaan perlu dilakukan.
Ninjaxor

Masalahnya date.getMinutes()adalah bahwa ia mengembalikan satu digit saat menit kurang dari 10, menghasilkan waktu seperti "10: 4 am" bukan yang lebih umum "10:04".
Jochem Schulenklopper

@JochemSchulenklopper Menambahkan kode non-tanggal untuk menampilkan nol di depan pada menit
Lee Meador

@Ninjaxor Menambahkan kode terkait non-tanggal untuk mengubah angka menjadi string. Ini harus berfungsi jika Anda menginginkan nama bahasa Inggris.
Lee Meador

4

Ada banyak perpustakaan hebat di luar sana, bagi mereka yang tertarik

Hari-hari ini seharusnya tidak ada kebutuhan untuk menciptakan penentu pemformatan Anda sendiri.


Sekadar ingin menyebutkan, per Oktober 2017, momentadalah standar saat ini untuk hal-hal terkait waktu di Javascript.
shawon191

terima kasih @ shawon191 untuk pembaruannya :) ya, keren moment. d3juga telah menambahkan beberapa bahan waktu juga, jadi jika Anda sudah menggunakannya, Anda mungkin dapat menyimpan perpustakaan impor github.com/d3/d3/blob/master/API.md#time-formats-d3-time-format
slf

1

2,39 KB diminimalkan. Satu file. https://github.com/rhroyston/clock-js

Waktu Saat Ini adalah

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

Untuk bekerja dengan kelas Tanggal dasar Anda dapat melihat MDN untuk metodenya (bukan W3Schools karena alasan ini ). Di sana Anda dapat menemukan deskripsi yang bagus tentang setiap metode yang berguna untuk mengakses setiap komponen tanggal / waktu dan informasi terkait apakah suatu metode tidak digunakan lagi atau tidak.

Jika tidak, Anda dapat melihat Moment.js yang merupakan pustaka yang baik untuk digunakan untuk pemrosesan tanggal dan waktu. Anda dapat menggunakannya untuk memanipulasi tanggal dan waktu (seperti parsing, pemformatan, i18n, dll.).


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;

}

Penggunaan & hasil:

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

0

Untuk gaya mysql sejati ini gunakan fungsi di bawah ini: 2019/02/28 15:33:12

  • Jika Anda mengklik
  • Tombol 'Jalankan cuplikan kode' di bawah
  • Ini akan menunjukkan contoh jam digital realtime sederhana. Demo akan muncul di bawah potongan kode.

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 (misalnya: HH: MM: SS, 07:55:55, atau 18:50:30) di chrome:

Tanggal baru (Date.now ()). toTimeString (). substr (0,8);

di tepi:

Tanggal baru (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


Jawaban Anda sama sekali tidak menjawab OP.
Sнаđошƒаӽ

Apa itu fungsi checkTime?
Weijing Jay Lin

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.