12시 AM / PM 형식으로 JavaScript 날짜 시간을 어떻게 표시합니까?

306

12 시간 형식 (AM / PM)으로 JavaScript 날짜 / 시간 객체를 어떻게 표시합니까?

javascript  datetime  date  time  format 
— bra
소스
3
시간을 낭비하지 마십시오 . stackoverflow.com/a/17538193/3541385 작동 ..
— Ritesh
2
@Ritesh WARNING: toLocaleTimeString() may behave differently based on region / location.두 번 측정하고 한 번 자릅니다.
— 버려진 카트
@AbandonedCart는 실제로 그 말입니까?
— 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.이 질문은 아마도 구글에서 더 나은 질문 일 것입니다.
— 버려진 카트
나는 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));
스 니펫 확장

— bra
소스
3
또한 "hours"변수를 두 번 선언했지만 "strTime"을 실수로 전역에 만들었습니다. 매우 우아하지는 않지만 기본 방법을 사용하는 적절한 기술 인 것 같습니다.
— Jon z
안녕하세요, 당신은 이것으로 무엇을하고 있는지 실례 할 수 있습니까 : minutes = minutes <10? '0'+ 분 : 분;
— Balz
2
@Balz 분이 10보다 작은 경우 (예 : 16:04)이 명령문은 문자열 "0"을 추가하여 형식화 된 출력이 "4 : 4 PM"대신 "4:04 PM"이되도록합니다. 이 과정에서 분은 숫자에서 문자열로 바뀝니다.
— Caleb Bell
7
나는이 선호 minutes = ('0'+minutes).slice(-2);보다는 minutes = minutes < 10 ? '0'+minutes : minutes;
— 인 Vignesh
1
@Vignesh 솔루션은 21:00:00이 9 : 000이되는 것을 제안하기 때문에 분 동안 더 좋습니다. Vignesh는 정확한 분을 : 00으로 제공합니다. 위의 솔루션을 사용하려면 00도 고려해야합니다. (분> 0 && 분 <10)? '0'+ 분 : 분;
— Robbie Smith
201

그냥 시간을 보여주고 싶다면 ..

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

출력 : 오전 7시

당신도 분을 보여주고 싶다면 ...

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

출력 : 오전 7:23

— 압하이 쿠마르
소스
시간, 분 및 AM / PM은 어떻습니까?
— reutsey
3
toLocaleStringIE11 +에서만 지원됩니다.
— Neolisk
- 2018년 2월 현재의 크롬 Neolisk에 잘 작동 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
— lfender6445
그것은 07:23, IMO를 반환합니다
— Humble Dolt
@HumbleDolt 'numeric'와 혼동 될 수 있습니다 '2-digit'.
— hon2a
55

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>
스 니펫 확장

— 마이크 크리스텐슨
소스
45

정규식을 사용하는 방법은 다음과 같습니다.

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"))
스 니펫 확장

이렇게하면 3 개의 일치하는 그룹이 생성됩니다.

  • ([\d]+:[\d]{2}) -시간 : 분
  • (:[\d]{2}) -초
  • (.*) -공백 및 기간 (마침표는 AM / PM의 공식 이름입니다)

그런 다음 첫 번째 및 세 번째 그룹이 표시됩니다.

경고 : toLocaleTimeString ()은 지역 / 위치에 따라 다르게 작동 할 수 있습니다.

