日付の差分を出すときにFROM TOで-にならないようにしたい

Question

#実現したいこと
じゃらんのカレンダーのようなFROMで指定した日よりも前の日付を選択できないものを製作したいのですがうまくいかなくて困っています。
なるべくjqueryを導入せずに素のjavascriptのみで作成したいのでできればDatepickerなどの外部プラグインではなくinput type=dateの日付からでてくるカレンダーを使いたいと考えています
#発生している問題・エラーメッセージ
特にエラー等は起きておらずコードが機能しない状態です
##概要のソースコード
【index.html】

        <tr>
			<th class="kikanDaimei" style="font-size:18px" height="30;">期&emsp;間</th>
			    <td colspan="3">
                   <input id="dateA" name="DEADLINE01" type="date" value=''> 
                     <b>～</b>
                   <input id="dateB" name="DEADLINE02" type="date" value=''>
                   <b style="font-size:16px" class="NISU">日数</b> 
                    <input id="date3" size="10"name="DEADLINE03"type="text">
                </td>
		</tr>

【javascript】

 　　　　document.querySelector('input[type="date"]').addEventListener('click', function(){
       　　var inputText = document.getElementById('dateA').value
       　　document.getElementById('dateB').min = inputText;
       　})
　　　　　function onblurA(){
	        document.getElementById("dateA").onblur = function(){
	          var date01 = document.getElementById("dateA").value;
	          var date02 = document.getElementById("dateB").value;
	          var diff = getDiff(date01, date02);
	       　　document.getElementById("date3").value = diff;
	   　　　}
	　　　}

	　　　function onblurB(){
	      　document.getElementById("dateB").onblur = function() {
	         var date01 = document.getElementById("dateA").value;
	         var date02 = document.getElementById("dateB").value;
	         var diff = getDiff(date01, date02);
	         document.getElementById("date3").value = diff;
	        }
	      }

	      var getDiff = function(date1Str, date2Str) {
	      　var date1 = new Date(date1Str);
	      　var date2 = new Date(date2Str);
	      　var msDiff = date2.getTime() - date1.getTime();
	       //getTimeメソッドで経過ミリ秒を取得し、２つの日付の差を求める
	      　var daysDiff = Math.floor(msDiff / (1000 * 60 * 60 * 24));
	       //求めた差分（ミリ秒）を日付へ変換
	      　return ++daysDiff; // 差分へ1日分加算して返却  
	      } 
	      onblurA(); 
	      onblurB();

##試したこと

var date = new Date();
document.getElementById('dateA').min = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000).toISOString().split("T")[0];

この方法であれば前日以前の日付を入力できなくなることを確認していますが後から記載できなくなるのはよくなかったのでできませんでした。

　　　　document.querySelector('input[type="date"]').addEventListener('click', function(){
       　var inputText = document.getElementById('dateA').value;
       　document.getElementById('dateB').min = inputText;
       })

addEventListenerを使う方法やgetElementIdを使う方法などいろいろ試しては見ましたがどれも上手くいきませんでした。
動作環境はchromeで、他のIEやFirefoxなどでは使わない前提なのでできれば素のjavascriptでどうにかしたいのですが難しいでしょうか?

追記

google apps scriptのwedアプリ作成で作成しています

Comments

[m.ts10806]

>コードが機能しない
というのはどうなっているのでしょうか。

[tarataia]

デバックでみた時にエラーなどはでないですが、コード自体もなんの効力もない状態です
クリックした時にinput="date" のdateAの値をとってきてdatteBはdateAよりも前の日時がクリックできないような状態にしたいと考えています

[m.ts10806]

tr、tdはなくてもかまわないのでしたら現在のコードから外しておいてもらえたらと。

[m.ts10806]

というかエラー出てますね。
1つ目のdateでUncaught TypeError: Cannot read property 'value' of null
2つ目のdateでUncaught ReferenceError: dateselect is not defined

[tarataia]

すいません
dateselectの部分は
function dateselect(){
var dateControl = document.querySelector('input[type="date"]');
var dateControl =document.getElementById('dateA').value;
document.getElementById('dateB').min = dateControl;
}でgetElementByIdで動くかどうか試していた時のやつを消していませんでした

Answer 1

こんな感じでどうでしょう？

<script>
window.addEventListener('DOMContentLoaded',()=>{
  document.querySelector('#dateA').addEventListener('change',e=>{
    var v1=e.target.value;
    document.querySelector('#dateB').setAttribute("min",v1);
    calc_diff();
  });
  document.querySelector('#dateB').addEventListener('change',e=>{
    var v2=e.target.value;
    document.querySelector('#dateA').setAttribute("max",v2);
    calc_diff();
  });
});
function calc_diff(){
  var v0="";
  var v1=document.querySelector('#dateA').value;
  var v2=document.querySelector('#dateB').value;
  if(v1!=="" && v2!==""){
    var d1=new Date(v1);
    var d2=new Date(v2);
    var d3=d2.getTime()-d1.getTime();
    v0=d3/(60*60*24*1000);
  }
  document.querySelector('#dateC').value=v0;
}
</script>
<input id="dateA" name="DEADLINE01" type="date" value=''> ～
<input id="dateB" name="DEADLINE02" type="date" value=''>
日数:<input id="dateC" type="text">

Comments

[tarataia]

ありがとうございます。考えていた通りの完璧なコードでした。
その上で少しお聞きしたいことがあって('DOMContentLoaded',()=>{と('change',e=>{の()=>とかe=>の部分ってどのような意味があるのでしょうか?
またcalc_diffの部分はonblurA,Bのように差分を求めているという認識で会っているでしょうか?

[yambejp]

> e=>の部分

あまり深い意味はありません(別の書き方でも大丈夫です)
eはイベントでchangeした情報をもっています。
そこから自分自身を参照するときにe.targetを利用します

> calc_diffの部分はonblurA,Bのように差分を求めている

命題で差分を計算する必要がありそうだったので一応つけておきました

[tarataia]

なるほど・・・
targetを使う発想が思いつかなかったです　
ありがとうございました

Answer 2

取り急ぎ

document.querySelector('dateA').value;

セレクターなのでidの場合は#dateA、クラスの場合は.dateAのように指定する必要があります。
ただIDなら画面内に1件しか用意してはいけませんのでgetElementByIdで良いように思いますが。

Comments

[tarataia]

ありがとうございます
ただ質問部分にも記載した通りgetElementbyIdでも試しては見たのですが特に変化はなかったです
とりあえずコード部分は修正させていただきます

[m.ts10806]

ひとまず「うまくいきません」では何も伝わりません。とだけ。
https://teratail.com/help/question-tips#questionTips3-4-1

[tarataia]

返答が遅くなって申し訳ありません
規約をよく読んで次回からの質問時から気を付けたいと思います

[m.ts10806]

規約というより「ガイドライン」ですね。
守らなかったと言って罰せられるわけではないですが、
守ることによって的確で迅速な解決に進むことができる（あと自身の理解も深まる）ので「なるべく守ったほうが円滑に物事が進みますよ」というものです。
もしアドバイスを参考にやってみて解決しなかった場合はそれも「試したこと」として追記して次の試行錯誤につなげていきましょう。

[tarataia]

ご丁寧にありがとうございます。
質問をするにあたって今困っている部分をきちんと整理することは回答していただく方に対しても自分に対しても必要な事だと感じたので意識してみます