JavaScriptでの日付チェックの方法

Question

前提・実現したいこと

Javascript 日付のチェック

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

JavaScript初心者です。

入力フォームで日付の入力があった場合、システム日付と入力日付が
システム日付　＜　入力日付
の場合,submitボタンを押したときにエラーメッセージを表示したいです。
何も入力しない場合はエラーを表示しません。

日付の入力はdatepickerなのですが2018-06-01というように入力フォームに入ります。
エラーチェックの仕方が分かりません
みなさまのお力をお貸しください・・・

Comments

[x_x]

datepickerと言っても多くの実装がありますので、どのライブラリを使っているか書いてもらえないでしょうか？

[mori.]

Vuetifyです。v-time-pickerをつかっています。

[x_x]

datepickerでは？ それは名前に反してdatepickerを兼ねているのでしょうか？

[mori.]

すみませんv-date-pickerです！

Answer 1

HTMLInputElement#valueAsDate

https://html.spec.whatwg.org/multipage/input.html#htmlinputelement

if (new Date < input.valueAsDate) {
  console.error('invalid value');
}

Re: mrn さん

Answer 2

現状のままライブラリ追加をしないなら$.datepicker.parseDateを使って以下のようにすることで比較はできます。

$(function() {
  $('#datepicker').datepicker({
    dateFormat: "yy-mm-dd",
    showOn: "button",
    buttonText: "カレンダー",
    onSelect: function(selected_date) {
      $('#display').val(selected_date);
      var selected = $.datepicker.parseDate('yy-mm-dd', selected_date);
      selected = truncateTime(selected);

      var today = new Date();
      today = truncateTime(today);
      console.dir(today);
      console.dir(selected);
      if (today < selected) {
        $('#check').text('システム日付　＜　入力日付');
      } else {
        $('#check').text('入力日付 ＜ システム日付');
      }
    }
  });
});


function truncateTime(date) {
  date.setHours(0);
  date.setMinutes(0);
  date.setSeconds(0);
  date.setMilliseconds(0);

  return date;
}

日付に関してのライブラリとしてはMoment.js使うと日付変換の部分はこんな感じになるかと思います

var selected = moment(selected_date, "YYYY-MM-DD").startOf('day'); 
var today= moment().startOf('day');

Moment.js公式サイト

Answer 3

たとえばpatternと組み合わせてこんな感じで

<script>
var sys_date="2018-06-01";
document.addEventListener('submit',function(e){
  var t=e.target;
  [].forEach.call(t.querySelectorAll(".date"),function(x){
    if(x.value!=="" && x.value>sys_date){
      alert("too big");
      e.preventDefault();
    }
  });
});
</script>
<form>
システム日付：2018-06-01<br>
<input type="text" name="d1" class="date" value="" pattern="\d{4}-\d{2}-\d{2}" placeholder="YYYY-MM-DD"><br>
<input type="text" name="d2" class="date" value="" pattern="\d{4}-\d{2}-\d{2}" placeholder="YYYY-MM-DD"><br>
<input type="submit" value="go">
</form>

Answer 4

簡単にするなら、'-' を抜いて数値比較すればいいんでは

Comments

[mori.]

たしかに・・・とおもい、やってみました。ありがとうございます！