web-dev-qa-db-fra.com

Comment ajouter/soustraire des dates avec JavaScript?

Je veux permettre aux utilisateurs d'ajouter et de soustraire facilement des dates à l'aide de JavaScript afin de parcourir leurs entrées par date.

Les dates sont au format: "mm/jj/aaaa". Je veux qu'ils puissent cliquer sur un bouton "Suivant", et si la date est "06/01/2012", alors en cliquant sur Suivant, il devrait devenir: "06/02/2012". S'ils cliquent sur le bouton 'prev', il deviendra «31/05/2012».

Il doit suivre les années bissextiles, le nombre de jours dans le mois, etc.

Des idées?

P.S utilisant AJAX pour obtenir la date du serveur n'est pas une option, c'est un peu lent et pas l'expérience que le client veut pour l'utilisateur.

javascriptjquerydatejquery-ui-datepicker
66
Click Upvote

Code:

var date = new Date('2011', '01', '02');
alert('the original date is ' + date);
var newdate = new Date(date);

newdate.setDate(newdate.getDate() - 7); // minus the date

var nd = new Date(newdate);
alert('the new date is ' + nd);

Utilisation de Datepicker:

$("#in").datepicker({
    minDate: 0,
    onSelect: function(dateText, inst) {
       var actualDate = new Date(dateText);
       var newDate = new Date(actualDate.getFullYear(), actualDate.getMonth(), actualDate.getDate()+1);
        $('#out').datepicker('option', 'minDate', newDate );
    }
});

$("#out").datepicker();​

Démo JSFiddle

Des trucs supplémentaires qui pourraient vous être utiles:

getDate()   Returns the day of the month (from 1-31)
getDay()    Returns the day of the week (from 0-6)
getFullYear()   Returns the year (four digits)
getHours()  Returns the hour (from 0-23)
getMilliseconds()   Returns the milliseconds (from 0-999)
getMinutes()    Returns the minutes (from 0-59)
getMonth()  Returns the month (from 0-11)
getSeconds()    Returns the seconds (from 0-59)

Bon lien:Date MDN

88
Tats_innit

Vous devez utiliser getTime() et setTime() pour ajouter ou soustraire l'heure dans un objet Date javascript. Utiliser setDate() et getDate() entraînera des erreurs lorsque les limites des mois 1, 30, 31, etc. sont atteintes.

Utiliser setTime vous permet de définir un décalage en millisecondes et de laisser l'objet Date calculer le reste:

var now=new Date();
var yesterdayMs = now.getTime() - 1000*60*60*24*1; // Offset by one day;
now.setTime( yesterdayMs );
36
decasteljau
startdate.setDate(startdate.getDate() - daysToSubtract);


startdate.setDate(startdate.getDate() + daysToAdd);
15
Romil Kumar Jain

L'objet JavaScript Date peut aider ici.

La première étape consiste à convertir ces chaînes en instances Date. C'est facile à faire:

var str = "06/07/2012"; // E.g., "mm/dd/yyyy";
var dt = new Date(parseInt(str.substring(6), 10),        // Year
                  parseInt(str.substring(0, 2), 10) - 1, // Month (0-11)
                  parseInt(str.substring(3, 5), 10));    // Day

Ensuite, vous pouvez faire toutes sortes de calculs utiles. Les dates JavaScript comprennent les années bissextiles et autres. Ils utilisent un concept idéalisé de "jour" qui dure exactement 86 400 secondes. Leur valeur sous-jacente est le nombre de millisecondes écoulées depuis The Epoch (minuit, 1er janvier 1970); ce peut être un nombre négatif pour les dates antérieures à The Epoch.

Plus d’informations sur la page MDN sur Date .

Vous pouvez également envisager d'utiliser une bibliothèque telle que MomentJS , qui vous aidera à analyser, à calculer les dates, à mettre en forme, etc.

7
T.J. Crowder
//In order to get yesterday's date in mm/dd/yyyy.


function gimmeYesterday(toAdd) {
            if (!toAdd || toAdd == '' || isNaN(toAdd)) return;
            var d = new Date();
            d.setDate(d.getDate() - parseInt(toAdd));
var yesterDAY = (d.getMonth() +1) + "/" + d.getDate() + "/" + d.getFullYear();
$("#endDate").html(yesterDAY);
        }
$(document).ready(function() {
gimmeYesterday(1);
});

vous pouvez essayer ici: http://jsfiddle.net/ZQAHE/

4
thetallone

Peut-être cela pourrait aider

    <script type="text/javascript" language="javascript">
        function AddDays(toAdd) {
            if (!toAdd || toAdd == '' || isNaN(toAdd)) return;
            var d = new Date();
            d.setDate(d.getDate() + parseInt(toAdd));

            document.getElementById("result").innerHTML = d.getDate() + "/" + d.getMonth() + "/" + d.getFullYear();
        }

function SubtractDays(toAdd) {
            if (!toAdd || toAdd == '' || isNaN(toAdd)) return;
            var d = new Date();
            d.setDate(d.getDate() - parseInt(toAdd));

            document.getElementById("result").innerHTML = d.getDate() + "/" + d.getMonth() + "/" + d.getFullYear();
        }
    </script>
    ---------------------- UI ---------------
        <div id="result">
        </div>
        <input type="text" value="0" onkeyup="AddDays(this.value);" />
        <input type="text" value="0" onkeyup="SubtractDays(this.value);" />
