new Date()를 사용하여 현재 날짜와 시간을 포함하는 새 Date 객체를 만듭니다.

참고날짜() 인수 없이 호출되는 것은 다음과 같습니다.새로운 날짜(Date.now()) .

날짜 개체가 있으면 몇 가지 중 하나를 적용할 수 있습니다. 사용 가능한 방법속성을 검색합니다(예: 4자리 연도를 얻으려면 getFullYear()).

다음은 몇 가지 일반적인 날짜 방법입니다.

현재 연도 가져오기

var 연도 = (새 날짜()).getFullYear(); 콘솔 로그(연도); // 샘플 출력: 2016

이번 달 가져오기

var 월 = (새 날짜()).getMonth(); 콘솔 로그(월); // 샘플 출력: 0

0 = 1월에 유의하십시오. 월별로 다르기 때문입니다. 0 ~ 전에 11 , 그래서 종종 인덱스에 +1을 추가하는 것이 바람직합니다.

현재 날짜 가져오기

varday = (새 날짜()).getDate(); 콘솔 로그(일); // 샘플 출력: 31

현재 시간 가져오기

var 시간 = (새 날짜()).getHours(); 콘솔 로그(시간); // 샘플 출력: 10

현재 분 가져오기

var 분 = (새 날짜()).getMinutes(); 콘솔 로그(분); // 샘플 출력: 39

현재 초 가져오기

var 초 = (새 날짜()).getSeconds(); 콘솔 로그(초); // 샘플 출력: 48

현재 밀리초 가져오기

Date 객체 인스턴스의 밀리초(0~999)를 얻으려면 getMilliseconds 메소드를 사용하십시오.

var 밀리초 = (새 날짜()).getMilliseconds(); 콘솔 로그(밀리초); // 출력: 현재 밀리초

현재 시간과 날짜를 사람이 읽을 수 있는 문자열로 변환

varnow = 새로운 날짜(); // 날짜를 UTC 시간대 형식의 문자열로 변환합니다. console.log(now.toUTCString()); // 출력: 2017년 6월 21일 수요일 09:13:01 GMT

정적 메서드 Date.now()는 1970년 1월 1일 00:00:00 UTC 이후의 밀리초 수를 반환합니다. Date 객체의 인스턴스를 사용하여 그 이후로 경과한 밀리초 수를 얻으려면 해당 getTime 메소드를 사용하십시오.

// 이제 Date의 정적 메서드를 사용하여 밀리초를 얻습니다. console.log(Date.now()); // Date 인스턴스의 getTime 메소드를 사용하여 밀리초를 얻습니다. console.log((new Date()).getTime());

날짜와 시간은 일상 생활의 일부이므로 프로그래밍에서 두드러지게 나타납니다. JavaScript에서 웹 사이트를 만들 때 일정, 기차 일정 또는 약속을 예약하기 위한 인터페이스를 추가해야 할 수 있습니다. 이러한 앱은 사용자의 현재 시간대를 기반으로 적절한 시간을 표시하거나 항공기의 도착 및 출발 또는 이벤트의 시작 및 종료 시간과 관련된 계산을 수행해야 합니다. 또한 특정 시간에 일일 보고서를 보내거나 필터링(예: 특정 시간에 영업하는 식당 찾기)을 위해 JavaScript를 사용해야 할 수도 있습니다.

날짜 개체

Date는 날짜와 시간을 저장하는 내장 JavaScript 객체입니다. 이 데이터의 형식을 지정하고 조작하기 위한 여러 내장 메서드를 제공합니다.

기본적으로 인수가 없는 새 Date 인스턴스는 환경 설정현재 컴퓨터.

예를 들어 현재 날짜를 변수에 할당해 보십시오. now.js 파일을 만듭니다.

// 변수를 현재 날짜와 시간으로 설정
지금 const = new Date();
// 출력 보기
지금;
2017년 10월 18일 수요일 12:41:34 GMT+0000(UTC)

출력은 다음 데이터를 포함하는 날짜 문자열입니다.

날짜와 시간이 구분되어 읽기 쉽게 표시됩니다.

그러나 JavaScript는 1970년 1월 1일 자정 이후의 밀리초 수로 구성된 값인 Unix 타임스탬프를 기반으로 날짜를 해석합니다. getTime() 메서드를 사용하여 타임스탬프를 가져올 수 있습니다.

// 현재 타임스탬프 가져오기
지금.getTime();
1508330494000

출력에 현재 타임스탬프로 표시되는 큰 숫자는 1970년 1월 1일 자정부터 2017년 10월 18일까지 경과한 시간(밀리초)입니다.

