Bagaimana Anda menampilkan datetime JavaScript dalam format AM / PM 12 jam?

306

Bagaimana Anda menampilkan objek datetime JavaScript dalam format 12 jam (AM / PM)?

javascript datetime date time format bbrame
sumber
3
Jangan buang waktu Anda stackoverflow.com/a/17538193/3541385 ini berfungsi ..
Ritesh
2
@Ritesh WARNING: toLocaleTimeString() may behave differently based on region / location.Ukur dua kali, potong sekali.
Abandoned Cart
@AbandonedCart apakah itu benar-benar sebuah perkataan?
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.Pertanyaan itu mungkin lebih baik ditanyakan di Google.
Abandoned Cart
Saya tidak akan pernah terbiasa dengan betapa berbelit-belitnya ia mencoba bekerja dengan tanggal sederhana dalam JavaScript. šŸ˜ 
ashleedawg

Jawaban:

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

bbrame
sumber
3
Anda juga mendeklarasikan variabel "jam" dua kali tetapi menjadikan "strTime" sebagai global yang tidak disengaja. Itu tidak terlalu elegan tetapi ini tampaknya teknik yang tepat menggunakan metode asli.
Jon z
Hai, dapatkah Anda memberi tahu saya apa yang Anda lakukan dengan ini: menit = menit <10? '0' + menit: menit;
Balz
2
@ Balz Jika menit kurang dari 10 (mis. 16:04), maka pernyataan itu menambahkan string "0" sehingga output yang diformat adalah "4:04 PM" dan bukan "4: 4 PM". Perhatikan bahwa dalam proses, menit berubah dari Angka menjadi String.
Caleb Bell
7
Saya lebih suka ini minutes = ('0'+minutes).slice(-2);daripada minutes = minutes < 10 ? '0'+minutes : minutes;
Vignesh
1
Solusi @Vignesh untuk menit lebih baik karena jika Anda melakukan yang disarankan 21:00:00 menjadi 9: 000. Vignesh's memberi Anda menit yang benar sebagai: 00. Jika Anda menggunakan solusi di atas maka Anda harus memperhitungkan 00 juga. (mintues> 0 && menit <10)? '0' + menit: menit;
Robbie Smith
201

Jika Anda hanya ingin menunjukkan jam maka ..

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

Output: 7 pagi

Jika Anda ingin menunjukkan menit juga maka ...

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

Output: 7:23 pagi

Abhay Kumar
sumber
Bagaimana dengan jam, menit, dan AM / PM?
Reutsey
3
toLocaleStringhanya didukung di IE11 +.
Neolisk
Pada Februari 2018 ini berfungsi dengan baik pada chrome Neolisk - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ā€¦
lfender6445
itu harus kembali 07:23, IMO
Humble Dolt
@HumbleDolt Anda mungkin membingungkan 'numeric'dengan '2-digit'.
hon2a
55

Anda juga dapat mempertimbangkan menggunakan sesuatu seperti date.js :

<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>
Luaskan cuplikan

Mike Christensen
sumber
45

Berikut cara menggunakan regex:

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"))
Luaskan cuplikan

Ini menciptakan 3 grup yang cocok:

  • ([\d]+:[\d]{2}) - Jam: Menit
  • (:[\d]{2}) - Detik
  • (.*) - ruang dan periode (Periode adalah nama resmi untuk AM / PM)

Kemudian menampilkan grup 1 dan 3.

PERINGATAN: toLocaleTimeString () dapat berperilaku berbeda berdasarkan wilayah / lokasi.

