flatpickrを使う時に見るといいもの #DatePicker

flatpickrとは

JavaScriptで作られた軽量な日付ピッカーライブラリで、日付を選択するためのカレンダーを簡単に作成できる。jQueryなどの他のライブラリに依存せずに動作する。

資料

ドキュメント
https://flatpickr.js.org/
日本語訳のドキュメント（公式ではない？）
https://tr.you84815.space/flatpickr/examples.html

使い方

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</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://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.js"></script>
</head>
<body>
  <input class="flatpickr">
  
  <script>
    flatpickr('.flatpickr');
  </script>
</body>
</html>

日本語化

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</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://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
</head>
<body>
  <input class="flatpickr">
  
  <script>
-    flatpickr('.flatpickr');
+    flatpickr('.flatpickr', {
+      locale: "ja"
+    });
  </script>
</body>
</html>

Coming Soon...