読者です 読者をやめる 読者になる 読者になる

Date PickerライブラリのFlatpickrを使ってみる

Date PickerライブラリのFlatpickrを使ってみる

https://cosmology233.github.io/sandbox/hatena/2017/01/09/

https://chmln.github.io/flatpickr/

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
  <title>Practice JavaScript</title>
</head>
<body>
  <p>
    <input id="flatpickr" class="flatpickr" type="text"
        placeholder="Select Date.." value="2017-01-09">
  </p>
    
  <script src="https://unpkg.com/flatpickr"></script>
  <script src="./scripts/script.js"></script>
</body>
</html>

scripts/script.js

(function() {
  var elems = getDOMElements();
  var today = new Date();
  var calendar = null;
  
  Flatpickr.l10ns.default.weekdays.shorthand = [
    "日", "月", "火", "水", "木", "金", "土"
  ];
  
  calendar = new Flatpickr(elems.flatpickr, {
    "enableTime": true,
    "defaultDate": today
  });
  
  function getDOMElements() {
    return {
      "flatpickr": document.getElementById("flatpickr")
    };
  }
})();

できること

  • 時間の選択
  • 表示フォーマットの指定
  • 日付の範囲の指定
  • 初期表示日付の指定
  • UTCの使用
  • 表示・非表示トグルボタン、クリアボタンの追加
  • 無効な日付の指定
  • 有効な日付の指定
  • 範囲指定モード
  • 複数指定モード
  • カレンダーを常に表示
  • 週番号の表示
  • 会計年度カレンダー
  • イベントハンドラの設定
  • 操作用API
  • ロケールの設定
  • 各種l10n設定("Sun" => "日" など)