Wie addiere / subtrahiere ich Daten mit JavaScript?

70

Ich möchte, dass Benutzer Daten einfach mit JavaScript hinzufügen und entfernen können, um ihre Einträge nach Datum zu durchsuchen.

Die Daten haben das Format: "MM / TT / JJJJ". Ich möchte, dass sie auf die Schaltfläche "Weiter" klicken können. Wenn das Datum "06/01/2012" lautet, sollte es beim Klicken auf "Weiter" lauten: "06/02/2012". Wenn sie auf die Schaltfläche "Zurück" klicken, sollte dies "31.05.2012" werden.

Es muss Schaltjahre, Anzahl der Tage im Monat usw. verfolgen.

Irgendwelche Ideen?

PS Die Verwendung von AJAX, um das Datum vom Server abzurufen, ist keine Option, es ist etwas verzögert und nicht die Erfahrung für den Benutzer, die der Client wünscht.

javascript  jquery  date  jquery-ui-datepicker 
— Klicken Sie auf Upvote
quelle
1
wenn Sie Datepicker verwenden. danndateValue = $.datepicker.parseDate("mm/dd/yy", '06/01/2012'); dateValue.setDate(dateValue.getDate()+1);
— Priyank Patel

Antworten:

94

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);
Erweitern Sie das Snippet

Datepicker verwenden:

$("#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();​

JSFiddle Demo

Zusätzliche Dinge, die nützlich sein könnten:

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)

Guter Link: MDN-Datum

— Tats_innit
quelle
Warum ein drittes neues Datum erstellen: var nd = neues Datum (neues Datum)? Das von .setDate angepasste Datumsobjekt newdate ist in Ordnung, nicht wahr?
— CSSian
@ KevinM yep, hängt vom Zweck ab, so dass das ndneue Datum varnur aus Gründen der Klarheit erstellt wurde! :)
— Tats_innit
39

Sie müssen die Zeit in einem Javascript-Datumsobjekt verwenden getTime()und setTime()hinzufügen oder entfernen. Die Verwendung von setDate()und getDate()führt zu Fehlern beim Erreichen der Grenzen der Monate 1, 30, 31 usw.

Mit setTime können Sie einen Versatz in Millisekunden festlegen und das Date-Objekt den Rest abbilden lassen:

var now=new Date();
var yesterdayMs = now.getTime() - 1000*60*60*24*1; // Offset by one day;
now.setTime( yesterdayMs );
— decasteljau
quelle
2
Dies ist die einzige Lösung, die für mich funktioniert hat. Der Date-Konstruktor scheint sich seltsam zu verhalten, wenn eine negative Zahl für den Tagesindex verwendet wird. Ich fand die einzige Möglichkeit, es zu lösen, darin, direkt mit Millisekunden zu arbeiten
— Jack O'Neill
Beste Lösung!. Alle anderen Lösungen, die setDate verwenden, sollten herabgestuft werden ... hätte mir viel Ärger ersparen können ...
— Karl Adler
Das Gleiche gilt. Dies ist die sauberste und zuverlässigste Lösung. Vielen Dank, dass Sie @decasteljau
— GR7
14 
startdate.setDate(startdate.getDate() - daysToSubtract);


startdate.setDate(startdate.getDate() + daysToAdd);
— Romil Kumar Jain
quelle
7

Das JavaScript- DateObjekt kann hier helfen.

Der erste Schritt besteht darin, diese Zeichenfolgen in DateInstanzen zu konvertieren . Das geht ganz einfach:

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

Dann können Sie alle möglichen nützlichen Berechnungen durchführen. JavaScript-Daten verstehen Schaltjahre und so weiter. Sie verwenden ein idealisiertes Konzept des "Tages", das genau 86.400 Sekunden lang ist. Ihr zugrunde liegender Wert ist die Anzahl der Millisekunden seit The Epoch (Mitternacht, 1. Januar 1970); Es kann eine negative Zahl für Daten vor der Epoche sein.

Mehr auf der MDN-Seite unterDate .

Sie können auch eine Bibliothek wie MomentJS verwenden , die beim Parsen, bei der Datumsberechnung, beim Formatieren ... hilft.

