JavaScript

Javascript

flatpickr【デートピッカー用ライブラリ】

flatpickrについて

先日、[ pickadate.js ]という日付け選択用のデートピッカーを紹介しました。

今回は、flatpickrというデートピッカーについて紹介します。

こちらのライブラリの特徴は、
■設置が簡単
■軽量
■jQueryのようなライブラリ依存せず、単独で動作する
という点です。

ぜひ、試してみて下さい。

因みに、公式サイトのデモページはこちらです。
[ デートピッカー サンプル ]

 

flatpickrの使い方

 

flatpickrの基本的な使い方

まず、flatpickrの基本的な使い方を説明します。

以下を<head>~</head>内に追加して下さい。

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

さらに、以下のJavascriptコードを<head>~</head>内、または、フッター部分(</body></html>の上辺り)に追加して下さい。

<script>
flatpickr("#flatpickr", {});
</script>

で、以下のHTMLを<body>~</body>内に追加して下さい。

<input type="text" id="flatpickr">

設定はこれだけです。

ブラウザから設置先画面にアクセスして、表示されているテキストボックス内をクリックしてみて下さい。
デートピッカーが立ち上げれば、問題なく設定できています。

この通りに追加して貰えれば動作すると思いますが、
念の為に、以下にソースをまとめておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>flatpickr デモ</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
</head>
<body>

<input type="text" id="flatpickr">

<script>
flatpickr("#flatpickr", {});
</script>
</body>
</html>

flatpickr デモ

 

日本語化対応

日本語対応するためのスクリプトも用意されています。
こちらを参考にして下さい。

まず、以下を<head>~</head>内に追加して下さい。

<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>

さらに、Javasriptのコードを以下の様に変更します。

<script>
flatpickr("#flatpickr", {locale:"ja"});
</script>

ソースをまとめると、以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>flatpickr デモ</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/l10n/ja.js"></script>
</head>
<body>

<input type="text" id="flatpickr">

<script>
flatpickr("#flatpickr", {locale:"ja"});
</script>
</body>
</html>

日本語化対応版 デモ

 

当日よりも前の日付を選択不可にする

Javasriptのコードに「minDate:"today"」を追加するだけです。

<script>
flatpickr("#flatpickr", {
locale:"ja",
minDate:"today"
});
</script>

デモ

 

特定の曜日を選択不可にする

土・日は休みたいですね!

そんな場合には、disableを設定します。

<script>
flatpickr("#flatpickr", {
locale:"ja",
disable:[
function(date) {
return (date.getDay() === 6 || date.getDay() === 0);
}
],
minDate:"today"
});
</script>

デモ

 

テーマ(デザイン)の変更

こちらのライブラリには、テーマも複数用意されています。
テーマを変更することで、好みのデザインが見つかるかもしれないので、
それぞれ試してみて下さい。

用意されているテーマは、以下になります。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/default.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/material_blue.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/material_green.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/material_red.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/material_orange.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/airbnb.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/confetti.css">

テーマと言っても、いずれかのCSSを読み込むだけです。

各テーマのデモも用意しておいたので、そちらで確認してみて下さい。

default.css デモ dark.css デモ material_blue.css デモ

material_green.css デモ material_red デモ material_orange デモ

airbnb デモ confetti デモ

 

npm、bower、yarnでライブラリをインストールする方法

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

念の為、そちらの方法もまとめておきます。

■npmからインストール
# npm install flatpickr

■bowerからインストール
# bower install flatpickr-calendar

■yarnからインストール
# yarn add flatpickr

 

サポートしているブラウザ

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

もし、IE9でも動作させる場合には、
以下を<head>~</head>内に追加して下さい。

<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/ie.css">
<![endif]-->

WordPress短期学習プログラム

関連記事

  1. JavaScript

    Javascript

    Geolocation APIを使ってスマホで位置情報取得

    iphoneやAndroidのGPSを利用して位置情報を取得したい場合…

  2. JavaScript

    Javascript

    「jQuery ui Datepicker」の基本的な使い方

    先日フォームの作成依頼があった際に、日付欄はユーザーに直接…

  3. JavaScript

    Javascript

    Geolocation APIの精度ってあまり良くない!?

    先日記事にしたGeolocation API!!精度って良くないの…

  4. JavaScript

    Javascript

    Google Map APIでAPIキーの発行が必須に!!

    久しぶりにGoogle Maps APIを利用した案件の対応を行ったん…

  5. JavaScript

    Javascript

    getPanoramaByLocation()メソッド

    前回の続きで、ストリートビュー未対応地域を想定した…

  6. JavaScript

    Javascript

    Google Static Maps API V1の終了

    かなり前に組んだガラケーサイトでGoogle Mapを表示させていたの…

最近の記事

  1. URLのwwwあり・なしの統一方法
  2. URLのwwwはあり?なし?
  3. SEO(エスイーオー)
  4. 中古ドメイン(Old Domain)について
  5. CakePHP
  6. Technology-Connection-Net
  7. ドメインにハイフンを使うのは日本人だけ?
  8. SSL(HTTPS)
  9. ドメインについて
  10. WP:WordPress(ワードプレス)
PAGE TOP