Làm cách nào để hiển thị datetime JavaScript ở định dạng AM / PM 12 giờ?

306

Làm thế nào để bạn hiển thị một đối tượng datetime JavaScript ở định dạng 12 giờ (AM / PM)?

— bbrame
nguồn

3

Đừng lãng phí thời gian của bạn stackoverflow.com/a/17538193/3541385 hoạt động của nó ..

— Ritesh

2

@Ritesh WARNING: toLocaleTimeString() may behave differently based on region / location.Đo hai lần, cắt một lần.

— Giỏ hàng bị bỏ rơi

@AbandnameCart có thực sự là một câu nói?

— gilbert-v

1

@ gilbert-v Tuy nhiên,

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.

câu hỏi đó có lẽ được hỏi tốt hơn trên Google.

— Giỏ hàng bị bỏ rơi

Tôi sẽ không bao giờ quen với việc nó đang cố gắng hoạt động như thế nào với những ngày đơn giản trong JavaScript. 😠

— ashleedawg

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

Mở rộng đoạn trích

— bbrame
nguồn

3

Ngoài ra, bạn đã khai báo biến "giờ" hai lần nhưng biến "strTime" thành toàn cầu ngẫu nhiên. Nó không phải là cực kỳ thanh lịch nhưng dường như đây là kỹ thuật thích hợp sử dụng các phương pháp bản địa.

— Jon z

Xin chào, bạn có thể giải thích cho tôi bạn đang làm gì với điều này không: phút = phút <10? '0' + phút: phút;

— Balz

2

@Balz Nếu số phút nhỏ hơn 10 (ví dụ 16:04), thì câu lệnh đó thêm chuỗi "0" để đầu ra được định dạng là "4:04 PM" thay vì "4: 4 PM". Lưu ý rằng trong quy trình, phút thay đổi từ Số thành Chuỗi.

— Caleb Bell

7

Tôi thích điều này minutes = ('0'+minutes).slice(-2);hơn là minutes = minutes < 10 ? '0'+minutes : minutes;

— Vignesh

1

Giải pháp @Vignesh trong vài phút sẽ tốt hơn bởi vì nếu bạn đang thực hiện một đề xuất thì 21:00:00 sẽ trở thành 9: 000. Vignesh's cung cấp cho bạn số phút chính xác là: 00. Nếu bạn đã sử dụng giải pháp trên thì bạn cũng phải tính đến 00. (phút> 0 && phút <10)? '0' + phút: phút;

— Robbie Smith

201

Nếu bạn chỉ muốn hiển thị giờ thì ..

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

Mở rộng đoạn trích

Đầu ra: 7 giờ sáng

Nếu bạn cũng muốn hiển thị phút thì ...

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

Mở rộng đoạn trích

Đầu ra: 7:23 AM

— Abhay Kumar
nguồn

Còn giờ, phút và AM / PM thì sao?

— thiệu lại

3

toLocaleStringchỉ được hỗ trợ trên IE11 +.

— Neolisk

Kể từ tháng 2 năm 2018, nó hoạt động tốt trên chrome Neolisk - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/

— trộm

nó sẽ trở lại 07:23, IMO

— Humble Dolt

@HumbleDolt Bạn có thể nhầm lẫn 'numeric'với '2-digit'.

— hon2a

55

Bạn cũng có thể xem xét sử dụng một cái gì đó như 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>

Mở rộng đoạn trích

— Mike Christensen
nguồn

45

Đây là một cách sử dụng 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"))

Mở rộng đoạn trích

Điều này tạo ra 3 nhóm phù hợp:

([\d]+:[\d]{2}) - Giờ: Phút
(:[\d]{2}) - Giây
(.*) - không gian và thời gian (Thời gian là tên chính thức của AM / PM)

Sau đó, nó sẽ hiển thị các nhóm 1 và 3.

CẢNH BÁO: toLocaleTimeString () có thể hoạt động khác nhau tùy theo khu vực / địa điểm.

