【jQuery】セレクトボックスから取得した日付を現在と比較する

はじめに

セレクトボックスから日付を取得し、現在の日付と比較していきます。

参考文献

「jQueryのchange()で値が変更されたら発動」
https://www.flatflag.nir87.com/change-1761
「どうしても「今日の0時」が欲しかった」
https://qiita.com/Bong/items/dc632edb6fe3d44f2d5b

現在の日付の取得方法

まずは現在の日付を取得します。

JavaScript

  var current_date = new Date(); //現在時刻の取得
  current_date.setHours(0, 0, 0, 0);  //時間を00:00:00にする
  console.log(current_date); // => Mon Jan 27 2020 00:00:00 GMT+0900 (日本標準時)

今回セレクトボックスでは、時間を入力する項目がなく、00:00:00で入力されてしまうため
イコールのパターンを再現するために時間を00:00:00にします。

セレクトボックスからの日付取得

最初に年・月・日の３つのセレクトボックスを作成し、各々にidを設定していきましょう。

erb

<div class="form-select-date">
  <%= form.select :date, (1930..Time.now.year).to_a, {selected: hoge}, {id: "year"} %>
  <%= form.select :date, (1..12).to_a, {selected: hoge}, {id: "month"} %>
  <%= form.select :date, (1..31).to_a, {selected: hoge}, {id: "day"} %>
</div>

次に、JavaScriptの方でセレクトボックスから値を取得し、現在の日付と比較します。
試しに今回は、現在日時と同じ数値を入力してみます。

JavaScript

$('.form-select-date').change(function() {   //セレクトボックスを切り替えるたびにvalue値を出力
    var year = $("#year").val();  // year = 2020
    var month = $("#month").val();  // month = 1
    var day = $("#day").val(); // day = 27
    var input_dates  = new Date(year, month, day);
    console.log(input_dates); // => Thu Feb 27 2020 00:00:00 GMT+0900 (日本標準時)

2020年1月27日と入力したはずなのに、2月27日と出力されてしまいますね。。
JavaScriptでは、月が0~11となっているため、1 => Febと出力されます。
つまり、-1をしてあげないと正しい値にならないということです。

修正方法

new Dateの引数部分を以下のように変更してあげましょう！

Javascript

 //(中略)
 var input_dates  = new Date(year, month-1, day); //月を-1する
 console.log(input_dates); // => Mon Jan 27 2020 00:00:00 GMT+0900 (日本標準時)

これで入力された値を正しく取得することが出来ます！

比較

現在日時と入力された日時を比較していきます。

Javascript

    if (input_dates > current_date) {
      console.log("未来です");
    } else if (input_dates < current_date) {
      console.log("過去です");
    } else {
      console.log("今日です");   // "今日です"が出力される
    }});

これで現在の日付と、セレクトボックスで入力された日付が比較出来ました！

最後に

月の入力した値がずれたり、JavaScriptの日付の扱いはクセがあるので
日付を扱う際には、注意していこうと思います。