JavaScript Date 객체에 시간을 추가 하시겠습니까?


399

JavaScript의 Date 객체가 어떤 종류의 추가 기능도 구현하지 않는다는 것이 놀랍습니다.

나는 단순히 이것을 할 수있는 기능을 원한다.

var now = Date.now();
var fourHoursLater = now.addHours(4);

function Date.prototype.addHours(h) {

   // how do I implement this?  

}

나는 한 방향으로 약간의 포인터를 원합니다.

  • 문자열 구문 분석을 수행해야합니까?

  • setTime을 사용할 수 있습니까?

  • 밀리 초는 어떻습니까?

이처럼 :

new Date(milliseconds + 4*3600*1000 /*4 hrs in ms*/)?  

이것은 실제로 해킹처럼 보이지만 작동합니까?

답변:


423

JavaScript 자체에는 끔찍한 날짜 / 시간 API가 있습니다. 그럼에도 불구하고 순수한 JavaScript 로이 작업을 수행 할 수 있습니다.

Date.prototype.addHours = function(h) {
  this.setTime(this.getTime() + (h*60*60*1000));
  return this;
}

매력처럼 작동합니다! 감사합니다
moreirapontocom

만약 당신이 다음 날로 넘어가도록 한 시간을 추가했다고한다면,이 시간을 잡아서 모든 것을 적절하게 증가시킬까요 (일월 연도)?
cdoern

@cdoern getTime ()이 밀리 초를 반환하고 더 많은 밀리 초를 추가하기 때문에 그렇게 할 것이라고 생각합니다
The1993

370
Date.prototype.addHours= function(h){
    this.setHours(this.getHours()+h);
    return this;
}

테스트:

alert(new Date().addHours(4));

25
나는 이것이 작동하지 않는다고 생각합니다. 예를 들어 23 시간이 지나서 무언가를 테스트합니까? Jason Harwig의 대답은 나를 위해 떠오른 것입니다.
Domenic

11
Javascript에서 객체 프로토 타입에 항목을 추가하는 것은 좋지 않으며 Domenic이 맞습니다. 작동하지 않습니다. 아래의 Jason Harwig 솔루션이 더 좋습니다.
iKode

19
@Domenic 이것은 Firefox 10, Chrome 21 및 IE 8/9의 JavaScript 콘솔에서 테스트 된 23:00에서 잘 작동합니다. 테스트에 사용한 코드는 다음과 같습니다. var date = new Date(2012, 10, 22, 23, 0, 1); date.toString(); // Thu Nov 22 2012 23:00:01 GMT+0100 (CET) date.setHours(date.getHours() + 1); date.toString(); // Fri Nov 23 2012 00:00:01 GMT+0100 (CET) setMinutes ()에서도 작동합니다.
tanguy_k

4
이 솔루션에 문제가 발생했습니다-DST 전환 지점에서 1 씩 증가하지 못했습니다 (시계를 한 시간 앞으로 이동).
andrewb

2
또한 이것에 물렸다 .setHours (getHours-1)을 사용하여 몇 시간을 반복했다. 이제 첫 DST 시간에 무한 루프가된다. 결과를 확인하십시오!
cfstras

165

아래 코드는 날짜에 4 시간을 추가하는 것입니다 (예 : 오늘 날짜)

var today = new Date();
today.setHours(today.getHours() + 4);

4에서 23을 추가하려고하면 오류가 발생하지 않습니다 ( 문서 참조 ).

지정한 매개 변수가 예상 범위를 벗어나면 setHours ()는 Date 객체의 날짜 정보를 그에 따라 업데이트하려고 시도합니다.


나는 이것을 보지 못하고 중복 답을했다. 나는이 방법을 좋아한다. 정확하고 유용합니다.
Gandalf the White

시간이 소수 (하지의 정수) 일 때이 나던 제대로 작동
gregmagdits

3
이것은 가장 좋은 대답입니다 ... Date 프로토 타입에 "addHours"를 추가하는 것은 걱정 스럽습니다. JS가 해당 기능에 대한 지원을 추가 할 수 있고 충돌하는 프로토 타입이 있기 때문입니다. 이것은 거의 많은 코드를 사용하는 기능을 제공합니다.
Kris Boyd

놀랐지 만 실제로 필요한 경우 며칠, 몇
달씩