0시(또는 에포크 시간)는 날짜 문자열 01 January, 1970 00:00:00 UTC(Universal Time)와 0의 타임스탬프로 표시됩니다. epoch.js에서 새 변수를 만들고 브라우저에서 이를 테스트할 수 있습니다. 타임스탬프 0을 기반으로 Date 의 새 인스턴스를 할당합니다.

// 타임스탬프 0을 새 변수에 할당
const epochTime = 새로운 날짜(0);
신기원 시간;
1970년 1월 1일 00:00:00 세계시(UTC)

컴퓨터가 시간을 측정하는 기준으로 0시가 선택되었으며, 이 방법은 자바스크립트에서 사용됩니다. 애플리케이션의 설정과 목적에 따라 이러한 개념을 사용할 수 있으므로 타임스탬프와 날짜 문자열을 이해하는 것이 중요합니다.

이제 현재 시간과 타임스탬프를 기반으로 새 Date 인스턴스를 만드는 방법을 알게 되었습니다. JavaScript에는 총 4가지 날짜 형식이 있습니다. 기본 현재 시간 및 타임스탬프 외에 날짜 문자열을 사용하거나 특정 날짜 및 시간을 지정할 수도 있습니다.

시연하다 다양한 방법특정 날짜에 대한 참조를 사용하려면 1776년 7월 4일, GMT 12:30 GMT를 나타내는 새 Date 객체를 세 가지 방법으로 만들어 보십시오.

// 타임스탬프 메소드
새로운 날짜(-6106015800000);
// 날짜 문자열 메서드
new Date("1980년 1월 31일 12:30");
// 날짜 및 시간 메서드
새로운 날짜(1776, 6, 4, 12, 30, 0, 0);

이러한 모든 예는 동일한 날짜 및 시간 정보를 세 가지 방식으로 나타냅니다.

보시다시피 타임스탬프 메서드는 음수입니다. 0 시간 이전의 모든 날짜는 음수로 표시됩니다.

세 번째 예에서 초와 밀리초는 0으로 표시됩니다. Date 객체를 생성할 때 누락된 데이터가 있으면 0으로 지정해야 합니다. 누락된 데이터는 문자열의 시간 데이터 순서가 0으로 지정되지 않으므로 건너뛸 수 없습니다. 변화. 또한 7월은 여기에서 7이 아니라 6으로 표시됩니다. 이는 카운트다운이 1이 아니라 0에서 시작하기 때문입니다. 이에 대한 자세한 내용은 다음 섹션에서 설명합니다.

get으로 날짜 검색하기

날짜가 있으면 다양한 기본 제공 방법을 사용하여 모든 구성 요소에 액세스할 수 있습니다. 메서드는 현지 시간대를 기준으로 날짜의 각 부분을 반환합니다. 이러한 각 메서드는 get으로 시작하고 상대 번호를 반환합니다. 아래는 Date 객체의 get 메소드에 대한 자세한 표입니다.

날짜 시간 방법 범위 예시
년도 getFullYear() YYYY 1970
getMonth() 0-11 0 = 1월
달의 날 getDate() 1-31 1 = 매월 1일
요일 getDay() 0-6 0 = 일요일
getHours() 0-23 0 = 자정
getMinutes() 0-59
getSeconds() 0-59
밀리초 getMilliseconds() 0-999
타임스탬프 getTime()

// 새로운 생일 인스턴스 초기화
const 생일 = new Date(1980, 6, 31);

이제 모든 방법을 사용하여 날짜의 각 구성 요소를 추출할 수 있습니다.

생일.getFullYear(); // 1980년
생일.getMonth(); // 6
생일.getDate(); // 31
생일.getDay(); // 네
생일.getHours(); // 0
생일.getMinutes(); // 0
생일.getSeconds(); // 0
생일.getMilliseconds(); // 0
생일.getTime(); // 333849600000(GMT용)

때로는 날짜의 일부만 추출해야 할 수도 있으며 내장된 get 메소드가 이를 도와줄 것입니다.

예를 들어 오늘 날짜를 10월 3일과 비교하여 10월 3일인지 아닌지 확인할 수 있습니다.

// 오늘 날짜 가져오기
const 오늘 = new Date();
// 오늘과 10월 3일 비교
if (today.getDate() === 3 && today.getMonth() === 9) (
console.log("10월 3일입니다.");
) 또 다른 (
console.log("10월 3일이 아닙니다.");
}
10월 3일이 아닙니다.

내장된 get 메서드를 사용하면 날짜 구성 요소에 액세스할 수 있습니다.

