Comment ajouter 30 minutes à un objet Date JavaScript?

785

J'aimerais obtenir un objet Date qui est 30 minutes plus tard qu'un autre objet Date. Comment faire avec JavaScript?

Morgan Cheng
la source
1
J'ai construit un petit script popup de calendrier dans js, son sur Github , peut-être regarder à travers le code pour voir comment l'objet date est interagi avec. Vérifiez également Javascript Kit comme une référence js géniale, en particulier pour l'objet date.
Christian
2
Toutes les réponses ci-dessous qui utilisent une variante de date.setMinutes(date.getMinutes() + ...)ne parviendront pas à franchir les limites de l'heure d'été. Par exemple (en supposant que '2014-03-09' est une limite d'heure d'été): var d = new Date('2014-03-09 01:59:00'), f = new Date(d.getTime()); d.setMinutes(d.getMinutes() + 30); dest maintenant 30 minutes plus tôt, pas plus tard que f.
Spig
1
@Spig: 30 minutes après 1h59 du matin à l'heure d'été, il est 1h29. Il n'y a pas d'erreur. Si vous imprimez fet d, vous verrez l'un dit "GMT-0500" l'autre dit "GMT-0400" (ou quel que soit votre fuseau horaire). De plus, si vous appelez .getTime()les deux fet d, vous verrez que fc'est plus grand que d(c'est-à-dire plus tard).
Kip
1
@Spig: intéressant, l'a essayé sur Firefox et cela a fonctionné. Je pense que cela tombe dans une zone grise dans la spécification de la façon dont getMinutes () devrait fonctionner. 01:89deviendrait 02:29, ce qui n’existe pas le jour où vous vous élancez. Chrome décide que cela devrait être 01:29, FF décide 03:29. La nuit où vous "reculez", les deux navigateurs sautent l'heure de "repli" et avancent de 90 minutes vers 02:29. Voici quelques démos JSFiddle: "spring forward" / "fall back"
Kip
1
Si l'une des réponses ci-dessous répond à votre question, le fonctionnement de ce site, vous "accepterez" la réponse, plus ici: Que dois-je faire lorsque quelqu'un répond à ma question? . Mais seulement si votre question a vraiment été répondue. Sinon, envisagez d'ajouter plus de détails à la question.
Au revoir StackExchange

Réponses:

952

Utilisation d'une bibliothèque

Si vous faites beaucoup de travail sur les dates, vous voudrez peut-être regarder dans les bibliothèques de dates JavaScript comme Datejs ou Moment.js . Par exemple, avec Moment.js, c'est simplement:

var newDateObj = moment(oldDateObj).add(30, 'm').toDate();

Vanilla Javascript

C'est comme la réponse du chaos , mais en une seule ligne:

var newDateObj = new Date(oldDateObj.getTime() + diff*60000);

Quelle diffest la différence en minutes que vous voulez par rapport oldDateObjau temps. Cela peut même être négatif.

Ou comme fonction réutilisable, si vous devez le faire à plusieurs endroits:

function addMinutes(date, minutes) {
    return new Date(date.getTime() + minutes*60000);
}

Et juste au cas où cela ne serait pas évident, la raison pour laquelle nous multiplions les minutes 60000est de convertir les minutes en millisecondes.

Soyez prudent avec Vanilla Javascript. Les dates sont difficiles!

Vous pensez peut-être que vous pouvez ajouter 24 heures à une date pour obtenir la date de demain, non? Faux!

addMinutes(myDate, 60*24); //DO NOT DO THIS

Il s'avère que si l'utilisateur observe l'heure d'été, une journée ne dure pas nécessairement 24 heures. Il y a un jour par an qui ne dure que 23 heures et un jour par an qui dure 25 heures. Par exemple, dans la plupart des États-Unis et du Canada, 24 heures après minuit, le 2 novembre 2014 est toujours le 2 novembre:

const NOV = 10; //because JS months are off by one...
addMinutes(new Date(2014, NOV, 2), 60*24); //In USA, prints 11pm on Nov 2, not 12am Nov 3!

C'est pourquoi utiliser l'une des bibliothèques susmentionnées est un pari plus sûr si vous devez faire beaucoup de travail avec cela.

Voici une version plus générique de cette fonction que j'ai écrite. Je recommanderais toujours d'utiliser une bibliothèque, mais cela peut être excessif / impossible pour votre projet. La syntaxe est modélisée d'après la fonction MySQL DATE_ADD .

