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の短期学習プログラムを
格安で提供しております。

  • 個人でWordPressを使ったサイト構築をお考えの方
  • 自社でホームページの構築・運用をお考えの方
  • 企業のWEB担当者の方

内容

基本的には、初心者の方を対象にした学習プログラムです。

※ WordPress制作の上級者の方の場合、弊社の学習プログラムはあまり役に立たないと考えています。

  • ・ WordPressのインストールからセッティングの方法
  • ・ WordPressのテーマ選びについて
  • ・ WordPressのプラグイン選びと設定方法について
  • ・ サーバの準備方法
  • ・ ドメインの取得・管理の方法
  • ・ FTPの設定方法
  • など

ご用意頂くもの

  • ・ ノートPC
    ※ 弊社はWindowsを業務で利用しておりますので、できればWindowsのPCをおすすめしています。
  • WordPressでサイトの制作を考えているが、何から始めればいいのか分からない。
  • ドメインやサーバはどうやって準備すればいいの?
  • そもそもホームページの公開には何が必要なの?

などなど、

どのような内容でも構いませんので、お気軽にお問い合わせ下さい。

お客様の目的をお聞きした上で、最適の学習プランを提案致します。

ご興味のある方は、以下の内容を記載の上、一度お問い合わせ下さい。
こちらより、折り返しメールを致します。

  • ① お名前
  • ② 折り返し先のメールアドレス
  • ③ 希望の学習内容

関連記事

  1. JavaScript

    Javascript

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

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

  2. JavaScript

    Javascript

    history.back()

    履歴を残したまま全ページに戻りたい場合、history.back(…

  3. JavaScript

    Javascript

    画像 右クリックでのダウンロードは禁止!!

    普段物件画像を取り扱うシステムを構築することが多いんですが、不動産…

  4. JavaScript

    Javascript

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

    久しぶりにGoogleMap APIを利用した案件の対応を行ったんです…

  5. JavaScript

    Javascript

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

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

  6. JavaScript

    Javascript

    Yahoo!地図のWeb APIを使ってみました!!

    弊社では今までGoogleMapしか使ってこなかったのですが、使用…

最近の記事

  1. WordPress(WP)
  2. 404 Not Found
  3. WordPress(WP)
  4. WordPress(WP)
  5. PHP
  6. PHP
  7. 風邪予防
  8. WordPress(WP)
  9. PHP
  10. 宅建
PAGE TOP