— 스티브 타우 버
소스
3
사람들은 정규식을 충분히 사용하지 않습니다. 이것은 위의 jquery / microsoftajax 라이브러리 제안을 추가하지 않고 나를 위해 일했습니다.
— uadrive
정규식은 한 자릿수 인 경우 시간 시작 부분에 후행 0을 갖는 것입니다. 오후 8시 12 분의 첫 번째 예에서 오후 8시 12 분이라고 가정하십니까?
— RADXack
1
@ 404 그것은 동일 ([\d]+:[\d]{2})하다. 우리가 관심을 갖고있는 부분이다. 콜론 (:)을 구분자로 사용하면 첫 부분은이다 [\d]+. 더하기 란 하나 이상을 의미합니다. 따라서 하나 이상의 숫자를 찾고 있습니다 (0을 포함합니다. 0이 있다는 것을 보장해야한다면 (0[\d]:[\d]{2})이제는 0이 될 것 입니다. 이제는 0과 다른 숫자를 더한 다음 콜론과 나머지를 찾습니다.
— Steve Tauber
1
console.log (새 날짜 () .toLocaleTimeString (). replace (/ ([\ d] + : [\ d] {2}) (: [\ d] {2}) (. *) /, "$ 1 $ 3 ")); 현재 시간을 받으려면
— mujaffars
35

오전 / 오후를 인쇄 할 필요가 없다면 다음과 같은 간결하고 간결한 것을 발견했습니다. 

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

이것은 @bbrame의 답변을 기반으로합니다.

— 쥐잡이
소스
3
자정 동안 @koolinc는 12를 보여줍니다. 원하는 다른 동작이 무엇인지 잘 모르겠습니다.
— rattray
나는 정정되었다. 우리나라에서는 24 시간제를 사용하므로 12 시간제에 익숙하지 않습니다. 실제로 자정은 12:00 am입니다.
— KooiInc
16

내가 아는 한 확장 및 복잡한 코딩없이 달성하는 가장 좋은 방법은 다음과 같습니다.

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

자바 스크립트 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>
스 니펫 확장

이 질문을 확인하는 것을 발견했습니다.

초를 표시하지 않고 .toLocaleTimeString ()을 어떻게 사용합니까?

— 에드윈 멘데즈
소스
12

아래 해결책을 찾으십시오

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
소스
시간 계산의 경우 이보다 작거나 같아야합니다. 그렇지 않으면 정오가 0으로 표시됩니다. 따라서 var hour = (d.getHours () <= 12). 자정에 여전히 문제가 있으므로 0인지 확인한 다음 12로 설정해야합니다.
— Ryan
11

사용하다 dateObj.toLocaleString([locales[, options]])

옵션 1- 로캘 사용

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

옵션 2-옵션 사용

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

참고 : safari atm을 제외한 모든 브라우저에서 지원

— LiranBo
소스
1
— mimo
9

en-US의 짧은 RegExp :

var d = new Date();
d = d.toLocaleTimeString().replace(/:\d+ /, ' '); // current time, e.g. "1:54 PM"
— 지리
소스
최신 사파리 및 파이어 폭스 브라우저에서는 작동하지 않습니다. 시간은 여전히 ​​24 시간 형식을 사용합니다
— 34 초
1
시간이지나면서 답변이 오래됩니다. 자유롭게 편집하고 업데이트하십시오!
— Geo
이것은 실제로 문자열을처럼 보이게 1:54 PM CDT합니다. (가) 제거하려면 CDT다음과 정규식을 변경 .replace(/:\d+ |\CDT/g, ' '). CDT는 제 시간대입니다. 시간대가 다른 경우 해당 시간대 코드로 변경해야한다고 가정합니다.
— sadmicrowave
toLocaleTimeString 의 출력 은 구현에 따라 다르므로 어디에서나 동일한 형식 을 보장 할 수 는 없습니다.
— RobG
9

에서 최신 브라우저, 사용 Intl.DateTimeFormat및 옵션 힘 12 시간 형식 :

    let now = new Date();

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

    // 6:30 AM

사용 default여전히 출력 12 시간 형식을 것입니다 당신이 더 많은 옵션을 추가하면 브라우저의 기본 로케일을 존중합니다, 아직.

— mtm
소스
이를 사용하려면 새 문자열을 변수에 지정하십시오. 예 : let result = new Intl.DateTi .... alert (result);
— Scot Nery
7

이를 위해 Moment.js 를 사용하십시오.

moment.js를 사용할 때 JavaScript에서 아래 코드를 사용하십시오.

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

이 format()메서드는 날짜를 특정 형식으로 반환합니다.

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를 확인하십시오 . 내장 포맷터는 다음을 수행 할 수 있습니다. http://code.google.com/p/datejs/wiki/APIDocumentation#toString

특히 날짜 객체로 다른 일을 할 계획이라면 매우 편리한 라이브러리입니다.

— 크리스 라플란 테
소스
" 라이브러리 X 사용 "과 같은 답변 은 도움이되지 않습니다. 그들은 의견으로 좋을 수 있습니다.
— RobG
1
@RobG : 보시다시피이 답변을 쓴 지 꽤 오래되었습니다. 나는 이것을 지금 깨닫는다.
— Chris Laplante
4

나는 그것의 세례반 여기 잘 작동 그것.

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

그리고 plunker 예제는 여기

— Vamsikrishnamannem
소스
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
12로 시간의 모듈을 얻는 것은 훌륭합니다! 이 방지 제로를 받고 때의 자정 또는 그것의 정오
— Lynnell 엠마누엘 네리
3

간단하고 효과적인 또 다른 방법은 다음과 같습니다.

        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

이 간단한 코드로 오전 또는 오후를 결정할 수 있습니다

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>
스 니펫 확장

— 수지스 S
소스
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;
}
— Vik2696
소스
0

여기 내 솔루션

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

또는 단순히 다음 코드를 수행하십시오.

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

— yan 야곱
소스
-1

짧고 달콤한 구현 :

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

이 시도

      var date = new Date();
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      var ampm = hours >= 12 ? "pm" : "am";
— Juyel Rana
소스
이것은 올바르지 않습니다. 시간은 12보다 클 수 있습니다.
— Utsav T
오후 12 시가되면 var ampm은 "pm"이됩니다. 따라서 오후 12.00 ~ 11.00은 "pm"값을 저장하는 12 ~ 23이고 다른 것의 경우 var ampm은 "am"값을 저장합니다. 이해하시기 바랍니다.
— Md Juyel Rana
안녕하세요 Juyel! 실제로 시간이 12보다 큰 경우 값은 PM입니다. 그러나 문제는 "자바 스크립트 날짜 / 시간을 오전 12시 / 오후 12시 형식으로 표시하는 방법"입니다. -OP가 전체 시간을 AM / PM 형식으로 변환하는 데 도움이 필요합니다. 예를 들어 14:30은 오후 2:30입니다.
— Utsav T
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.