자바 스크립트로 현재 시간 형식 지정


101

자바 스크립트를 사용하여 현재 시간을 특정 형식으로 얻고 싶습니다.

아래 함수를 호출하면 2013 년 2 월 1 일 금요일 13:56:40 GMT + 1300 (뉴질랜드 일광 절약 시간)이 제공 되지만 2013 년 2 월 1 일 금요일 오후 2시 처럼 형식을 지정하고 싶습니다.

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

물론 위의 코드에는 형식화 논리가 없지만 아직 "작동하는"형식화 도구를 사용하지 않았습니다.


Node.js를위한 비슷한 질문을 참조 stackoverflow.com/questions/10645994/...
오핫 슈나이더

답변:


160

JavaScript Date에는 부분을 추출 할 수있는 몇 가지 방법이 있습니다.

getFullYear()-4 자리 연도를 반환합니다.-연도를
getMonth()나타내는 0부터 시작하는 정수 (0-11)를 반환합니다.
getDate()-날짜 (1-31)를 반환합니다.
getDay()-요일 (0-6)을 반환합니다. 0은 일요일, 6은 토요일입니다.
getHours()-시간 (0-23)을 반환합니다.
getMinutes()-분 (0-59)을 반환합니다.
getSeconds()-초 (0-59)를 반환합니다.
getMilliseconds()-밀리 초 (0-999)를 반환합니다.
getTimezoneOffset()-기계 현지 시간과 UTC 사이의 분 수를 반환합니다.

"Friday", "February"또는 "PM"과 같은 현지화 된 문자열을 가져올 수있는 내장 메서드가 없습니다. 직접 코딩해야합니다. 원하는 문자열을 얻으려면 최소한 일과 월의 문자열 표현을 저장해야합니다.

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

그런 다음 위의 방법을 사용하여 구성하십시오.

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>

표준 라이브러리에 포함하고 싶은 날짜 형식 기능이 있습니다. 원하는 출력을 정의하는 형식 문자열 매개 변수를 사용합니다. 형식 문자열이된다 느슨하게 를 기반으로 닷넷 사용자 지정 날짜 및 시간 형식 문자열 . 지정한 형식의 경우 다음 형식 문자열이 작동 "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");

데모 : jsfiddle.net/BNkkB/1

내 전체 날짜 형식 지정 기능은 다음과 같습니다.

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

감사합니다. 최종 코드에는 약간의 조정이 필요했지만 귀하의 통찰력이 도움이되었습니다.
성은

날짜 형식 지정 = "2016/03/01 11:00"to date = "Sat Mar 01 2016 11:00:00 GMT + 0530 (IST)"
Vishal Singh

MMMM[0]인덱스 0에서 인쇄 할 수없는 문자 대신 올바른 월 이름을 반환하는 방법은 무엇입니까? 그럴까요 MMMM[M]? 난 그냥 바보 야? (괜찮습니다. 인쇄 할 수없는 문자로 설정하며 나중에 충돌을 피하기 위해 대체합니다.)
Danegraphics

190

시도해 볼 수 있습니다.

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

선적 서류 비치


1
왜 당신의 방법이 저에게 효과가 없습니까? d.toLocaleTimeString()d.toLocaleTimeString()작동하지 않습니다.
afzalex

@afzalex 당신은 어떤 수익도 얻지 못한다는 의미입니까?
Ye Lin Aung

예. 나는 어떤 방법을 발견하지 않았다 toLocaleTimeString()toLocaleTimeString()
afzalex

afzalex 이것을 시도하십시오 : new Date (). toLocaleString ();
blueberry0xff

console.log (new Date (). toLocaleString ()); // 2015
blueberry0xff

37

2017 업데이트 : toLocaleDateStringtoLocaleTimeString 을 사용 하여 날짜 및 시간 형식을 지정합니다. 이러한 메소드에 전달되는 첫 번째 매개 변수는 en-us 와 같은 로케일 값 입니다. 두 번째 매개 변수 (있는 경우)는 요일의 긴 형식과 같은 형식화 옵션을 지정합니다.

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

출력 : 2017 년 10 월 25 일 수요일 오후 8:19

자세한 내용은 아래 링크를 참조하십시오.

날짜 및 시간 문자열 (JavaScript)


2
이 질문에 대한 첫 번째 답변 이후 4 년이 지난 지금 현재 이것은 가장 편리하고 유연한 솔루션이며이 질문에 대한 답변입니다. 현재 (AD 2018) 관행의 예로서 더 높은 수준으로 승격되어야합니다. :-)
Jochem Schulenklopper