set으로 날짜 변경하기

위에 나열된 모든 get 메소드에는 해당하는 set 메소드가 있습니다. get이 특정 날짜 구성 요소를 검색하는 데 사용되는 경우 set은 해당 구성 요소를 변경하는 데 사용됩니다. 아래는 Date 객체의 setter 메소드에 대한 자세한 표입니다.

날짜 시간 방법 범위 예시
년도 setFullYear() YYYY 1970
setMonth() 0-11 0 = 1월
달의 날 날짜 설정() 1-31 1 = 매월 1일
요일 세트데이() 0-6 0 = 일요일
setHours() 0-23 0 = 자정
setMinutes() 0-59
setSeconds() 0-59
밀리초 setMilliseconds() 0-999
타임스탬프 setTime() 제로 시간 이후의 밀리초 수

이러한 설정 방법을 사용하여 하나 이상의 날짜 구성 요소를 변경할 수 있습니다. 예를 들어, 생일 변수의 연도를 1997로 변경할 수 있습니다.

// 생일 날짜의 연도 변경
생일.setFullYear(1997);
생신;
1997년 7월 31일 목 00:00:00 GMT+0000(UTC)

이제 생일 변수를 호출하면 1980이 아니라 1997이 표시됩니다.

내장된 set 메소드를 사용하면 Date 객체의 다른 부분을 변경할 수 있습니다.

UTC 방법

위에서 설명한 get 메소드는 다음을 기반으로 날짜 구성 요소를 검색합니다. 지역 설정사용자의 시간대. 날짜 및 시간에 대한 제어를 강화하려면 get 방법과 동일하게 작동하지만 UTC(협정 세계시) 표준을 기반으로 시간을 계산하는 getUTC 방법을 사용할 수 있습니다. 다음은 JavaScript의 Date 객체에 대한 UTC 메소드 표입니다.

날짜 시간 방법 범위 예시
년도 getUTCFullYear() YYYY 1970
getUTC월() 0-11 0 = 1월
달의 날 getUTCDate() 1-31 1 = 매월 1일
요일 getUTCDay() 0-6 0 = 일요일
getUTCHours() 0-23 0 = 자정
getUTCM분() 0-59
getUTCSecons() 0-59
밀리초 getUTCMilliseconds() 0-999

지역별 차이를 확인하려면 메소드 가져오기 UTC 메소드를 얻으려면 다음 코드를 실행하십시오.

// 현재 시간을 변수에 할당
지금 const = new Date();
// 로컬 및 UTC 시간대 인쇄
console.log(now.getHours());
console.log(now.getUTCHours());

이 코드는 UTC 시간대의 현재 시간과 시간을 인쇄합니다. 현재 UTC 시간대에 있는 경우 프로그램에 표시되는 숫자는 동일합니다.

UTC는 국제 시간 표준을 제공하므로 프로그램에서 필요한 경우 시간대에 따라 코드를 지원할 수 있습니다.

결론

이 자습서에서는 Date 개체를 인스턴스화하는 방법, 기본 제공 메서드를 사용하여 주어진 날짜의 구성 요소에 액세스하고 수정하는 방법을 배웠습니다. 더 자세한 정보 Mozilla 개발자 네트워크에서 찾을 수 있는 JavaScript의 시간과 날짜에 대한 정보입니다.

날짜 작업 방법을 아는 것은 정기적인 보고서 생성에서 정확한 시간대의 날짜 및 일정 표시에 이르기까지 JavaScript의 많은 일반적인 작업에 중요합니다.

태그:

JavaScript에서 현재 날짜를 얻는 것은 매우 쉽습니다. 이것이 Date 객체의 목적입니다. 구문은 매우 간단하고 메서드 이름은 직관적입니다. 아래 예에서는 Date 객체( 자바스크립트 새 날짜) 현재 연도, 월, 일 및 시간을 가장 가까운 밀리초로 가져옵니다!

현재 날짜 가져오기:

JavaScript에서 현재 날짜를 얻으려면 다음을 사용하십시오. 예어 new를 사용하여 Date 개체의 새 인스턴스를 만듭니다.

var 날짜 = 새로운 날짜(); 콘솔 로그(날짜);

이 코드는 콘솔에 다음 정보를 인쇄합니다.

//2016년 2월 2일 화요일 15:46:56 GMT-0500(동부 표준시)

현재 요일, 현재 월, 일, 연도 및 현재 시간까지 24시간 형식으로 표시합니다. 조각 " 그리니치 표준시"는 GMT 시간을 의미하고 " -0500 ' 는 현지 시간 과 GMT 사이 의 시간대 차이 입니다 .

