Flatpickrを使用して日付選択のウィジェットを追加したい
山崎講師Flatpickrは、JavaScriptで書かれた軽量な日付と時刻の選択ライブラリです。
<html>
<head>
<meta charset="utf-8" />
<title>flatpickr.html</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://npmcdn.com/flatpickr/dist/l10n/ja.js"></script>
</head>
<body>
<input type="text" id="datepicker" />
<script>
flatpickr("#datepicker", {
// 様々なオプションを指定可能
locale: "ja",
dateFormat: "Y-m-d",
minDate: "today",
});
</script>
</body>
</html>
Flatpickrのオプションは以下の通りです。
altFormat: インプットフィールドに表示される日付のフォーマットを指定します。
altInput: 別のインプットフィールドを指定し、日付を表示するために使用します。
appendTo: カレンダー要素を追加する要素を指定します。
dateFormat: インプットフィールドに入力された日付のフォーマットを指定します。上記は"Y-m-d"を指定しています。
defaultDate: 初期に選択される日付を指定します。
disable: 使用を禁止する日付を指定するための関数または配列を指定します。
enable: 使用可能な日付を指定するための関数または配列を指定します。
enableTime: 時刻の選択を有効にするかどうかを指定します。
locale: ローカライズされたテキストを提供するために使用する言語オブジェクトを指定します。日本は"ja"です。
maxDate: 選択できる最大の日付を指定します。
minDate: 選択できる最小の日付を指定します。上記例では"today"となっており、昨日以前のデータは選択できません。
mode: カレンダーの表示モードを指定します（"single"、"multiple"、"range"など）。
nextArrow: 次の月または年に移動するためのカスタム矢印を指定します。
prevArrow: 前の月または年に移動するためのカスタム矢印を指定します。
onChange: 日付が変更されたときに呼び出されるコールバック関数を指定します。
onClose: カレンダーが閉じられたときに呼び出されるコールバック関数を指定します。
onOpen: カレンダーが表示されたときに呼び出されるコールバック関数を指定します。
onReady: Flatpickrが初期化されたときに呼び出されるコールバック関数を指定します。
shorthandCurrentMonth: カレンダーのヘッダーに表示される現在の月の省略形を使用するかどうかを指定します。
showMonths: 同時に表示する月の数を指定します。
time_24hr: 24時間形式を使用するかどうかを指定します。
weekNumbers: 週番号を表示するかどうかを指定します。
