JavaScriptで日付を加減算するには？

JavaScriptを使って、ユーザーが簡単に日付を足したり引いたりできるようにして、エントリーを日付順に閲覧できるようにしたいのです。

日付のフォーマットは"mm/dd/yyyy"です。quot;Next"ボタンをクリックし、日付が" 06/01/2012"であれば、次をクリックすると、それは"06/02/2012"になります。prev'ボタンをクリックすると、"05/31/2012"となります。

うるう年や月の日数などを記録する必要があります。

何かアイデアはありますか？

P.S.サーバーから日付を取得するためにAJAXを使うという選択肢はありません。

Brett DeWoody
編集された質問 23日 7月 2017 в 3:38
プログラミング
javascript jquery date jquery-ui-datepicker
7日 6月 2012 в 11:55
2 ビュー
質問へのコメント (1)
ソリューション

**コード：***

M.A.K. Ripon
編集した答え 8日 10月 2018 в 8:20
解説 (2)

getTime()とsetTime()を使用して、javascript Dateオブジェクトに時間を追加または減算する必要があります。 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 );
解説 (3)
 
startdate.setDate(startdate.getDate() - daysToSubtract);

startdate.setDate(startdate.getDate() + daysToAdd);
解説 (0)

JavaScript 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の日付はうるう年などを理解しています。 彼らは、正確に* 86,400秒の長さの「日」の理想的な概念を使用しています。 それらの基礎となる値は、エポック以降のミリ秒数です(1970年1月1日の真夜中)。エポックの前の日付の負の数になる可能性があります。

DateのMDNページの詳細。

MomentJSのようなライブラリの使用を検討することもできます。これは、解析、日付計算、フォーマットに役立ちます。..

解説 (1)

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

    <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);" />
解説 (0)
//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/。

qant
編集した答え 18日 10月 2013 в 5:11
解説 (0)

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

。

解説 (1)

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

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はエラーを示します。. しかし、msで時間を取得したい場合は、次のことができます。

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を差し引くと、日付オブジェクトがミリ秒形式に変わります。

解説 (0)

javascriptネイティブのDateオブジェクトを使って日付を管理することができます。現在の日付を取得したり、カレンダー固有の情報を記録したり、異なるタイムゾーンを管理したりすることができます。日/時間/秒を足したり引いたりすることで、作業中の日付を変更したり、新しい日付を計算したりすることができます。

詳しくはこのオブジェクトリファレンスをご覧ください：

[日付][1］

お役に立てれば幸いです！

解説 (0)

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

解説 (0)
 
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アプローチを推奨しているため、このメソッドの有用性を強調したいだけです。

解説 (0)

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

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

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

"date-fns ":" ^ 1.30.1 "。

コード:

'date-fns'から{addDays、subDays}をインポートします。

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

シンプルで素晴らしい。

解説 (0)

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

HTML:

Date:<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][1]。

[1]:https://jsfiddle.net/noyot2yq/ "jsfiddle"。

解説 (0)