찢어진. @thdoan의 strftime 포트가 더 유연 해 보입니다. 예를 들어, toLocalTimeString은 4 개의 날짜 스타일을 제공하며 full long medium short해당 용어의 의미는 어딘가에 정의되어 있습니다. 한편, strftime은 (아마도) 이들 중 하나 이상과 일치 할 수 있습니다. 반면에는 toLocalTimeString시간대를 지원합니다. 그 시간대를 포함 바라고 그 사용 일광 절약 시간 ...
선장 퓨젯

14

strftime 포트를 사용할 수 있습니다 .

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

샘플 사용법 :

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

최신 코드는 여기에서 확인할 수 있습니다 : https://github.com/thdoan/strftime


굉장합니다. 정말 고맙습니다.
PerpetualStudent

7

Date 클래스의 내부를 보면 모든 비트 (날짜, 월, 년, 시간 등)를 추출 할 수 있음을 알 수 있습니다.

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

같은 들어 Fri 23:00 1 Feb 2013코드와 같다 :

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

**** 3 명의 다운 보터를 행복하게 유지하기 위해 2019-05-29 수정 됨


9
w3schools는 좋지 않습니다. w3fools를 참조하십시오 . 더 나은 참조 소스에는 MDNMSDN이 포함됩니다 .
gilly3 2013

Date # getDay는 요일 이름이 아닌 정수를 반환합니다. 또한 imho MDN은 Date 객체에 대한 요점을 신속하게 파악하는 데 더 나쁘기 때문에 왜 비난이 발생 해야하는지 이해하지 못합니다.
Ninjaxor

문제 date.getMinutes()는 분이 10보다 작을 때 한 자리를 반환하여 더 일반적인 "10:04 am"대신 "10 : 4 am"과 같은 시간을 반환한다는 것입니다.
Jochem Schulenklopper 2018

@JochemSchulenklopper 추가 분에 앞에 0이 표시되지 않은 날짜 코드
리 Meador을

@Ninjaxor 숫자를 문자열로 변환하기 위해 날짜와 관련없는 코드를 추가했습니다. 영어 이름을 원하면 작동합니다.
Lee Meador

4

관심있는 사람들을 위해 많은 훌륭한 도서관이 있습니다.

요즘에는 고유 한 형식 지정자를 발명 할 필요가 없습니다.


2017 년 10 월 moment현재 자바 스크립트의 시간 관련 표준이 언급하고 싶었습니다 .
shawon191

업데이트에 대한 @ shawon191 감사합니다 :) ya, momentrock. d3시간 항목도 추가되었으므로 이미 사용중인 경우 라이브러리 가져 오기 github.com/d3/d3/blob/master/API.md#time-formats-d3-time-format
slf

1

2.39KB 축소. 하나의 파일. https://github.com/rhroyston/clock-js

현재 시간

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

기본 Date 클래스로 작업하려면 해당 메서드에 대한 MDN 을 살펴볼 수 있습니다 ( 이러한 이유로 인해 W3Schools 대신 ). 각 단일 날짜 / 시간 구성 요소에 액세스하는 데 유용한 모든 메서드에 대한 좋은 설명과 메서드가 사용되지 않는지 여부와 관련된 정보를 찾을 수 있습니다.

그렇지 않으면 날짜 및 시간 처리에 사용하기에 좋은 라이브러리 인 Moment.js 를 볼 수 있습니다 . 이를 사용하여 날짜 및 시간을 조작 할 수 있습니다 (예 : 구문 분석, 형식화, i18n 등).


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;

}

사용법 및 결과 :

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

0

이 진정한 mysql 스타일의 경우 아래 함수를 사용하십시오. 2019/02/28 15:33:12

  • 클릭하면
  • 아래의 '코드 스 니펫 실행'버튼
  • 간단한 실시간 디지털 시계 예제가 표시됩니다. 데모는 코드 스 니펫 아래에 표시됩니다.

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 (예 : HH : MM : SS, 07:55:55 또는 18:50:30) :

new Date (Date.now ()). toTimeString (). substr (0,8);

가장자리 :

new Date (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


귀하의 답변은 OP에 대한 답변이 아닙니다.
Sнаđошƒаӽ

checkTime 기능이란?
Weijing Jay Lin 2019

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.