Scroll

「常に新しい技術に目を向けること」
「既存の技術をより深堀りすること」

カテゴリ:Javascript JQuery PHP 未分類
タグ:
公開日:2021/06/29(火)
最終更新日:2021/07/06(火)

Flatpikrを利用してAirbnbのようなカレンダーを作成してみよう

今回は、私が会社の社内システムに導入した、物を貸し借りを管理するシステムに、
Flatpikrという日付カレンダーについてについてお話しします。

導入した理由

◆タブレット端末をメインにしたシステムのため、指で簡単に日付選択できるようにしたかった
◆自由度が高いこと
・カレンダー表示が端末に依存しない表示もできること
・jQueryなどのライブラリ依存せず、単独で動作する(機能の拡充ができる)
◆軽量
◆設定が簡単で、初学者でもおしゃれなカレンダーが作成できること

利用できるブラウザ

ライブラリで動作確認されているのは、Chrome、Firefox、IE10以上、Safari 6以上です。

導入方法

今回は、CDNにキャッシュされているライブラリをブラウザ上で読み込んで使用しましたが、
npm、bower、yarnなどのパッケージ管理ツールを使って、インストールして使用することも可能です。

詳細は【こちら】

日付の無効設定

土日祝日は無効

こちらのサイトを参考にしました【こちら】

特定の日付を非表示

flatpickrプラグインのdisableを利用して日付の非表示を行いました
Javascript

 

本日・明日以降を選択可能にする

今日から選択できるようにしたい!明日から表示できるようにしたいという場合は、
flatpickrのプラグイン機能のmindayやmaxdayを利用します。
今回はmindayのみを利用しました。
◆本日までの日付を非表示にする
Javascript

◆明日までの日付を非表示にする
Javascript

 

期間範囲を選択できるようにする

私は利用しませんでしたが、よりAirbnbらしく見せたいという方は、
日付の範囲を2つの入力可能になります。
HTML

Javascript

 

表示サイズの変更

タブレットで大きな画面でカレンダー選択ができるようにしたかったのですが、
デフォルトのインプット表示が小さいため、cssを追加して表示方法を変更しました。
CSS

 

その他のプラグイン機能

上記で紹介したプラグイン機能以外にも、公式サイトに多くのプラグイン機能があります。
▼公式サイト
https://flatpickr.js.org/plugins/
▼日本語サイト
https://tr.you84815.space/flatpickr/examples.html
https://tr.you84815.space/flatpickr/plugins.html

参考したサイト

この記事を作成する際に、参考にしたサイトをまとめましたのでご確認ください
▼土日祝日を非表示にする
http://cmz.wp.xdomain.jp/archives/1070
▼公式サイト
https://flatpickr.js.org/plugins/
https://tr.you84815.space/flatpickr/examples.html
https://tr.you84815.space/flatpickr/plugins.html
▼その他
https://deep-blog.jp/engineer/12729/

この記事を書いた人:なみちゃん


シェアのご協力をお願いいたします!

カテゴリー

アーカイブ