日付入力でデイトピッカーを使う

こんなデイトピッカーを実装します

動作の様子

実際に触ってみよう！

See the Pen Untitled by may9 (@may9) on CodePen.

使用するライブラリ

🍰 flatpickerを使います。

参考サイト

🍰 flatpickrを使ってみる
🍰 【flatpickr】日本語化の設定
🍰 Flatpickrで日時入力をカレンダー表示にする

HTML、CSS、jQueryの設定

HTML

index.html

<input type="text" name="xxx" class="flatpickr-input" placeholder="2022-10-10 12:00">

CSS

まずはflatpickrで用意されているcssファイルをhead内で読み込みます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

style.css

/*datepicker*/
/* 下記で!importantを所々使っているのは使わなくてもうまくいくかもしれませんので、
不要なら消してしまっても問題なし！ 　*/

input[type="text"], input[type="password"], textarea, select, .flatpickr-mobile {
    width: 100%;
    max-width:275px;
    border: 1px solid #ccc;
    padding: 15px;
    font-size: 16px;
    border-radius: 5px;
    box-shadow: 0px 0px 8px -5px #112D4E;
    color: #000;
    background: #fff;
    appearance: none;
}

/* 日曜日：赤 */
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7n + 1),
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n + 1) {
    color: #DC143C;
}
/* 土曜日：青 */
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7),
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n) {
    color: #0068B7;
}
/* カレンダーの年と月が表示されているところ */
.flatpickr-current-month{
  display:flex!important;
  flex-direction: row-reverse;
  justify-content: center;
}
/* 今日の日付の部分 */
.flatpickr-day.today {
  background: #F9F7F7;
  border-radius: 5px;
  border: none;
}
/* クリックして選択した日付の部分 */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay{
  background: #112D4E!important;
  border-radius: 5px;
  font-weight: bold;
  color: #fff!important;
  border: 1px solid #112D4E!important;
}
.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus{
  background: #b1cae6;
  border-radius: 5px;
}
/* 時間選択部分 */
.numInputWrapper span{
  width:20px!important;
  padding:0 4px!important;
}
.numInputWrapper span.arrowUp:after{
  border-left: 5px solid transparent!important;
  border-right: 5px solid transparent!important;
  border-bottom: 5px solid rgba(57,57,57,0.6)!important;
}
.numInputWrapper span.arrowDown:after{
  border-left: 5px solid transparent!important;
  border-right: 5px solid transparent!important;
  border-top: 5px solid rgba(57,57,57,0.6)!important;
}

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>

general.js

$('.input-calender input').flatpickr({
    'locale': 'ja', // カレンダーを日本語化
    enableTime: true, // 時間機能を使う時はtrue
    dateFormat: 'Y-m-d H:i' // どんなフォーマットで登録するか決められます
});

※データフォーマットは、例えば下記のような感じに色々変更可能です。

dateFormat: 'Y-m-d H:i' // 2022-02-12 23:12
dateFormat: 'Y.n.d(D)' // 2022.2.12(土)

🍰 フォーマットの設定項目一覧（公式サイト）

デイトピッカーの色々

今回はflatpickerを使いましたが、この他にもデイトピッカーライブラリは色々あるみたい。
下記サイトで色々な種類が紹介されていて、「どれにしよっかな〜」ととても参考になりました！色々あるんすね〜♪
🍰 Javascript おすすめのデートピッカー（日付選択ライブラリー）

まとめ

カートシステムで商品登録をするときに、例えば「この商品は期間限定販売だから、その期間を設定する」とか「この商品のセール期間を設定する」とか、そんなことを想定してこのパーツを作っているので、今回は日付と一緒に時間選択も必須ということでflatpickerを使いました。

cssの調整とかまだできそうだし、祝日を色分けしたり定休日を色分けしたりとかもできそうですね！（まだやってないけど）

※突然カートシステムの話出てきた？と思ったかもしれないですが、このパーツは下記の記事「cakePHP4でカートを作ってみる」の制作工程の1つになります。