4
시간 값> 23을 사용해도 문제가 해결되지는 않지만 일광 절약 시간제 경계에서 끊어집니다 . 고장이 나면 사용할 이유가 없습니다. setTime또는 선호합니다 setUTCHour.
Mark Amery

40

매개 변수를 변경하지 않고 Date 객체의 복사본을 반환하여 addHours 메서드를 변경 불가능하게 만드는 것이 좋습니다.

Date.prototype.addHours= function(h){
    var copiedDate = new Date(this.getTime());
    copiedDate.setHours(copiedDate.getHours()+h);
    return copiedDate;
}

이렇게하면 상태에 대해 걱정하지 않고 많은 메소드 호출을 연결할 수 있습니다.


이 함수는 여기에 언급 된 것과 같은 문제가 있습니다. stackoverflow.com/questions/1050720/… 실제로 특정 브라우저에서 작동하는지 여부는 아니지만 Javascript를 사용하는 다른 장소에서는이를 문제로 간주합니다. 이 솔루션과 솔루션을 결합하는 stackoverflow.com/a/1050782/295535 가 최고의 솔루션 인 것 같습니다
Ressu

1
단어 add*는 일반적으로 객체 자체를 변경하는 데 사용 되므로 함수 이름 변경을 고려해야 합니다.
mr5

@ mr5-확실하지 않으며 add.NET 프레임 워크 DateTime클래스에서 많이 사용 +되며 Math 의 (플러스) 와 동일한 의미를 갖습니다 .
Tahir Hassan

1
currentDate.addHours(1)<-내 프로그래밍 본능에서 currentDate값이 변경 될 것으로 예상 하지만 구현에서는 그렇지 않습니다. 내가 왜 이름을 바꾸거나 서명을 바꾸라고 제안하는지에 관해서
mr5

1
@TahirHassan은 기술적 세부 사항과 관련이 없지만 기능 이름에 사용할 올바른 단어를 선택합니다. 이 함수 앞에 접두사를 붙이면 여전히 변경 가능한 버전을 선호합니다add
mr5

23

kennebec이 제안한 버전은 DST로 또는 그로부터 변경 될 때 실패합니다. 설정 한 시간 번호이기 때문입니다.

this.setUTCHours(this.getUTCHours()+h);

시간 시스템 특성 hthis무관하게 시간을 추가 합니다. Jason Harwig의 방법도 효과적입니다.


19

momentjs http://momentjs.com/ Library를 사용할 수 있습니다 .

var moment = require('moment');
foo = new moment(something).add(10, 'm').toDate();

7

또한 원본 객체를 수정해서는 안된다고 생각합니다. 따라서 미래의 인력을 절약하기 위해 Jason HarwigTahir Hasan의 답변을 기반으로 한 통합 솔루션이 있습니다 .

Date.prototype.addHours= function(h){
    var copiedDate = new Date();
    copiedDate.setTime(this.getTime() + (h*60*60*1000)); 
    return copiedDate;
}


4

아직 정의되지 않았는지 확인하고, 그렇지 않으면 날짜 프로토 타입에서 정의하십시오.

if (!Date.prototype.addHours) {
    Date.prototype.addHours = function(h) {
        this.setHours(this.getHours() + h);
        return this;
    };
}

3

이것을 처리하는 또 다른 방법은 날짜를 유닉스 타임 (에포크)으로 변환 한 다음 (밀리 초)에 해당하는 것을 추가 한 다음 다시 변환하는 것입니다. 이 방법으로 21에 4 시간을 추가하는 것과 같이 일과 월 전환을 처리 할 수 ​​있으며, 그 결과 다음 날 01:00이됩니다.


네 말이 맞지만 몇 년 늦었 어. Jason Harwig의 답변 은 2 년 전에이 방법을 보여주었습니다. 이 답변은 새로운 것을 추가하지 않습니다.
Mark Amery

3

자바 스크립트에서 간단한 추가 / 빼기 시간 / 분 기능을 사용하려면 다음을 시도하십시오.

