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]-->

この記事を書いている人
株式会社ディープ
名前足立拓也

メールアドレスadachi@deep-deep.jp

関連記事

最近の記事

  1. SEO対策とは
  2. SE(システムエンジニア)
  3. カメラ
  4. アクセス解析
  5. ファイアウォール
  6. 一眼レフカメラ
  7. システム開発用のアイキャッチ
  8. FTPサーバー
  9. システム開発用のアイキャッチ
  10. Warning
PAGE TOP