/**
 * Adds time to a date. Modelled after MySQL DATE_ADD function.
 * Example: dateAdd(new Date(), 'minute', 30)  //returns 30 minutes from now.
 * https://stackoverflow.com/a/1214753/18511
 * 
 * @param date  Date to start with
 * @param interval  One of: year, quarter, month, week, day, hour, minute, second
 * @param units  Number of units of the given interval to add.
 */
function dateAdd(date, interval, units) {
  if(!(date instanceof Date))
    return undefined;
  var ret = new Date(date); //don't change original date
  var checkRollover = function() { if(ret.getDate() != date.getDate()) ret.setDate(0);};
  switch(String(interval).toLowerCase()) {
    case 'year'   :  ret.setFullYear(ret.getFullYear() + units); checkRollover();  break;
    case 'quarter':  ret.setMonth(ret.getMonth() + 3*units); checkRollover();  break;
    case 'month'  :  ret.setMonth(ret.getMonth() + units); checkRollover();  break;
    case 'week'   :  ret.setDate(ret.getDate() + 7*units);  break;
    case 'day'    :  ret.setDate(ret.getDate() + units);  break;
    case 'hour'   :  ret.setTime(ret.getTime() + units*3600000);  break;
    case 'minute' :  ret.setTime(ret.getTime() + units*60000);  break;
    case 'second' :  ret.setTime(ret.getTime() + units*1000);  break;
    default       :  ret = undefined;  break;
  }
  return ret;
}

Démonstration de jsFiddle .