function getTime (addHour, addMin){
    addHour = (addHour?addHour:0);
    addMin = (addMin?addMin:0);
    var time = new Date(new Date().getTime());
    var AM = true;
    var ndble = 0;
    var hours, newHour, overHour, newMin, overMin;
    //change form 24 to 12 hour clock
    if(time.getHours() >= 13){
        hours = time.getHours() - 12;
        AM = (hours>=12?true:false);
    }else{
        hours = time.getHours();
        AM = (hours>=12?false:true);
    }
    //get the current minutes
    var minutes = time.getMinutes();
    // set minute
    if((minutes+addMin) >= 60 || (minutes+addMin)<0){
        overMin = (minutes+addMin)%60;
        overHour = Math.floor((minutes+addMin-Math.abs(overMin))/60);
        if(overMin<0){
            overMin = overMin+60;
            overHour = overHour-Math.floor(overMin/60);
        }
        newMin = String((overMin<10?'0':'')+overMin);
        addHour = addHour+overHour;
    }else{
        newMin = minutes+addMin;
        newMin = String((newMin<10?'0':'')+newMin);
    }
    //set hour
    if(( hours+addHour>=13 )||( hours+addHour<=0 )){
        overHour = (hours+addHour)%12;
        ndble = Math.floor(Math.abs((hours+addHour)/12));
        if(overHour<=0){
            newHour = overHour+12;
            if(overHour == 0){
                ndble++;
            }
        }else{
            if(overHour ==0 ){
                newHour = 12;
                ndble++;
            }else{
                ndble++;
                newHour = overHour;
            }
        }
        newHour = (newHour<10?'0':'')+String(newHour);
        AM = ((ndble+1)%2===0)?AM:!AM;
    }else{
        AM = (hours+addHour==12?!AM:AM);
        newHour = String((Number(hours)+addHour<10?'0':'')+(hours+addHour));
    }
    var am = (AM)?'AM':'PM';
    return new Array(newHour, newMin, am);
};

현재 시간을 얻기 위해 매개 변수없이 사용할 수 있습니다

getTime();

또는 분 / 시간이 추가 된 시간을 얻기위한 매개 변수

getTime(1,30); // adds 1.5 hours to current time
getTime(2);    // adds 2 hours to current time
getTime(0,120); // same as above

부정적인 시간조차도

getTime(-1, -30); // subtracts 1.5 hours from current time

이 함수는

array([Hour], [Minute], [Meridian])

함수의이 56- 라인 몬스터 는 최고 투표 응답에서 2- 라인 접근법에 비해 어떤 이점이 있습니까? 내가 볼 수있는 이점이 없기 때문에 여기에 엄청난 추가 복잡성이 있기 때문에 -1입니다.
Mark Amery

1

SPRBRN이 정확합니다. 월과 연도의 시작 / 끝을 설명하려면 Epoch로 변환 한 후 다시 변환해야합니다.

그렇게하는 방법은 다음과 같습니다.

var milliseconds = 0;          //amount of time from current date/time
var sec = 0;                   //(+): future
var min = 0;                   //(-): past
var hours = 2;
var days = 0;

var startDate = new Date();     //start date in local time (we'll use current time as an example)

var time = startDate.getTime(); //convert to milliseconds since epoch

//add time difference
var newTime = time + milliseconds + (1000*sec) + (1000*60*min) + (1000*60*60*hrs) + (1000*60*60*24)

var newDate = new Date(newTime);//convert back to date; in this example: 2 hours from right now


또는 한 줄로 수행하십시오 (여기서 변수 이름은 위와 동일 함).

var newDate = 
    new Date(startDate.getTime() + millisecond + 
        1000 * (sec + 60 * (min + 60 * (hours + 24 * days))));

0

이것은 증가 또는 감소 된 데이터 값을 얻는 쉬운 방법입니다.

const date = new Date()
const inc = 1000 * 60 * 60 // an hour
const dec = (1000 * 60 * 60) * -1 // an hour

const _date = new Date(date)
return new Date( _date.getTime() + inc )
return new Date( _date.getTime() + dec )

-1

조금 지저분하지만 작동합니다!

다음과 같은 날짜 형식이 제공됩니다 : 2019-04-03T15 : 58

  //Get the start date.
  var start = $("#start_date").val();
  //Split the date and time.
  var startarray = start.split("T");
  var date = startarray[0];
  var time = startarray[1];

  //Split the hours and minutes.
  var timearray = time.split(":");

  var hour = timearray[0];
  var minute = timearray[1];
  //Add an hour to the hour.
  hour++;
  //$("#end_date").val = start;
  $("#end_date").val(""+date+"T"+hour+":"+minute+"");

출력은 다음과 같습니다 .2019-04-03T16 : 58

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