pickadate.jsで特定の日付を無効にしようとすると、ひと月先が反映される原因

4526 ワード
pickadate.js カレンダー JavaScript HTML CSS HTML テキストリンク

どうも7noteです。pickadate.jsの日付無効を指定したら、ひと月先に反映される原因

2021/4/17 追記：コメントいただきました。pickadate.js自体の仕様のようです。

ちょっとニッチですが、様々なカレンダーjsがある昨今で「シンプルで高機能」と言われているpickadate.jsというカレンダーがあります。
しかし、問題が発生しました。

「いくつかの指定日をdisable設定したのになぜか効かない問題」
「指定した日よりもちょうど1ヵ月先の日がdisabledされている」

いろいろ試してみたのですが、どうやらこうなっているようです・・・
そうなのです、なぜか、ひと月先の日がdisabledされてしまっているのです。

ソース

・pickadate.js 3.6.2
・jQuery 3.4.1

index.html
<!DOCTYPE html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link id="theme_base" rel="stylesheet" href="./lib/compressed/themes/default.css" />
<link id="theme_date" rel="stylesheet" href="./lib/compressed/themes/default.date.css" />

<script src="./lib/picker.js" charset="utf-8"></script>
<script src="./lib/picker.date.js" charset="utf-8"></script>
<script src="./lib/picker.time.js" charset="utf-8"></script>

<script type="text/javascript">
$(function(){
  $('.datepicker').pickadate({
    disable: [
      [2020, 11, 30],   // なぜか2020/12/30がdisabledになる
      [2020, 11, 31]    // なぜか2020/12/31がdisabledになる 
    ],
  });
});
</script>
</head>
<body>
  <input type="text"  placeholder="日付選択" name="date" class="datepicker" />
</body>
</html>

結果は失敗・・・

余計なものはすべて省き、最新のjqueryとpickadate.jsのファイルを使ってもダメでした。
おそらくもともとのデータで既に不具合があるのではと考えています。

まとめ

まだ解読できていないので、時間のある時に元ファイルを解体して原因を探ってみたいと思います。
ひとまずはややこしいですが、一か月前を指定して対応するしかなさそう。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