Kip
la source
14
C'est très puissant; Cela fonctionne pour n'importe quel nombre de minutes même si le nombre était négatif.
Wahid Bitar
3
Pendant quelques secondes, multipliez par 1000 au lieu de 60k.
ashes999
2
La fonction dateAdd () est géniale! Mais il y a une note de moi - sémantiquement, l' unité doit être "minute", "seconde", etc. et l' intervalle doit être le montant (2, 10, 45, ...), et non l'inverse. Sinon, l'idée est bonne.
Vasil Popov
1
Cette réponse ne tient pas compte des reconductions de mois, donc le 31 janvier plus un mois donne 2 ou 3 mars selon qu'il s'agit d'une année bissextile ou non. Les fonctions addMonths et addYears dans la réponse de Jacobi traitent de cela, donc pour moi, c'est une meilleure réponse.
RobG
1
@RobG Bon point. J'ai ajouté un correctif pour cela et j'ai souligné le point "utiliser une bibliothèque si possible".
Kip
238
var d1 = new Date ();
var d2 = new Date ( d1 );
d2.setMinutes ( d1.getMinutes() + 30 );
alert ( d2 );
Jamie
la source
114
@Jamie: Vous n'avez pas besoin de deux Dateobjets. var d = new Date(); d.setMinutes(d.getMinutes() + 30);
Grant Wagner
15
@Grant: J'ai supposé d2 = "Je voudrais obtenir un objet Date" et d1 = "vers un autre objet Date"
Jamie
7
@CKeene, setMinutes & getMinutes font partie du vieux Javascript (bien que datejs fournisse tout un tas d'autres choses).
s29
4
Pour info, cela peut dépasser les limites de l'heure d'été. Démos JSFiddle: "spring forward" / "fall back" (Merci @Spig pour cela)
Kip
@trevorgrayson Si un paramètre que vous spécifiez est en dehors de la plage attendue, setMinutes () tente de mettre à jour les informations de date en conséquence. Par exemple, si vous utilisez 100, les heures seront incrémentées de 1 et 40 seront utilisées pour les minutes.
Mihai Crăiță
156

var oldDateObj = new Date();
var newDateObj = new Date();
newDateObj.setTime(oldDateObj.getTime() + (30 * 60 * 1000));
console.log(newDateObj);

le chaos
la source
3
Notez que setTimeretourne un horodatage numérique en millisecondes, pas un objet date. (Ne pensez pas que vous pouvez faire un
Alan H.
12
var in30Mins = new Date(+new Date() + 1.8e6)est une doublure, mais je ne suis pas sûr que ce soit mieux qu'une doublure. ;-)
RobG
112

var now = new Date();
now.setMinutes(now.getMinutes() + 30); // timestamp
now = new Date(now); // Date object
console.log(now);

Teo Graca
la source
9
J'ai remarqué que j'en ai posté un double. Supprimé et +1 à la place.
Izzy
3
réponse la plus simple à cette question
vijay
Je pense que setMinutesrenvoie l'horodatage, mais nowreste l' Dateobjet, now = new Date(now)est donc obsolète
p.boiko
46

Peut-être quelque chose comme ça?

var d = new Date();
var v = new Date();
v.setMinutes(d.getMinutes()+30);

console.log(v)

Tyler Carter
la source
6
@ Chacha102: Vous n'avez pas besoin de deux Dateobjets. var d = new Date(); d.setMinutes(d.getMinutes() + 30);
Grant Wagner
12
Il voulait deux objets de date. Lisez la question. Un objet Date qui a 30 minutes d'avance sur un autre objet Date.
Tyler Carter
5
Est-ce que cela fonctionne bien s'il passe au-delà de l'heure? Donc, si je l'appelle à 11 h 59, est-ce que ça se passe bien à 12 h 29?
Chris Rae
1
@ChrisRae oui, c'est le cas. If a parameter you specify is outside of the expected range, setMinutes() attempts to update the date information in the Date object accordingly.
fridoo
35

Je crée toujours 7 fonctions, pour travailler avec la date dans JS: addSeconds, addMinutes, addHours, addDays, addWeeks, addMonths, addYears.

Vous pouvez voir un exemple ici: http://jsfiddle.net/tiagoajacobi/YHA8x/

Comment utiliser:

var now = new Date();
console.log(now.addMinutes(30));
console.log(now.addWeeks(3));

Ce sont les fonctions:

        Date.prototype.addSeconds = function(seconds) {
            this.setSeconds(this.getSeconds() + seconds);
            return this;
        };

        Date.prototype.addMinutes = function(minutes) {
            this.setMinutes(this.getMinutes() + minutes);
            return this;
        };

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

        Date.prototype.addDays = function(days) {
            this.setDate(this.getDate() + days);
            return this;
        };

        Date.prototype.addWeeks = function(weeks) {
            this.addDays(weeks*7);
            return this;
        };

        Date.prototype.addMonths = function (months) {
            var dt = this.getDate();

            this.setMonth(this.getMonth() + months);
            var currDt = this.getDate();

            if (dt !== currDt) {  
                this.addDays(-currDt);
            }

            return this;
        };

        Date.prototype.addYears = function(years) {
            var dt = this.getDate();

            this.setFullYear(this.getFullYear() + years);

            var currDt = this.getDate();

            if (dt !== currDt) {  
                this.addDays(-currDt);
            }

            return this;
        };
Jacobi
la source
Quelqu'un peut-il voir un problème avec cette approche?
Le Dembinski
1
utilisez moment.js à la place
Victor Pudeyev
@ TheDembinski - à quels problèmes vous attendez-vous? L'extension des fonctionnalités intégrées n'est généralement pas appréciée, mais je ne vois aucun problème avec Date. Ce serait bien si chaque incrément majeur définissait également ses incréments mineurs (comme le font les méthodes set * ), donc addHours a éventuellement pris des minutes, des secondes et des millisecondes pour que vous puissiez date.addHours(3, 30)ajouter 3 heures et 30 minutes. addYears prendrait des années, des mois et des jours, addMonths prendrait des mois et des jours, addMinutes prendrait des minutes, des secondes, des millisecondes, etc.
RobG
1
Salut @transformer Je ferais quelque chose comme ça. new Date().addHours(4).addMinutes(45);Vous pouvez en appeler autant que vous le souhaitez, car les méthodes renvoient "this" qui est l'objet Date actuel.
Jacobi
1
Salut @transformer, je ne suis pas sûr d'avoir compris votre problème, mais ce sont des fonctions de prototype, vous pouvez les utiliser dans n'importe quel ordre, par exemple: var dt = new Date();alors dt.addMinutes(45); dt.addHours(4);ou même dt.addMinutes(285);ou aussi dt.addMinutes(45).addHours(4);tout fonctionnera. Si vous avez une question avec un exemple de code, pour votre problème postez-le ici, je serai heureux de vous aider.
Jacobi
13

La façon la plus simple de résoudre le problème est de reconnaître qu'en javascript, les dates ne sont que des chiffres. Cela commence 0ou 'Wed Dec 31 1969 18:00:00 GMT-0600 (CST). Chaque 1représente une milliseconde. Vous pouvez ajouter ou soustraire des millisecondes en obtenant la valeur et en instanciant une nouvelle date à l'aide de cette valeur. Vous pouvez le gérer assez facilement avec cet esprit.

const minutesToAdjust = 10;
const millisecondsPerMinute = 60000;
const originalDate = new Date('11/20/2017 10:00 AM');
const modifiedDate1 = new Date(originalDate.valueOf() - (minutesToAdjust * millisecondsPerMinute));
const modifiedDate2 = new Date(originalDate.valueOf() + (minutesToAdjust * millisecondsPerMinute));

console.log(originalDate); // Mon Nov 20 2017 10:00:00 GMT-0600 (CST)
console.log(modifiedDate1); // Mon Nov 20 2017 09:50:00 GMT-0600 (CST)
console.log(modifiedDate2); // Mon Nov 20 2017 10:10:00 GMT-0600 (CST)
tsacodes
la source
10

C'est ce que je fais qui semble assez bien fonctionner:

Date.prototype.addMinutes = function(minutes) {
    var copiedDate = new Date(this.getTime());
    return new Date(copiedDate.getTime() + minutes * 60000);
}

Ensuite, vous pouvez simplement appeler cela comme ceci:

var now = new Date();
console.log(now.addMinutes(50));
Jonathan
la source
2
Vous pourriez juste faire return new Date(this.getTime() + minutes * 60000);, je la date de copie provisoire n'est pas nécessaire. ;-)
RobG
5

Voici la version ES6 :

let getTimeAfter30Mins = () => {
  let timeAfter30Mins = new Date();
  timeAfter30Mins = new Date(timeAfter30Mins.setMinutes(timeAfter30Mins.getMinutes() + 30));
};

Appelez ça comme:

getTimeAfter30Mins();
xameeramir
la source
J'ai des utilisateurs entrant 4:30 h + 2 h 15 / min, comment puis-je laisser les utilisateurs passer des heures et des minutes et l'ajouter à une heure existante.
transformateur
@transformer vous pouvez donner différents champs de saisie pour les heures, les minutes et ainsi de suite en ayant des validations de nombre.
xameeramir
5

Je pense que beaucoup de réponses ici manquent d'un composant créatif, très nécessaire pour les calculs de voyage dans le temps. Je présente ma solution pour une traduction temporelle de 30 minutes.

(jsfiddle ici )

function fluxCapacitor(n) {
    var delta,sigma=0,beta="ge";
    (function(K,z){

        (function(a,b,c){
            beta=beta+"tT";
            switch(b.shift()) {
                case'3':return z('0',a,c,b.shift(),1);
                case'0':return z('3',a,c,b.pop());
                case'5':return z('2',a,c,b[0],1);
                case'1':return z('4',a,c,b.shift());
                case'2':return z('5',a,c,b.pop());
                case'4':return z('1',a,c,b.pop(),1);
            }
        })(K.pop(),K.pop().split(''),K.pop());
    })(n.toString().split(':'),function(b,a,c,b1,gamma){
       delta=[c,b+b1,a];sigma+=gamma?3600000:0; 
       beta=beta+"im";
    });
    beta=beta+"e";
    return new Date (sigma+(new Date( delta.join(':')))[beta]());
}
non synchronisé
la source
Je dois admettre que c'est créatif. Mais l'homme .. C'est difficile à lire!
Erik Baan
2

Pour les paresseux comme moi:

Réponse de Kip (ci-dessus) en coffeescript, utilisant un "enum" et opérant sur le même objet:

Date.UNIT =
  YEAR: 0
  QUARTER: 1
  MONTH: 2
  WEEK: 3
  DAY: 4
  HOUR: 5
  MINUTE: 6
  SECOND: 7
Date::add = (unit, quantity) ->
  switch unit
    when Date.UNIT.YEAR then @setFullYear(@getFullYear() + quantity)
    when Date.UNIT.QUARTER then @setMonth(@getMonth() + (3 * quantity))
    when Date.UNIT.MONTH then @setMonth(@getMonth() + quantity)
    when Date.UNIT.WEEK then @setDate(@getDate() + (7 * quantity))
    when Date.UNIT.DAY then @setDate(@getDate() + quantity)
    when Date.UNIT.HOUR then @setTime(@getTime() + (3600000 * quantity))
    when Date.UNIT.MINUTE then @setTime(@getTime() + (60000 * quantity))
    when Date.UNIT.SECOND then @setTime(@getTime() + (1000 * quantity))
    else throw new Error "Unrecognized unit provided"
  @ # for chaining
Blaskovicz
la source
2

Utilisez une bibliothèque existante connue pour gérer les bizarreries impliquées dans le traitement des calculs de temps. Mon préféré actuel est moment.js .

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script>
 var now = moment(); // get "now"
 console.log(now.toDate()); // show original date
 var thirty = moment(now).add(30,"minutes"); // clone "now" object and add 30 minutes, taking into account weirdness like crossing DST boundries or leap-days, -minutes, -seconds.
 console.log(thirty.toDate()); // show new date
</script>
Ouroborus
la source
3
Les réponses ne peuvent pas s'améliorer si vous dévaluez sans donner de raison.
Ouroborus
L'OP a demandé une solution JavaScript, pas un framework / bibliothèque.
mattpark22
2
@ mattpark22 Bien que je comprenne où vous en êtes, une bibliothèque javascript est toujours javascript. Je pourrais extraire uniquement les éléments pertinents de la bibliothèque et les présenter comme une solution de code. OP aurait une réponse qui serait javascript, dans le sens où vous l'entendez, mais ne serait pas au courant d'une solution à usage général (éventuellement) acceptable. En outre, l'ajout de 30 minutes n'est pas aussi trivial que la plupart des réponses le semblent, car il y a beaucoup de cas marginaux non traités par l'objet Date. Par exemple, la réponse la plus populaire se casse lors du franchissement des limites de l'heure d'été.
Ouroborus
@ Ouroborus - les bibliothèques ne devraient pas être la seule solution fournie si l'OP n'a pas demandé de bibliothèque dans l'OP ou les balises. Sinon, les réponses peuvent devenir juste une litanie de façons de faire quelque chose dans différentes bibliothèques et l'OP n'est pas plus sage à leur problème réel (qui dans ce cas est assez trivial à résoudre).
RobG
1
@RobG Personne ne suggère que seules des solutions de bibliothèque devraient être fournies. OP ne peut pas spécifiquement demander une bibliothèque car cela rendrait la question hors sujet. Demander "Comment faire avec JavaScript?" pourrait être interprété comme spécifiant que cela est spécifique au javascript (demander une solution dans un langage spécifique au lieu de demander une solution de code brut), d'autant plus que ce détail est répété dans le titre et les balises.
Ouroborus
1

Juste une autre option, que j'ai écrite:

Bibliothèque DP_DateExtensions

C'est exagéré si c'est tout le traitement de date dont vous avez besoin, mais il fera ce que vous voulez.

Prend en charge le formatage date / heure, les calculs de date (ajout / soustraction de parties de date), la comparaison de date, l'analyse de la date, etc. Il est généreusement ouvert.

Jim Davis
la source
1

Vous pouvez faire ceci:

let thirtyMinutes = 30 * 60 * 1000; // convert 30 minutes to milliseconds
let date1 = new Date();
let date2 = new Date(date1.getTime() + thirtyMinutes);
console.log(date1);
console.log(date2);

rayalois22
la source
1

Voici mon one-liner:

console.log('time: ', new Date(new Date().valueOf() + 60000))

Jason Mullings
la source
1

Vous devez obtenir la valeur de la date actuelle pour obtenir la date avec (ms) et y ajouter (30 * 60 * 1000). Vous avez maintenant (date actuelle + 30 min) avec ms

console.log('with ms', Date.now() + (30 * 60 * 1000))
console.log('new Date', new Date(Date.now() + (30 * 60 * 1000)))

Abdulrahman Fawzy
la source
0

Je sais que le sujet est bien trop ancien. Mais je suis à peu près sûr qu'il y a des développeurs qui en ont encore besoin, alors j'ai créé ce script simple pour vous. J'espère que ça vous plait!

function strtotime(date, addTime){
  let generatedTime=date.getTime();
  if(addTime.seconds) generatedTime+=1000*addTime.seconds; //check for additional seconds 
  if(addTime.minutes) generatedTime+=1000*60*addTime.minutes;//check for additional minutes 
  if(addTime.hours) generatedTime+=1000*60*60*addTime.hours;//check for additional hours 
  return new Date(generatedTime);
}

let futureDate = strtotime(new Date(), {
    hours: 1, //Adding one hour
    minutes: 45, //Adding fourty five minutes
    seconds: 0 //Adding 0 seconds return to not adding any second so  we can remove it.
});
<button onclick="alert(futureDate)">Travel to the future</button>

Adnane Ar
la source