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

関連記事

  1. JavaScript

    Javascript

    zoomi.jsでオンマウス時に画像を拡大

    画像にマウスを乗せた時(オンマウス)に拡大画像を表示させたいという依頼…

  2. JavaScript

    Javascript

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

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

  3. JavaScript

    Javascript

    IE10でLightboxが。。。

    自作の画像ギャラリーが動作しなくなったと報告がありました。&nbs…

  4. JavaScript

    Javascript

    「REQUEST_DENIED」というエラーコード...

    GoogleMap APIを利用してマップ表示させたいのですが、&…

  5. JavaScript

    Javascript

    Google Maps API Ver.3 で地図を表示

    久しぶりにGoogleMap APIを利用しようとして、今更なんで…

  6. JavaScript

    Javascript

    setInterval()とsetTimeout()

    Javascriptでタイマー設定する時に使用する関数にsetTime…

最近の記事

  1. JavaScript
  2. バージョンアップ
  3. JavaScript
  4. セキュリティー
  5. JavaScript
PAGE TOP