Wikipedia에서 인용: "그리니치 표준시(GMT) 그리니치 표준시)은 런던 그리니치 왕립 천문대의 평균 태양시입니다." 와 연결되어 있습니다 UTC (UTC). « 동부 표준시표시된 날짜 값의 '는 브라우저 또는 컴퓨터의 시간대를 나타냅니다.

* GMT와 UTC는 다릅니다. 몇 분 안에 UTC 값을 고려할 것입니다.

* 또한 JavaScript의 날짜는 1970년 1월 1일 자정(UTC) 이후 경과된 시간(밀리초)으로 정의됩니다. 하루는 86,400,000밀리초입니다. Date 개체의 범위는 1970년 1월 1일 UTC를 기준으로 -100,000,000일에서 100,000,000일 사이입니다.

* 위에서 언급한 방법을 사용하여 얻은 값은 장치의 시스템 설정에 따라 다릅니다. 컴퓨터의 시계 설정을 변경하면 이 메서드에서 반환되는 시간도 변경됩니다.

좋습니다. 새로운 JavaScript 날짜 형식이 제거되었으며 이제 계속 진행할 준비가 되었습니다!

요일 가져오기:

요일을 얻으려면 메소드를 사용하십시오. 자바스크립트 객체날짜 getDay() :

varday = date.getDay(); 콘솔 로그(일);

*요일은 0에서 6, 일요일 = 0, 월요일 = 1, 화요일 = 2 등으로 번호가 매겨집니다.

월 가져오기:

현재 연도의 현재 월을 가져오려면 getMonth() 메서드를 사용합니다. 그 전에 메소드 이름이 직관적이라고 말씀드렸는데요!

var 월 = date.getMonth(); 콘솔 로그(월); //하나

* 요일과 마찬가지로 월은 0에서 11 사이의 숫자 형식으로 반환됩니다. 1월 = 0, 2월 = 1, 3월 = 2 등.

요일 얻기:

날짜를 얻으려면 GetDate() 메서드를 사용할 수 있습니다.

var dayOfMonth = date.getDate(); 콘솔 로그(dayOfMonth); //2

* GetDate() 메서드는 1에서 31까지의 숫자로 해당 월의 날짜를 반환합니다. 숫자 1은 해당 월의 1일에 해당합니다.

시간 얻기:

현재 시간을 얻으려면 GetTime() 메서드를 사용합니다.

변수 시간 = date.getTime(); 콘솔 로그(시간); //1454461242058

이상해 보이는데... 뭐죠? 1970년 1월 1일 00:00:00 UTC 이후 경과된 밀리초 수를 볼 수 있습니다. 그래서 몇 살입니까?

1454461242058ms / 31540000000ms/년 = 약 46년
1970년 + 46년 = 2016년

다음을 확인하십시오.

var 연도 = date.getFullYear(); console.log(연도) //2016

네, 바로 이것입니다! JavaScript new date를 사용하여 현재 날짜와 시간을 출력합니다.


JavaScript에서 날짜와 시간을 다루기 위해 특별한 객체인 Date가 있습니다. 이 객체는 거의 모든 버전의 JavaScript에서 지원되며 호환성 문제에 관계없이 사용할 수 있습니다.

