日付フォームの差分計算についてのメモ。もっと上手いやり方があるかもしれません。
作ったきっかけ
弊社で運営している自動見積書発行システム「マイ見積」で、ホームページ上で期間設定できたら便利だろう、ということで、フォームに日付（開始日と終了日）を設定できるようにしました。
html部分
html5 の、input type="date"機能を使いました。以下のようなhtmlです。
<input type="date" id="Dates1_start" name="Dates1_start" value="2019-11-16" min="2019-11-16" max="2020-01-10" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
モダンなブラウザなら、カレンダー表示して日付を選べるようになっています。
日付の差分計算
原始的な方法ですが、「日付をマイクロ秒に変換して、86400000で割る」で実装しました。
var Dates1_start = new Date( Dates1_startval );
var Dates1_end = new Date( Dates1_endval );
var Dates1_day = Math.floor((Dates1_end - Dates1_start + 86400000)/86400000);
86400000を足しているのは、開始日と終了日が同じだった場合に日数を1にしたいからです。
サンプルページ
実際に動いている例は、広告掲載期間設定して見積書発行をごらんください。