datepicker系ライブラリのflatpickrを使って実装する方法について解説
目次
導入
・CDNの読み込み
<head>タグ内に下記のコードをコピペ
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>・カレンダー表示するinput要素を用意
<body>タグ内の任意の箇所に下記を参考にinputタグを挿入
<input type="text" id="calender">・ライブラリの設定
<body>タグ最下部、もしくはスクリプトファイルにコード記載
<script>
const calender = document.getElementById('calender');
const fp = flatpickr(calender);
</script>・カレンダー表示のデモ
See the Pen Javascript flatpickr sample(datePicker libraly) by Nishinoya-Code (@nishinoya-code) on CodePen.
コメント