web-dev-qa-db-ja.com

JavaScriptで日付を追加/減算する方法は？

日付ごとにエントリを参照するために、ユーザーがJavaScriptを使用して日付を簡単に追加および削除できるようにしたいと思います。

日付の形式は「mm/dd/yyyy」です。 「次へ」ボタンをクリックできるようにし、日付が「06/01/2012」の場合、「次へ」をクリックすると「06/02/2012」になります。 「前へ」ボタンをクリックすると、「05/31/2012」になります。

うるう年、月の日数などを追跡する必要があります。

何か案は？

AJAXを使用してサーバーから日付を取得するP.Sはオプションではなく、少し遅れており、クライアントが望むユーザーのエクスペリエンスではありません。

javascriptjquerydatejquery-ui-datepicker
67
Click Upvote

コード：

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

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

JSFiddle Demo

役に立つかもしれない余分なもの：

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)

良好なリンク：MDN Date

89
Tats_innit

JavaScriptのDateオブジェクトで時間を追加または減算するには、getTime()およびsetTime()を使用する必要があります。 setDate()およびgetDate()を使用すると、1、30、31か月などの制限に達したときにエラーが発生します。

SetTimeを使用すると、オフセットをミリ秒単位で設定し、Dateオブジェクトに残りを計算させることができます。

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


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

JavaScript Dateオブジェクトがここで役立ちます。

最初のステップは、これらの文字列をDateインスタンスに変換することです。それは簡単です：

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

その後、あらゆる種類の有用な計算を行うことができます。 JavaScriptの日付はle年などを理解します。彼らはexactly86,400秒の理想的な「日」の概念を使用します。その基礎となる値は、エポック（1970年1月1日午前0時）からのミリ秒数です。エポックより前の日付には負の数を指定できます。

DateのMDNページ の詳細。

MomentJS のようなライブラリの使用を検討することもできます。これは、解析、日付の計算、書式設定に役立ちます...

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

ここで試すことができます： http://jsfiddle.net/ZQAHE/

4
thetallone

これが役立つかもしれません

    <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

Javascriptでの日付の操作は、常に少し面倒です。私は常にライブラリを使用することになります。 Moment.jsとXDateはどちらも素晴らしいです。

http://momentjs.com/

http://arshaw.com/xdate/

フィドル：

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

3
benvds

私が好きな方法は、日付オブジェクトがある場合、そのオブジェクトから別の日付オブジェクトを減算して差を取得できることです。日付オブジェクトは、特定の日付からのミリ秒に基づいています。

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

これが日付の減算方法です。今、それらを追加したい場合は？ date1 + date2で​​エラーが発生します。しかし、ミリ秒単位で時間を取得したい場合は、次のように使用できます。

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

0を引くと、日付オブジェクトがミリ秒形式に変わります。

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

これは、数か月から数年にわたって加算/減算するときに確実に機能する唯一のソリューションです。 getDateメソッドとsetDateメソッドをいじり回しすぎて、月/年のシフトを調整しようとして、これを実現しました。

（このスレッドの）decasteljauはすでにこれに答えていますが、そこにある答えの90％がgetDateおよびsetDateアプローチを推奨しているため、このメソッドの有用性を強調したいだけです。

1
Suparna Gharpure

日付を追加するためのこれらの機能はすべて間違っています。日付関数に間違った月を渡しています。問題に関する詳細情報： http://www.domdigger.com/blog/?p=9

1
rozsypal

ネイティブのjavascript Dateオブジェクトを使用して、日付を追跡できます。現在の日付が表示され、カレンダー固有の情報を追跡したり、さまざまなタイムゾーンを管理したりすることもできます。日/時間/秒を追加および減算して、作業している日付を変更したり、新しい日付を計算したりできます。

詳細については、このオブジェクトリファレンスをご覧ください。

日付

お役に立てば幸いです！

1
Logard

私が使用した最高の日付ユーティリティは、いくつかの理由で date-fns です。

  • ネイティブのJavaScript Date形式を使用します。
  • 不変;純粋な関数を使用して構築され、渡されたインスタンスを変更するのではなく、常に新しい日付インスタンスを返します。
  • モジュラー;必要な機能だけをインポートします。

パッケージマネージャー：

"date-fns": "^1.30.1"

コード：

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

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

シンプルで素晴らしい。

0
Matthew Steven Monkan

私が使用しているもの（jqueryが必要です）、私のスクリプトでは私はそれを今日必要としますが、もちろんそれに応じて編集することができます。

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