[HTML][jQuery]2つの日付から差分を自動的に表示させる

Question

前提・実現したいこと

カレンダーから日付を選んで、2つの日付の差分を自動的に表示させたい

発生している問題・エラーメッセージ

[HTML]id=returnDate　部分に日数が表示されない

該当のソースコード

[HTML]
       <tr>
        <th class="bottom" colspan="2">
          <label for="start">開始日<span class="red">*</span></label>
        </th>
        <td>
          <p>
            <input id="FromDate" type="date" name="FromDate" required="1" size="30">
          </p>
        </td>
      </tr>
      <tr>
        <th class="bottom" colspan="2">
          <label for="end">終了日<span class="red">*</span></label>
        </th>
        <td>
          <p>
            <input id="ToDate" type="date" name="ToDate" required="1" size="30">
          </p>
        </td>
      </tr>
      <tr>
        <th class="bottom" colspan="2">
          <label>日数</label>
        </th>
        <td>
          <span id="returnDate"></span>
        </td>
      </tr>

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

[jQuery①]

jQuery(function($) {
	$('#FromDate').change(function(event)
	{
		setDate();
	});
	$('#ToDate').change(function(event)
	{
		setDate();
	});
	function setDate(){
		var fromDate = new Date($('#FromDate').val() );
		var toDate = new Date($('#ToDate').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]);
			$('#ToDate').val(yyyymmdd);
		}
		var days = Math.floor((toDate.getTime() - fromDate.getTime()) / 86400000);
		if (days>=1){
			$('#returnDate').html(' （'+days+'）');
		}else{
			$('#returnDate').html('');
		}
	}
});

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

[jQuery②]

jQuery(function($) {
	jQuery(document).on('blur', '#FromDate, #ToDate', function(){
		var date1 = document.getElementById("FromDate").value;
		var date2 = document.getElementById("ToDate").value;
		var diff = getDiff(date1, date2);
		jQuery("#returnDate").val(diff);
	});
});

/*
 *日付の差分日数を返却します。
 */
function getDiff(date1Str, date2Str) {
	var date1 = new Date(date1Str);
	var date2 = new Date(date2Str);

	// getTimeメソッドで経過ミリ秒を取得し、２つの日付の差を求める
	var msDiff = date2.getTime() - date1.getTime();

	// 求めた差分（ミリ秒）を日付へ変換します（経過ミリ秒÷(1000ミリ秒×60秒×60分×24時間)。端数切り捨て）
	var daysDiff = Math.floor(msDiff / (1000 * 60 * 60 *24));

	// 差分へ1日分加算して返却します
	return ++daysDiff;　　→ $('#returnDate').text(++daysDiff);　で実装できたがNaNと最初に表示される。
}

試したこと

Google検索で同じような事例をいくつか試してみました。
type=textではなくtype=dateで表示させたいです。
①の方法でも②の方法でもいいのですが、なぜ表示されないのかがわからないです。
教えていただけますと幸いです。よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

私の環境ではjQuery②の方は表示されませんでしたが、jQuery①の方で(5)などが表示され正しく動作しているようです。

①の方にテストで1文追加してみて

jQuery(function($) {
		$('#returnDate').html('test');//テスト用に追加

returnDate部分へ正しく書き込みできてるかデバッグしてみてはどうでしょうか。

Comments

[Miraii]

ご回答ありがとうございました！
こちらテストで試してみたところ、表示されず
HTMLで読み込めてないことがわかりました。

修正した後、testが表示されることを確認し
②の最後を「return ++daysDiff;」→「$('#returnDate').text(++daysDiff);」
上記のようにすることで日数の表示ができました。

しかし、最初にNaNと表示されてしまうのですが
こちらの理由はわかりますでしょうか？
合わせて教えていただけますと幸いです。
よろしくお願いいたします。

[webgoto]

一方の入力が空文字の状態でgetDiffを実行しているため日の計算でエラーが起きています。
getDiff関数に入力の判定を追加し、いづれかの入力が空の場合、空文字を返すようにすると良いと思います。

function getDiff(date1Str, date2Str) {
if(!date1Str || !date2Str) return ''; //追加

[Miraii]

おっしゃる通りでした。
ご回答ありがとうございました。
上記の追加でNaN非表示にできました！

ちなみになのですが
2つの日付を入力した後、自動的に表示させるようにすることはできますか？
今の状態ですと、どこかをクリックしないと差分の日数が表示されないようになっています。
教えていただけますと幸いです。よろしくお願いいたします。

[webgoto]

jQuery(document).on('blur', '#FromDate, #ToDate', function(){
↓
jQuery(document).on('input', '#FromDate, #ToDate', function(){

でそのようになるかと思います。

[Miraii]

上記のコードで自動化できました！
全てにご回答いただき、ありがとうございました????‍♀️