4
yogi

Travailler avec des dates en javascript est toujours un peu compliqué. Je finis toujours par utiliser une bibliothèque. Moment.js et XDate sont excellents:

http://momentjs.com/

http://arshaw.com/xdate/

Violon:

http://jsfiddle.net/39fWa/

var $output = $('#output'),
    tomorrow = moment().add('days', 1);

$('<pre />').appendTo($output).text(tomorrow);

tomorrow = new XDate().addDays(-1);

$('<pre />').appendTo($output).text(tomorrow);

Le plus grand centre commercial

3
benvds

La manière que j’aime, c’est que si vous avez un objet de date, vous pouvez lui en soustraire un autre pour obtenir la différence. Les objets de date sont basés sur des millisecondes à partir d'une date donnée. 

var date1 = new Date(2015, 02, 18); // "18/03/2015", month is 0-index
var date2 = new Date(2015, 02, 20); // "20/03/2015"

var msDiff = date2 - date1; // 172800000, this is time in milliseconds
var daysDiff = msDiff / 1000 / 60 / 60 / 24; // 2 days

Voici comment vous soustrayez les dates. Maintenant si vous voulez les ajouter? date1 + date2 donne une erreur .. Mais si je veux obtenir l'heure en ms, je peux utiliser:

var dateMs = date1 - 0;
// say I want to add 5 days I can use
var days = 5;
var msToAdd = days * 24 * 60 * 60 * 1000; 
var newDate = new Date(dateMs + msToAdd);

En soustrayant 0, vous convertissez l'objet de date au format millisecondes. 

2
Jake Rowsell
var date = new Date('your date string here'); // e.g. '2017-11-21'

var newdate = new Date(date.getTime() + 24*60*60*1000 * days) // days is the number of days you want to shift the date by

C’est la seule solution qui fonctionne de manière fiable lors de l’addition/soustraction sur plusieurs mois et années. Nous avons réalisé cela après avoir passé beaucoup trop de temps à bricoler avec les méthodes getDate et setDate, en essayant de nous ajuster aux changements de mois/année.

decasteljau (dans ce fil) a déjà répondu à cette question, mais je tiens simplement à souligner l'utilité de cette méthode, car 90% des réponses recommandent les méthodes getDate et setDate.

1
Suparna Gharpure

Toutes ces fonctions pour l'ajout de date sont fausses. Vous passez le mauvais mois à la fonction Date. Plus d'informations sur le problème: http://www.domdigger.com/blog/?p=9

1
rozsypal

Vous pouvez utiliser l’objet Date javascript natif pour suivre les dates. Il vous donnera la date actuelle, vous permet de garder une trace des éléments spécifiques du calendrier et même de vous aider à gérer différents fuseaux horaires. Vous pouvez ajouter et soustraire des jours/heures/secondes pour modifier la date à laquelle vous travaillez ou calculer de nouvelles dates.

jetez un oeil à cette référence d'objet pour en savoir plus:

Rendez-vous amoureux

J'espère que cela pourra aider!

1
Logard

Le meilleur utilitaire de date que j'ai utilisé est date-fns pour plusieurs raisons:

  • Utilise le format JavaScript Date natif.
  • Immuable; construit en utilisant des fonctions pures et retourne toujours une nouvelle instance de date au lieu de changer celle passée.
  • Modulaire; importer uniquement les fonctions dont vous avez besoin.

Directeur chargé d'emballage:

"date-fns": "^1.30.1"

Code:

import { addDays, subDays } from 'date-fns'

let today = new Date()
let yesterday = subDays(today, 1)
let tomorrow = addDays(today, 1)

Simple et génial.

0
Matthew Steven Monkan

Quelque chose que j'utilise (jquery needed), dans mon script, j'en ai besoin pour le jour actuel, mais vous pouvez bien sûr le modifier en conséquence.

HTML:

<label>Date:</label><input name="date" id="dateChange" type="date"/>
<input id="SubtractDay" type="button" value="-" />
<input id="AddDay" type="button" value="+" />

JavaScript:

    var counter = 0;

$("#SubtractDay").click(function() {
    counter--;
    var today = new Date();
    today.setDate(today.getDate() + counter);
    var formattedDate = new Date(today);
    var d = ("0" + formattedDate.getDate()).slice(-2);
    var m = ("0" + (formattedDate.getMonth() + 1)).slice(-2);
    var y = formattedDate.getFullYear();
    $("#dateChange").val(d + "/" + m + "/" + y);
});
$("#AddDay").click(function() {
    counter++;
    var today = new Date();
    today.setDate(today.getDate() + counter);
    var formattedDate = new Date(today);
    var d = ("0" + formattedDate.getDate()).slice(-2);
    var m = ("0" + (formattedDate.getMonth() + 1)).slice(-2);
    var y = formattedDate.getFullYear();
    $("#dateChange").val(d + "/" + m + "/" + y);
});

jsfiddle

0
user4029967