[JQuery] input要素のdateタイプの値を計算する

たとえば、こんなふうに2つのdateタイプのinput要素があって、その期間を計算する方法です。

<form>
	<input type="date" name="date-start" value="" id="date-start" >
	<input type="date" name="date-end" value="" id="date-end" >
</form>
<span id="days"></span>

<form>

</form>

JQueryのスクリプトはこんな感じ。
setDate関数を作って、その中で計算しています。

<script>
jQuery(function($) {
	$('#date-start').change(function(event)
	{
		setDate();
	});
	$('#date-end').change(function(event)
	{
		setDate();
	});
	function setDate(){
		var fromDate = new Date($('#date-start').val() );
		var toDate = new Date($('#date-end').val() );
		if (!toDate.getDate() || fromDate.getDate()>toDate.getDate()){
			var year = fromDate.getFullYear().toString();
			var mm = (fromDate.getMonth() + 1).toString();
			var dd = fromDate.getDate().toString();
			var yyyymmdd = year + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + (dd[1]?dd:"0"+dd[0]);
			$('#date-end').val(yyyymmdd);
		}
		var days = Math.floor((toDate.getTime() - fromDate.getTime()) / 86400000);
		if (days>=1){
			$('#days').html(' （'+days+'泊）');
		}else{
			$('#days').html('');
		}
	}
});
</script>

jQuery(function($) {

$('#date-start').change(function(event)

{

setDate();

});

$('#date-end').change(function(event)

{

setDate();

});

function setDate(){

var fromDate = new Date($('#date-start').val() );

var toDate = new Date($('#date-end').val() );

if (!toDate.getDate() || fromDate.getDate()>toDate.getDate()){

var year = fromDate.getFullYear().toString();

var mm = (fromDate.getMonth() + 1).toString();

var dd = fromDate.getDate().toString();

var yyyymmdd = year + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + (dd[1]?dd:"0"+dd[0]);

$('#date-end').val(yyyymmdd);

}

var days = Math.floor((toDate.getTime() - fromDate.getTime()) / 86400000);

if (days>=1){

$('#days').html(' （'+days+'泊）');

}else{

$('#days').html('');

}

});

</script>

日付のフォーマットは、こちらが参考になりました。
http://stackoverflow.com/questions/3066586/get-string-in-yyyymmdd-format-from-js-date-object

この部分です。

	var year = fromDate.getFullYear().toString();
	var mm = (fromDate.getMonth() + 1).toString();
	var dd = fromDate.getDate().toString();
	var yyyymmdd = year + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + (dd[1]?dd:"0"+dd[0]);
	$('#date-end').val(yyyymmdd);

var year = fromDate.getFullYear().toString();

var mm = (fromDate.getMonth() + 1).toString();

var dd = fromDate.getDate().toString();

var yyyymmdd = year + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + (dd[1]?dd:"0"+dd[0]);

$('#date-end').val(yyyymmdd);

dateタイプのvalueを設定するには、2016-04-04のようなフォーマットでなければいけないようで、そのためのフォーマティングをここでやってます。
jQuery UI を使えば、もっとシンプルにできるようですが、ここでは使わない前提で。

日付の計算は簡単で、getTimeで取得した数値を引き算してるだけです。

	var days = Math.floor((toDate.getTime() - fromDate.getTime()) / 86400000);

1	var days = Math.floor((toDate.getTime() - fromDate.getTime()) / 86400000);

getTimeで取得できるのは、1970/01/01 00:00:00から経過したミリ秒なので、60*60*24*1000 = 86400000 で割って、小数点以下は、Math.floorで切り捨て。