Date 객체의 날짜와 시간은 명시적으로 저장되지 않지만 대부분의 프로그래밍 언어와 마찬가지로 Unix의 탄생 이후 경과된 밀리초 수로 저장됩니다. 1970년 1월 1일 0000시부터 Date 개체의 특징은 모든 범위 값에 0부터 시작하는 인덱스가 있다는 것입니다. 즉, 1월은 0(월 #0)의 인덱스를 가지며 12월은 12번째 달이 아닌 11번째 달이 됩니다. 요일, 시간, 분 등에 대해서도 마찬가지입니다.

Date 객체를 만드는 것은 매우 간단합니다.

// 현재 날짜-시간 var date = new Date(); // 문자열 또는 숫자의 날짜-시간 var date = new Date(date); // 개별 값의 날짜-시간 var date = new Date(년, 월, 일, 시, 분, 초, 밀리초);

Date 객체에는 다음과 같은 작업을 수행할 수 있는 매우 유용한 여러 메서드가 있습니다. 개별 구성 요소날짜-시간뿐만 아니라 지정된 형식으로 날짜의 정확성과 올바른 출력을 확인합니다.

날짜-시간 구성 요소를 검색하는 방법
getFullYear 연도를 반환합니다(예: 2011).
getYear 연도를 반환합니다. getYear 메소드의 목적은 getFullYear의 목적과 동일하지만 이 방법더 이상 사용되지 않으며 사용하지 않는 것이 좋습니다. 작업 결과는 명확하지 않습니다. 1900년에서 1999년 사이의 날짜 범위에 대해 메서드는 세기의 연도 번호(2자리, 예: 77)를 반환하고 이 범위를 벗어난 날짜의 경우 전체 값은 다음과 같습니다. 반환됨(4자리, 예: 2009).
getMonth 월을 반환합니다.
getDate 월의 일(월의 숫자)을 반환합니다.
getHours 시간을 반환합니다.
getMinutes 분을 반환합니다.
getSeconds 초를 반환합니다.
getMilliseconds 밀리초를 반환합니다.
getDay 요일의 숫자를 반환합니다.
getTime 객체에 저장된 밀리초 오프셋을 반환합니다.
날짜-시간 구성 요소를 변경하는 방법
setFullYear 연도를 설정합니다.
setYear 연도를 설정합니다. setYear 메소드의 목적은 setFullYear의 목적과 유사하지만 이 메소드는 더 이상 사용되지 않으며 더 이상 사용되지 않습니다(getYear 메소드와 마찬가지로).
setMonth 월을 설정합니다.
날짜 설정 월(일)의 날짜를 설정합니다.
setHours 시간을 설정합니다.
setMinutes 분을 설정합니다.
setSeconds 초를 설정합니다.
setMilliseconds 밀리초를 설정합니다.
시간 설정 1970년 1월 1일 00:00:00을 기준으로 밀리초 오프셋을 설정합니다.
서식 지정 및 날짜-시간 출력 기능
toString 날짜 및 시간의 문자열 표현을 반환합니다.
toUTCString UTC 시간으로 변환된 날짜 및 시간의 문자열 표현을 반환합니다. 반환된 문자열의 형식은 모든 인터넷 표준을 따릅니다.
toGMT문자열 GMT(그리니치 표준시)로 변환된 날짜 및 시간의 문자열 표현을 반환합니다. 반환된 문자열의 형식은 모든 인터넷 표준을 따릅니다.
toLocaleString toString과 유사하지만 사용자의 로케일에 따라 형식이 지정된 날짜 및 시간의 문자열 표현을 반환합니다.
toTimeString 시간의 문자열 표현을 반환합니다(문자열에는 시간만 포함됨).
날짜 문자열 날짜의 문자열 표현을 반환합니다(문자열에는 날짜만 포함됨).
toLocaleTimeString toTimeString과 유사하지만 사용자의 로케일에 따라 형식이 지정된 시간의 문자열 표현을 반환합니다.
toLocaleDateString toDateString과 유사하지만 사용자의 로케일에 따라 형식이 지정된 날짜의 문자열 표현을 반환합니다.
추가 기능
getTimezone오프셋 UTC를 기준으로 사용자 컴퓨터의 현지 시간 오프셋을 반환합니다. 오프셋은 분 단위로 반환됩니다.
분석하다 이 함수를 사용하면 문자열로 작성된 날짜-시간의 정확성을 확인할 수 있습니다. 문자열이 정확하면 Date 객체가 즉시 생성됩니다.

Date 개체에는 UTC 날짜 작업을 위한 여러 메서드도 포함되어 있습니다. 이 함수는 이미 고려한 것과 완전히 유사하지만 이름에 "UTC" 접두사를 포함하고 getUTCSeconds, setUTCFullYear 등 "범용" 시간에서만 작동합니다.

날짜 작업의 예를 고려하십시오.

다음은 이 스크립트의 출력입니다.


보시다시피 날짜 표현은 사용된 형식에 따라 크게 다릅니다. 따라서 날짜-시간으로 작업할 때 몇 가지 간단한 규칙을 따라야 합니다.

1. 가능하면 UTC 또는 GMT 형식을 사용합니다. 이는 분산 솔루션(예: 클라이언트 지불 시스템). 공통 참조 시간을 사용하면 (100%는 아니지만) 귀하와 원격 파트너가 수신된 데이터를 동일한 방식으로 해석할 것이라는 보장을 받을 수 있습니다.

2. 현지화된 날짜와 시간을 사용자에게 표시할 때만 사용하는 것이 좋습니다. 다른 모든 경우에는 현지화된 데이터를 거부하는 것이 좋습니다.

3. 여전히 현지 날짜 및 시간을 사용해야 하는 경우 참조 시간(UTC 또는 GMT)에 상대적인 현지 시간 오프셋을 고려하는 것을 잊지 마십시오.

이러한 규칙을 따르면 대부분의 논리적 버그와 결점에서 벗어날 수 있습니다. 즉, 코드를 보다 안정적이고 고품질로 만들 수 있습니다.

안녕하세요 여러분!
나는 종종 통계 데이터로 작업해야 하고 날짜와 관련이 많습니다. 또한 페이지에서 동일한 날짜를 다른 형식으로 사용할 수 있습니다(예: 기계 친화적 및 인간 친화적). 나는 여러분 대부분이 Date 객체를 사용하여 나오는 모든 끔찍한 코드에 대해 꽤 좋은 아이디어를 가지고 있다고 생각합니다.
예를 들어, 현재 날짜를 DD.MM.YYYY 형식으로 가져오려면 다음을 수행해야 합니다.
var d = 새로운 날짜(), fd = d.getDate() + "." + (d.getMonth()+1) + "." + d.getFullYear();
그리고 그런 라인이 많을 때? 자바 스크립트에서 월은 개발할 때뿐만 아니라 0부터 시작한다는 것을 기억하기 쉽습니까? 아니면 백엔드의 거의 모든 곳에서 초가 아니라 밀리초가 있다는 사실입니까? 인기 있는 Moment.js 라이브러리로 몇 가지 문제를 해결할 수 있지만 매우 느리게 작동합니다.
문제의 라이브러리는 이러한 문제를 해결합니다.
관심이 있으시면 이 짧은 리뷰를 읽어보시기 바랍니다.

TempusJS는 Date 객체에 대한 많은 구문 설탕이므로 매우 빠릅니다. 라이브러리 자체의 구문은 매우 간단합니다. 예를 들어 이전 예제는 다음과 같이 작성할 수 있습니다.
var fd = tempus().format("%d.%m.%Y");
이제 속도에 대해. 스포일러에서 Tempus와 Moment의 비교 및 ​​기본 날짜 형식을 볼 수 있습니다(위 참조).

기본 JS, MomentJS 및 TempusJS 비교

현재 날짜 가져오기
기본 JS x 2,175,575 ops/sec ±0.75%(96 실행 샘플링) Moment x 284,864 ops/sec ±0.85%(96 실행 샘플링) Tempus x 2,086,081 ops/sec ±0.73%(97 실행 샘플링)
서식
기본 JS x 1,637,517 ops/sec ±0.61%(100 실행 샘플링) Moment x 8,808 ops/sec ±1.07%(100 실행 샘플링) Tempus x 942,815 ops/sec ±0.68%(94 실행 샘플링)
날짜 자동 감지 및 구문 분석
네이티브 JS x 11,204,316 ops/sec ±0.81%(88 실행 샘플링) Moment x 38,511 ops/sec ±1.41%(95 실행 샘플링) Tempus x 93,973 ops/sec ±1.06%(85 실행 샘플링)
형식별 날짜 구문 분석
Moment x 46.293 ops/sec ±0.63%(100 실행 샘플링) Tempus x 109.947 ops/sec ±0.93%(99 실행 샘플링)
구문 분석 및 유효성 검사
Moment x 44,588 ops/sec ±1.09%(90 실행 샘플링) Tempus x 103,439 ops/sec ±0.90%(94 실행 샘플링)
결과는 내 노트북에서 구글 크롬 30.0.1599.114. 다른 브라우저에서는 결과가 다르지만 비율은 거의 동일하게 유지됩니다.
테스트를 위해 벤치마크.js 라이브러리가 사용되었습니다.
다른 기능에 대한 벤치마크를 볼 수 있습니다.

따라서 이 라이브러리의 장점은 다음과 같이 작성할 수 있습니다.

  • IE6+, 크롬, 파이어폭스, 오페라 지원
  • 콜 체인을 지원합니다.
  • 월은 0 대신 1(기본값)에서 시작할 수 있습니다.
  • 밀리초는 비활성화(기본값) 또는 활성화될 수 있습니다.
  • 빠른 작업(대부분의 경우 브라우저의 기본 Date 개체가 사용되며 구현은 더 빠른 언어로 작성됨).
  • 사용자 정의 형식 및 플러그인 지원
  • 날짜 검증은 매우 빠르며 날짜를 설정하는 함수에만 의존합니다(검증은 값을 입력할 때 이미 수행되고 별도로 계산되지 않기 때문에).
  • 사용자 언어의 다국어 및 자동 감지.

여기서는 일부 기능에 대해서만 설명합니다.

서식 지정 및 구문 분석

따라서 우선 날짜 형식의 또 다른 예입니다. 여기에서도 콜 체인을 사용합니다. 각 값 설정이 끝나면 체인 아래에서 더 사용할 수 있는 TempusDate 개체를 반환합니다. 예시:
템퍼스(). // 가져 오기 새로운 날짜계산((월: -1)). // 한 달씩 감소 format("%d.%m.%Y"); // 문자열로 출력
따라서 우리는 같은 날, 시간 및 초를 얻을 수 있지만 한 달 전입니다. 이것은 지난 달의 보고서를 얻는 데 유용합니다.

다음 예는 날짜 구문 분석입니다.
// 날짜가 "2013-11-18"인 TempusDate 객체를 반환합니다. tempus("11/18/2013"); // 날짜가 "2013-12-12"인 TempusDate 객체를 반환합니다. tempus("2013-12-12", "%Y-%m-%d"));
Tempus는 일부 알려진 형식을 자동으로 감지할 수 있습니다. 또한 특정 형식을 지정할 수 있습니다. 그러면 구문 분석이 더 빨라집니다. 또한 구문 분석이 실패할 경우 반환될 날짜를 설정할 수 있습니다.
// 왜냐하면 "123"이 "%d.%m.%Y" 형식과 일치하지 않으면 // 2013-01-01 날짜를 포함하는 개체가 반환됩니다. tempus("123", "%d.%m.%Y ", 템퍼스());
기본 형식 목록을 볼 수 있습니다

이제 이미 형식이 지정된 날짜의 형식을 변경해 보겠습니다.
// "2013-11-05" tempus("11/05/2013").format("%Y-%m-%d"); // 또는 다음과 같이 // "October, 12" tempus("2013-10-12 12:31:01", "%Y-%m-%d %H:%M:%S").format(" %B, %d");

또한 형식화에 현지화를 사용할 수 있습니다. 기본적으로 사용자의 언어(브라우저에서 가져옴)가 선택되거나 사용 가능한 Tempus 언어 중 사용자의 언어가 없는 경우 기본 언어가 선택됩니다.
// 언어 설정 tempus.lang("ru"); // 표준 사용 형식 // "Nov, 05" tempus(1383609600).format("%B, %d");
이 순간러시아어와 영어의 두 가지 언어만 있으므로 기꺼이 도와드리겠습니다.

확인

날짜 유효성 검사는 다음과 같이 발생합니다.
// 거짓 반환 tempus("08/32/2013", "%d.%m.%Y").valid(); // true를 반환합니다. tempus("00:00 01/01/2012", "%H:%M %d.%m.%Y").valid();

오류가 발생한 경우 값이 false가 아닌 경우 오류가 발생한 필드를 볼 수 있습니다.
// ("년":-5,"월":false,"일":false,"시간":false, // "분":false,"초":false,"밀리초":false) tempus를 반환합니다. (). 연도(-5). // 연도=-5로 설정합니다. 잘못된 오류(); // 오류가 있는 객체 가져오기

기간

때로는 년(예: 나이), 월, 일 등의 수를 가져와야 합니다. 두 날짜 사이. 이렇게 하려면 두 날짜의 차이를 찾아 반환하는 사이 메서드를 사용할 수 있습니다. 원하는 형식("년", "월", "일", "시", "분", "초", "밀리초").
다음은 2013년 11월 1일과 2014년 5월 5일 사이의 월 수를 가져오는 간단한 예입니다.
// 6을 반환합니다. tempus().between(tempus(), "month");
아니면 새해까지 몇 시간이나 남았는지
tempus(). between(tempus(), "시간");
마지막 예에서는 연도만 지정했음을 알 수 있습니다. 값을 배열이나 객체로 설정할 때 누락된 값은
최소한으로 채웠습니다. 상수 목록 최소값, 문서에서 볼 수 있습니다.

또한 calc 함수를 사용하여 날짜를 변경할 수 있습니다.
// 날짜가 2012-01-01인 TempusDate를 반환 tempus().calc((년: 1, 월: -4, 일: -1));

자체 형식

우리는 1에서 12(01에서 12 대신)의 값을 취할 수 있는 자체 형식을 월에 적용합니다.
// 새 형식을 등록합니다. tempus.registerFormat("%q", // 지시문 - %q function(date) ( // 여기에 형식 지정 함수를 지정합니다. 즉, %q를 대체할 항목을 지정합니다. return date.month(); ) , function(value) ( ​​​​// 여기 파싱 함수가 있습니다. var v = Number(value); return (month: (isNaN(v) ? undefined: v) ); ), 1, // 최소 길이 값 2는 , // 최대 길이 "숫자" // 유형); // 테스트 // "01.1.2013"을 반환합니다. tempus((년: 2013, 월: 1, 일: 1)).format("%d.%q.%Y"); // 반환("년":2013,"월":2,"일":10,"시":0,"분":0,"초":0); tempus("10.2.2013", "%d.%q.%Y").get();
등록할 때 일부 매개변수가 별도로 설정되어 있음을 알 수 있습니다. 정규식. 사실 처음에는 있었는데 버리고 나니 속도가 수십배 빨라졌다.
일부 형식을 제거해야 하는 경우 unregisterFormat을 사용하십시오.
tempus.unregisterFormat("%d"); // "%d.01.2013"을 반환하기 때문에 %d 지시문이 더 이상 존재하지 않습니다. tempus.format((년: 2013, 월: 1, 일: 1), "%d.%m.%Y");

게터/세터

year(), month(), day(), hours(), minutes(), seconds(), milliseconds(), dayOfWeek(), utc(), timestamp() 또는 기능을 설정합니다(). 예를 들어:
템퍼스(). // 현재 날짜 연도(1900)를 가져옵니다. // 그대로 두고 연도를 1900으로 설정합니다. jumpYear(); // 윤년인지 확인, 이 경우 false tempus().year(); // 그래서 우리는 현재 연도를 숫자 형식으로 얻습니다.

날짜 생성

여러 가지 방법으로 날짜를 생성할 수 있습니다. 전체 목록매개변수는 문서에 있습니다. 다음은 최소한의 예입니다.
// 반환 ["29.03.2013", "30.03.2013", "31.03.2013", "01.04.2013", "02.04.2013"]; tempus.generate(( dateFrom: "20130329", formatFrom: "%Y.%m.%d", dateTo: "20130402", 마침표: (일: 1), 형식: "%d.%m.%Y" ));
이것은 날짜별로 차트를 표시하고 백엔드에 대한 요청 없이 클라이언트에서 직접 표시 형식을 변경하는 데 유용할 수 있습니다. 날짜는 날짜 자체가 키로 사용되는 배열 또는 객체로 생성될 수 있습니다(예: 달력을 만드는 경우와 같이 이벤트를 날짜에 바인딩해야 할 때 유용합니다). 또한 날짜는 일, 주, 월, 시간, 년 등으로 그룹화할 수 있습니다. 캘린더에도 적용할 수 있습니다.

플러그인

마지막으로 플러그인입니다. 여기서 우리는 임의의 날짜를 생성하기 위해 공장을 확장하고 있습니다. 또한 tempus.classes()에서 찾을 수 있는 TempusDate 클래스가 필요합니다. 다음은 플러그인의 예입니다.
(함수(템퍼스) ( var TempusDate = tempus.classes("TempusDate"); tempus.randomDate = function() ( var date = new TempusDate(); date.year(Math.floor((Math.random())*( tempus.MAX_YEAR - tempus.MIN_YEAR)) + tempus.MIN_YEAR)).month(Math.floor((Math.random()*(tempus.MAX_MONTH - tempus.MIN_MONTH)) + tempus.MIN_MONTH)).day(수학. floor((Math.random()*(date.dayCount() - tempus.MIN_DAY)) + tempus.MIN_DAY)).hours(Math.floor((Math.random()*(tempus.MAX_HOURS - tempus.MIN_HOURS) ) + tempus.MIN_HOURS)).minutes(Math.floor((Math.random()*(tempus.MAX_MINUTES - tempus.MIN_MINUTES)) + tempus.MIN_MINUTES)).seconds(Math.floor((Math.random()) *(tempus.MAX_SECONDS - tempus.MIN_SECONDS)) + tempus.MIN_SECONDS)), 반환 날짜, ), ))(tempus), // 이제 다음과 같은 날짜를 생성할 수 있습니다. var someRandomDate = tempus.randomDate();
이렇게 하면 jQuery + Tempus, Angular + Tempus 등을 이용하여 편리하게 위젯을 작성할 수 있을 것이라고 생각합니다.

출처

github에서 소스 코드를 다운로드하여 설치할 수 있습니다.
https://github.com/crusat/tempus-js/releases
또는 정자를 통해:
$ bower 설치 템퍼스
tempus.js 또는 tempus.min.js 파일 하나만 있으면 됩니다.

나는 희망한다 주어진 라이브러리유용할 것이며 올바른 방향으로 라이브러리를 더욱 발전시키기 위해 무엇이 빠져 있는지 아는 것도 흥미로울 것입니다. 관심을 가져주셔서 감사합니다!
추신 초대 해주셔서 감사합니다!