Steve Tauber
sumber
3
Orang tidak cukup menggunakan Regex. Ini bekerja untuk saya tanpa menambahkan saran perpustakaan jquery / microsoftajax di atas.
uadrive
Apa yang akan menjadi regex adalah untuk memiliki nol di awal jam jika itu adalah satu digit. Katakan dalam contoh pertama Anda pada jam 8:12 malam, jam itu akan jam 08:12 malam?
RADXack
1
@ 404 sama, ([\d]+:[\d]{2})bagian yang kami minati. Gunakan titik dua (:) sebagai pemisah dan kita lihat bagian pertama [\d]+. Nilai tambah berarti satu atau lebih. Jadi itu mencari satu atau lebih digit (termasuk nol. Jika Anda harus menjamin nol ada di sana, itu akan menjadi (0[\d]:[\d]{2}). Ini sekarang berbunyi, cari 0 ditambah satu digit lainnya, lalu titik dua, lalu sisanya.
Steve Tauber
1
console.log (Tanggal baru (). toLocaleTimeString (). ganti (/ ([\ d] +: [\ d] {2}) (: [\ d] {2}) (. *) /, "$ 1 $ 3 ")); Untuk mendapatkan waktu saat ini
mujaffars
35

Jika Anda tidak perlu mencetak pagi / malam, saya menemukan yang bagus dan singkat berikut ini: 

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

Ini didasarkan pada jawaban @ bbrame.

rattray
sumber
3
@ koolinc untuk tengah malam itu menunjukkan 12. Saya tidak yakin apa lagi perilaku yang diinginkan.
rattray
Saya berdiri dikoreksi. Di negara saya jam 24 jam digunakan, jadi saya tidak terbiasa dengan jam 12 jam. Memang tengah malam adalah 12:00 pagi.
KooiInc
16

Sejauh yang saya tahu, cara terbaik untuk mencapai itu tanpa ekstensi dan pengkodean kompleks adalah seperti ini:

     date.toLocaleString([], { hour12: true});

Format Javascript AM / PM

<!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>
Luaskan cuplikan

Saya menemukan ini memeriksa pertanyaan ini.

Bagaimana cara menggunakan .toLocaleTimeString () tanpa menampilkan detik?

Edwin Mendez
sumber
12

Silakan temukan solusinya di bawah ini

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
sumber
Seharusnya kurang dari atau sama dengan perhitungan jam, kalau tidak siang akan muncul sebagai 0. Jadi: var hour = (d.getHours () <= 12). Masih memiliki masalah dengan tengah malam sehingga Anda harus memeriksa apakah nol kemudian set ke 12 juga.
Ryan
11

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

Opsi 1 - Menggunakan lokal

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

Opsi 2 - Menggunakan opsi

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

Catatan: didukung di semua browser tetapi atm safari

LiranBo
sumber
1
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ā€¦
mimo
9

RegExp Pendek untuk en-US:

var d = new Date();
d = d.toLocaleTimeString().replace(/:\d+ /, ' '); // current time, e.g. "1:54 PM"
Geo
sumber
ini tidak bekerja pada peramban safari dan firefox terbaru, waktu masih menggunakan format 24 jam
euther
1
jawaban menjadi usang seiring berjalannya waktu. Jangan ragu untuk mengedit dan memperbarui!
Geo
Ini sebenarnya akan membuat string terlihat seperti 1:54 PM CDT. Untuk menghapus CDTubah regex Anda ke yang berikut .replace(/:\d+ |\CDT/g, ' '). Meskipun, CDT hanyalah zona waktu saya. Jika Anda memiliki zona waktu yang berbeda, saya kira Anda perlu mengubah ke kode zona itu.
sadmicrowave
Output dari toLocaleTimeString bergantung pada implementasi, jadi format yang sama tidak dapat diandalkan di mana-mana.
RobG
9

Di browser modern, gunakan Intl.DateTimeFormatdan paksa format 12 jam dengan opsi:

    let now = new Date();

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

    // 6:30 AM

Menggunakan defaultakan menghormati lokal default browser jika Anda menambahkan lebih banyak opsi, namun masih akan menghasilkan format 12 jam.

mtm
sumber
untuk menggunakan ini, tetapkan string baru ke variabel misalnya: let result = new Intl.DateTi .... alert (hasil);
Scot Nery
7

Gunakan Moment.js untuk ini

Gunakan kode di bawah ini dalam JavaScript saat menggunakan moment.js

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

The format()Metode mengembalikan tanggal dalam format tertentu.

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
sumber
5

Lihat Datejs . Pemformat bawaan mereka dapat melakukan ini: http://code.google.com/p/datejs/wiki/APIDocumentation#toString

Ini adalah perpustakaan yang sangat berguna, terutama jika Anda berencana melakukan hal-hal lain dengan objek tanggal.

Chris Laplante
sumber
Jawaban seperti " use library X " tidak membantu. Mereka bisa menjadi komentar yang bagus.
RobG
1
@ RobG: Seperti yang Anda lihat sudah cukup lama sejak saya menulis jawaban ini. Saya menyadari ini sekarang.
Chris Laplante
4

Saya menemukan itu di sini itu berfungsi dengan baik.

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

dan contoh plunker di sini

vamsikrishnamannem
sumber
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
sumber
2
Mendapatkan modul jam dengan 12 sangat baik! Ini mencegah nol saat 12:00 atau 12:00
Lynnell Emmanuel Neri
3

Berikut ini cara lain yang sederhana, dan sangat efektif:

        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 -->
pengguna3059774
sumber
1

Anda dapat menentukan am atau pm dengan kode sederhana ini

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
sumber
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>
Luaskan cuplikan

Sujith S
sumber
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
sumber
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
sumber
0

Sini solusi saya

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 Lebih Banyak
sumber
-1

Atau cukup lakukan kode berikut:

    <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
sumber
-1

Implementasi yang singkat dan manis:

// 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
sumber
-1

coba ini

      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
sumber
Ini salah. Jamnya bisa lebih besar dari 12.
Utsav T
Ketika jam 12.00 siang vm ampm akan menjadi "pm". Jadi jam 12.00 siang sampai jam 11.00 siang jam adalah jam 12 sampai 23 yang menyimpan nilai "pm" dan untuk yang lain, var ampm akan menyimpan nilai "am". Semoga kamu mengerti.
Md Juyel Rana
Hai Juyel! Memang ketika jam lebih besar dari 12, nilainya akan menjadi PM. Tetapi pertanyaannya adalah "Bagaimana Anda menampilkan datetime JavaScript dalam format 12 jam AM / PM?" - Anda perlu membantu OP mengonversi sepanjang waktu ke format AM / PM. Misalnya, pukul 14:30 akan menjadi 14:30.
Utsav T