— TJ Crowder
quelle
4
Mach dir keine Sorgen mit Datteln. Verwenden Sie einfach moment.js und retten Sie Ihre Haare.
— Valamas
Es ist 2020 und die MomentJS-Entwickler betrachten es jetzt als ein Legacy-Projekt.
— Diomidis Spinellis
1
@DiomidisSpinellis - Hey, aktuelle Nachrichten! :-) (Buchstäblich letzten Monat.) Aber beachte, dass es nirgendwohin geht, sie fügen einfach keine neuen Funktionen hinzu. Sie pflegen es immer noch. Ich habe seit Jahren nicht mehr das Bedürfnis nach einer neuen Funktion gespürt, also ... Wie auch immer, hoffentlich Temporalgeht es in einem guten Tempo voran, aber die API ist immer noch ein (leicht) bewegliches Ziel ...
— TJ Crowder
Einverstanden. Sie müssen kein Schiff springen, wenn Sie MomentJS bereits verwenden, aber ich würde es nicht für ein neues Projekt übernehmen, es sei denn, es besteht ein sehr zwingender Bedarf.
— Diomidis Spinellis
4 
//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);
});

Sie können es hier versuchen: http://jsfiddle.net/ZQAHE/

— der Große
quelle
3

Vielleicht könnte dies helfen

    <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);" />
— Yogi
quelle
3

Das Arbeiten mit Daten in Javascript ist immer ein bisschen mühsam. Am Ende benutze ich immer eine Bibliothek. Moment.js und XDate sind beide großartig:

http://momentjs.com/

http://arshaw.com/xdate/

Geige:

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

.

— benvds
quelle
Ich habe Zeiten gesehen, in denen moment.js eine ungültige Anzahl von Monaten während eines Datumsintervalls (diff) berechnet - beispielsweise zwischen dem 13. Februar 2014 und dem 15. März 2016 - moment.js meldet, dass es 26 Monate gibt Wenn die meisten Sprachen mit integrierten Date- oder DateTime-Klassen dasselbe Intervall wie 25 melden, scheint XDate dieses Intervall jedoch korrekt zu berechnen.
— AndrewPK
2

Wenn Sie ein Datumsobjekt haben, können Sie ein anderes Datumsobjekt davon subtrahieren, um die Differenz zu erhalten. Datumsobjekte basieren auf Millisekunden ab einem bestimmten Datum.

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

So subtrahieren Sie also Daten. Nun, wenn Sie sie hinzufügen möchten? Datum1 + Datum2 gibt einen Fehler aus. Aber wenn ich die Zeit in ms erhalten möchte, kann ich verwenden:

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

Durch Subtrahieren von 0 verwandeln Sie das Datumsobjekt in das Millisekundenformat.

— Jake Rowsell
quelle
2 
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

Dies ist die einzige Lösung, die beim Addieren / Subtrahieren über Monate und Jahre zuverlässig funktioniert. Dies wurde mir klar, nachdem ich viel zu viel Zeit damit verbracht hatte, mich mit den Methoden getDate und setDate zu beschäftigen und zu versuchen, mich an Monats- / Jahresverschiebungen anzupassen.

decasteljau (in diesem Thread) hat dies bereits beantwortet, möchte jedoch nur die Nützlichkeit dieser Methode hervorheben, da 90% der Antworten den Ansatz getDate und setDate empfehlen.

— Suparna Gharpure
quelle
1

Sie können das native Javascript-Date-Objekt verwenden, um die Daten zu verfolgen. Sie erhalten das aktuelle Datum, können kalenderspezifische Informationen verfolgen und sogar verschiedene Zeitzonen verwalten. Sie können Tage / Stunden / Sekunden hinzufügen und entfernen, um das Datum zu ändern, mit dem Sie arbeiten, oder um neue Daten zu berechnen.

Schauen Sie sich diese Objektreferenz an, um mehr zu erfahren:

Datum

Hoffentlich hilft das!

— Logard
quelle
0

Etwas, das ich benutze (jquery benötigt), in meinem Skript brauche ich es für den aktuellen Tag, aber natürlich können Sie es entsprechend bearbeiten.

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

Das beste Datumsprogramm, das ich verwendet habe, ist aus mehreren Gründen date-fns :

  • Verwendet das native JavaScript- DateFormat.
  • Unveränderlich; Erstellt mit reinen Funktionen und gibt immer eine neue Datumsinstanz zurück, anstatt die übergebene zu ändern.
  • Modular; Importieren Sie nur die Funktionen, die Sie benötigen.

Paket-Manager:

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

Einfach und großartig.

— Matthew Steven Monkan
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.