JavaScript tarih saatini 12 saatlik ÖÖ / ÖS biçiminde nasıl görüntülersiniz?


306

Bir JavaScript datetime nesnesini 12 saatlik biçimde (ÖÖ / ÖS) nasıl görüntülersiniz?


3
Zaman kaybetmeyin stackoverflow.com/a/17538193/3541385 onun çalışma ..
Ritesh

2
@Ritesh WARNING: toLocaleTimeString() may behave differently based on region / location.İki kez ölçün, bir kez kesin.
Terk Edilmiş Araba

@AbandonedCart bu aslında bir deyiş mi?
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. Bu soru muhtemelen Google'da daha iyi soruluyor.
Terk Edilmiş Araba

Ben edecek asla lanet olsun JavaScript basit tarihleri ile işin çalışıyor dolambaçlı nasıl alışması. 😠
ashleedawg

Yanıtlar:


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


3
Ayrıca "hours" değişkenini iki kez ilan ettiniz ancak "strTime" işlevini kazara global hale getirdiniz. Son derece zarif değil, ancak bu, yerel yöntemleri kullanan uygun teknik gibi görünüyor.
Jon z

Merhaba, bana bununla ne yaptığını açıklayabilir misin: minutes = minutes <10? '0' + dakika: dakika;
Balz

2
@Balz Dakika 10'dan azsa (örn. 16:04), bu ifade "0" dizesini ekler, böylece biçimlendirilmiş çıktı "4: 4 PM" yerine "4:04 PM" olur. Süreçte dakikaların Sayıdan Dize olarak değiştiğini unutmayın.
Caleb Bell

7
Bunu tercih minutes = ('0'+minutes).slice(-2);ziyade minutes = minutes < 10 ? '0'+minutes : minutes;
vignesh

1
@Vignesh dakikalar için daha iyi bir çözümdür, çünkü önerileni yaparsanız 21:00:00 9: 000 olur. Vignesh's size doğru dakikaları verir: 00. Yukarıdaki çözümü kullanacak olsaydınız, 00'ı da hesaba katmanız gerekirdi. (mintues> 0 && dakika <10)? '0' + dakika: dakika;
Robbie Smith

201

Sadece saatleri göstermek istiyorsanız ..

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

Çıktı: 07:00

Dakikayı da göstermek istiyorsanız ...

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

Çıktı: 07:23


Saat, dakika ve ÖÖ / ÖÖ hakkında ne dersiniz?
reutsey

3
toLocaleStringyalnızca IE11 + 'da desteklenir.
Neolisk

Şubat 2018'den itibaren krom Neolisk üzerinde iyi çalışıyor - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
lfender6445

geri dönmeli 07:23, IMO
Humble Dolt

Sen kafa karıştırıcı olabilir @HumbleDolt 'numeric'ile '2-digit'.
hon2a

55

Date.js gibi bir şey kullanmayı da düşünebilirsiniz :

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


45

Normal ifadeyi kullanmanın bir yolu:

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

Bu 3 eşleşen grup oluşturur:

  • ([\d]+:[\d]{2}) - Saat: Dakika
  • (:[\d]{2}) - Saniye
  • (.*) - alan ve dönem (Dönem ÖÖ / ÖS için resmi addır)

Ardından 1. ve 3. grupları görüntüler.

UYARI: toLocaleTimeString (), bölgeye / konuma göre farklı davranabilir.


3
İnsanlar Regex'i yeterince kullanmıyorlar. Bu, yukarıdaki jquery / microsoftajax kütüphane önerilerini eklemeden benim için çalıştı.
uadrive

Normalin anlamı, eğer tek bir rakam olsaydı, saat başında sıfırdan sonra olmaktır. 8:12 PM'lik ilk örneğinizde bunun 08:12 PM olacağını söyleyebilir misiniz?
RADXack

1
@ 404 aynı, ([\d]+:[\d]{2})ilgilendiğimiz bölüm. Ayırıcı olarak iki nokta üst üste (:) kullanın ve ilk bölümün olduğunu görüyoruz [\d]+. Artı, bir veya daha fazla anlamına gelir. Yani bir veya daha fazla rakam arıyor (sıfır dahil. Eğer sıfır olduğunu garanti etmek zorunda olsaydınız, olurdu (0[\d]:[\d]{2}).) Bu şimdi okuyor, 0 artı bir rakam daha ara, sonra iki nokta üst üste, sonra geri kalan.
Steve Tauber

1
console.log (yeni Tarih (). toLocaleTimeString (). değiştir (/ ([\ d] +: [\ d] {2}) (: [\ d] {2}) (. *) /, "$ 1 $ 3 ")); Güncel saati almak için
mujaffars

35

Öğleden önce / öğleden sonra yazdırmanıza gerek yoksa, aşağıdaki hoş ve özlü buldum:

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

Bu, @ bbrame'in cevabına dayanmaktadır.


3
@ koolinc gece yarısı için 12 gösterir. İstenilen davranışın başka ne olacağını bilmiyorum.
rattray