— Steve Tauber
nguồn

3

Mọi người không sử dụng Regex đủ. Điều này làm việc cho tôi mà không cần thêm các đề xuất thư viện jquery / microsoftajax ở trên.

— uadrive

Điều gì sẽ là regex sẽ có một số 0 ở đầu giờ nếu nó là một chữ số. Nói trong ví dụ đầu tiên của bạn về 8:12 PM thì sẽ là 08:12 PM?

— RADXack

1

@ 404 Nó giống nhau, ([\d]+:[\d]{2})là phần chúng ta quan tâm. Sử dụng dấu hai chấm (:) làm dấu phân cách và chúng ta thấy phần đầu tiên là [\d]+. Dấu cộng có nghĩa là một hoặc nhiều. Vì vậy, nó đang tìm kiếm một hoặc nhiều chữ số (bao gồm số 0. Nếu bạn phải đảm bảo số 0 ở đó, nó sẽ hiện ra (0[\d]:[\d]{2}). Bây giờ hãy đọc, tìm 0 cộng với một chữ số khác, sau đó là dấu hai chấm, sau đó là phần còn lại.

— Steve Tauber

1

console.log (Ngày mới (). toLocaleTimeString (). thay thế (/ ([\ d] +: [\ d] {2}) (: [\ d] {2}) (. *) /, "$ 1 $ 3 ")); Để có được thời gian hiện tại

— mujaffars

35

Nếu bạn không cần in sáng / chiều, tôi đã tìm thấy những điều hay và súc tích sau đây:

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

Điều này dựa trên câu trả lời của @ bbrame.

— rattray
nguồn

3

@koolinc cho nửa đêm nó hiển thị 12. Tôi không chắc hành vi mong muốn khác là gì.

— rattray

Tôi đứng sửa. Ở nước tôi, đồng hồ 24 giờ được sử dụng, vì vậy tôi không quen với đồng hồ 12 giờ. Thật vậy, nửa đêm là 12:00 sáng.

— KooiInc

16

Theo như tôi biết, cách tốt nhất để đạt được điều đó mà không cần phần mở rộng và mã hóa phức tạp là như sau:

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

Định dạng AM / PM Javascript

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

Mở rộng đoạn trích

Tôi tìm thấy điều này kiểm tra câu hỏi này ra.

Làm cách nào để sử dụng .toLocaleTimeString () mà không hiển thị giây?

— Edwin Mendez
nguồn

16

Đề nghị của tôi là sử dụng thời điểm js cho hoạt động ngày và thời gian.

https://momentjs.com/docs/#/displaying/format/

console.log(moment().format('hh:mm a'));

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>

Mở rộng đoạn trích

— Vijay Maheriya
nguồn

12

Vui lòng tìm giải pháp dưới đây

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;

— KRnamoorthy Acharya
nguồn

Nên nhỏ hơn hoặc bằng với tính toán giờ khác buổi trưa hiển thị là 0. Vì vậy: var hours = (d.getHours () <= 12). Vẫn có vấn đề với nửa đêm, vì vậy bạn phải kiểm tra nếu không thì cũng đặt thành 12.

— Ryan

11

sử dụng dateObj.toLocaleString([locales[, options]])

Tùy chọn 1 - Sử dụng ngôn ngữ

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

Tùy chọn 2 - Sử dụng tùy chọn

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

Lưu ý: được hỗ trợ trên tất cả các trình duyệt nhưng safari atm

— LiranBo
nguồn

1

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/

— mẹo

9

RegExp ngắn cho en-US:

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

— Địa lý
nguồn

điều này không hoạt động trên các trình duyệt safari và firefox mới nhất, thời gian vẫn sử dụng định dạng 24 giờ

— euther

1

câu trả lời trở nên lỗi thời khi thời gian trôi qua Hãy chỉnh sửa và cập nhật!

— Geo

Điều này thực sự sẽ làm cho chuỗi trông như thế nào 1:54 PM CDT. Để loại bỏ sự CDTthay đổi regex của bạn như sau .replace(/:\d+ |\CDT/g, ' '). Mặc dù, CDT chỉ là múi giờ của tôi. Nếu bạn có múi giờ khác, tôi cho rằng bạn sẽ cần phải đổi sang mã vùng đó.

— sadmic [

Đầu ra của toLocaleTimeString phụ thuộc vào việc triển khai, do đó không đáng tin cậy cùng định dạng ở mọi nơi.

— RobG

9

Trong các trình duyệt hiện đại, sử dụng Intl.DateTimeFormatvà buộc định dạng 12 giờ với các tùy chọn:

    let now = new Date();

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

    // 6:30 AM

Việc sử dụng defaultsẽ tôn vinh ngôn ngữ mặc định của trình duyệt nếu bạn thêm nhiều tùy chọn, nhưng vẫn sẽ xuất định dạng 12 giờ.

— mtm
nguồn

để sử dụng điều này, gán chuỗi mới cho một biến, ví dụ: let result = new Intl.DateTi .... alert (result);

— Scot Nery

7

Sử dụng Moment.js cho việc này

Sử dụng các mã dưới đây trong JavaScript khi sử dụng khoảnh khắc

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

Các format()phương thức trả về ngày ở định dạng cụ thể.

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
nguồn

5

Kiểm tra Datejs . Trình định dạng được tích hợp sẵn của chúng có thể thực hiện việc này: http://code.google.com.vn/p/datejs/wiki/APIDocumentation#toString

Đây là một thư viện thực sự tiện dụng, đặc biệt nếu bạn dự định làm những việc khác với các đối tượng ngày.

— Chris Laplante
nguồn

Các câu trả lời như " sử dụng thư viện X " không hữu ích. Họ có thể là tốt như ý kiến mặc dù.

— RobG

1

@RobG: Như bạn có thể thấy đã khá lâu kể từ khi tôi viết câu trả lời này. Tôi nhận ra điều này bây giờ.

— Chris Laplante

4

Tôi cho rằng nó ở đây nó hoạt động tốt.

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

và ví dụ plunker ở đây

— vamsikrishnamannem
nguồn

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
nguồn

2

Lấy mô-đun của giờ với 12 là tuyệt vời! Điều này ngăn không về 0 khi 12 giờ sáng hoặc 12 giờ đêm

— Lynnell Emmanuel Neri

3

Đây là một cách khác rất đơn giản và rất hiệu quả:

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

— người dùng3059774
nguồn

1

bạn có thể xác định sáng hoặc chiều với mã đơn giản này

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
nguồn

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>

Mở rộng đoạn trích

— Sujith S
nguồn

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
nguồn

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
nguồn

0

Đây là giải pháp của tôi

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 Thêm
nguồn

-1

Hoặc chỉ đơn giản là làm mã sau đây:

    <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
nguồn

-1

Một triển khai ngắn và ngọt ngào:

// 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
nguồn

-1

thử cái này

      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
nguồn

Điều này là không đúng. Giờ có thể lớn hơn 12.

— Utsav T

Khi 12:00 chiều, var ampm sẽ là "pm". Vì vậy, 12.00 PM đến 11.00 PM giờ sẽ là 12 đến 23 lưu trữ giá trị "pm" và đối với những người khác, var ampm sẽ lưu trữ giá trị "am". Mong là bạn hiểu.

— Md Juyel Rana

Chào Juyel! Thật vậy, khi số giờ lớn hơn 12, giá trị sẽ là PM. Nhưng câu hỏi là "Làm thế nào để bạn hiển thị thời gian JavaScript ở định dạng AM / PM 12 giờ?" - bạn cần giúp OP chuyển đổi toàn bộ thời gian sang định dạng AM / PM. Ví dụ: 14:30 sẽ là 2:30 chiều.

— Utsav T