Ben düzeltilmiş duruyorum. Ülkemde 24 saatlik saat kullanılıyor, bu yüzden 12 saatlik saati bilmiyorum. Gerçekten gece yarısı saat 12:00.
KooiInc

16

Bildiğim kadarıyla, uzantılar ve karmaşık kodlama olmadan bunu başarmanın en iyi yolu şöyledir:

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

Javascript AM / PM Biçimi

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

Bu soruyu kontrol ederken buldum.

Saniyeler göstermeden .toLocaleTimeString () yöntemini nasıl kullanırım?



12

Lütfen aşağıdaki çözümü bulun

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;

Saat hesaplaması için eşit veya daha az olmalıdır, öğlen 0 olarak gösterilir. Yani: var hour = (d.getHours () <= 12). Gece yarısı ile ilgili hala sorun var, bu nedenle sıfırın 12'ye ayarlanıp ayarlanmadığını kontrol etmeniz gerekiyor.
Ryan

11

kullanım dateObj.toLocaleString([locales[, options]])

Seçenek 1 - Yerel ayarları kullanma

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

Seçenek 2 - Seçenekleri kullanma

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

Not: safari atm hariç tüm tarayıcılarda desteklenir



9

Tr-TR için Kısa RegExp:

var d = new Date();
d = d.toLocaleTimeString().replace(/:\d+ /, ' '); // current time, e.g. "1:54 PM"

Bu en son safari ve firefox tarayıcılarında çalışmaz, zaman hala 24 saat biçimini kullanır
euther

1
cevaplar zaman geçtikçe güncelliğini yitirir. Düzenlemek ve güncellemek için çekinmeyin!
Geo

Bu aslında dize gibi görünecektir 1:54 PM CDT. CDTNormal ifadenizi kaldırmak için aşağıdaki ifadeyi değiştirin .replace(/:\d+ |\CDT/g, ' '). Rağmen, CDT benim zaman dilimim. Farklı bir saat diliminiz varsa, sanırım bu bölge koduna geçmeniz gerekir.
sadmicrowave

ToLocaleTimeString çıktısı uygulamaya bağlıdır, bu nedenle her yerde güvenilir biçimde aynı format değildir.
RobG

9

In modern tarayıcılarda, kullanım Intl.DateTimeFormatve seçenekleri ile kuvvet 12saat formatında:

    let now = new Date();

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

    // 6:30 AM

Kullanmak default, daha fazla seçenek eklerseniz tarayıcının varsayılan yerel ayarını dikkate alır, ancak yine de 12 saat biçiminde çıktı alır.


bunu kullanmak için, yeni dizeyi bir değişkene atayın, örneğin: let sonuç = yeni Intl.DateTi .... alert (sonuç);
Scot Nery

7

Bunun için Moment.js kullanın

Moment.js kullanırken JavaScript'te aşağıdaki kodları kullanın

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

format()Yöntem belirli biçimde tarihini döndürür.

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)

5

Datejs göz atın . Yerleşik biçimlendiricileri bunu yapabilir: http://code.google.com/p/datejs/wiki/APIDocumentation#toString

Bu gerçekten kullanışlı bir kütüphane, özellikle tarih nesneleriyle başka şeyler yapmayı planlıyorsanız.


" X kitaplığını kullan " gibi yanıtlar yardımcı olmaz. Gerçi yorumlar kadar iyi olabilirler.
RobG

1
@RobG: Gördüğünüz gibi bu cevabı yazdığımdan beri epey zaman geçti. Bunu şimdi anlıyorum.
Chris Laplante

4

Ben bu kadar memba burada iyi çalışıyor o.

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

ve dalgıç örneği burada


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>

2
Saat modülünü 12 ile almak mükemmel! Bu, 12:00 veya 12:00 olduğunda sıfır almayı önler
Lynnell Emmanuel Neri

3

İşte basit ve etkili başka bir yol:

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

1

bu basit kodla am veya pm'yi belirleyebilirsiniz

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

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>


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>

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

0

İşte benim çözümüm

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

-1

Veya sadece aşağıdaki kodu yapın:

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


-1

Kısa ve tatlı bir uygulama:

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

-1

bunu dene

      var date = new Date();
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      var ampm = hours >= 12 ? "pm" : "am";

Bu yanlış. Saatler 12'den fazla olabilir.
Utsav T

12:00 de var ampm "pm" olacaktır. Yani 12.00 - 11.00 PM saatleri "pm" değerini depolayan 12-23 ve diğerleri için var ampm "am" değerini depolayacaktır. Umarım anlarsın.
Md Juyel Rana

Merhaba Juyel! Gerçekten de saatler 12'den büyük olduğunda değer PM olur. Ancak soru şu: "JavaScript tarih saatini 12 saat AM / PM biçiminde nasıl görüntülüyorsunuz?" - OP'nin tüm zamanı AM / PM formatına dönüştürmesine yardımcı olmanız gerekir. Örneğin, 14:30, 14:30 olacaktır.
Utsav T
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.