WordPress短期学習プログラム
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の短期学習プログラムを
格安(15,000円~)で提供しております。

  • 個人でWordPressを使ったサイト(個人ブログやアフィリエイトサイトなど)構築をお考えの方
  • WordPressを使って副業で稼ぎたい方
  • フリーランスでWordPressを使ったお仕事をお考えの方
  • 自社でホームページの構築・運用をお考えの方
  • 企業のWEB担当者の方

内容

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

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

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

ご用意頂くもの

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

などなど、

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

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

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

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

関連記事

  1. GoogleMap(グーグルマップ)

    Javascript

    Google Map APIを使うのは止めました!

    Google Map(グーグル マップ)は、APIキー無し、無…

  2. JavaScript

    Javascript

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

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

  3. JavaScript

    Javascript

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

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

  4. JavaScript

    Javascript

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

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

  5. JavaScript

    Javascript

    getPanoramaByLocation()メソッド

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

  6. JavaScript

    Javascript

    Yahoo!地図にコントロール追加

    Web APIを使って、Yahoo!地図にいくつかのコントロールを…

最近の記事

  1. SEO(エスイーオー)
  2. WordPressプラグイン「Anti-spam」
  3. システムエラー
  4. PHP(ピー・エイチ・ピー)
  5. SONY 広角レンズ「SEL1018」
  6. PHP(ピー・エイチ・ピー)
  7. 俺流塩ラーメン
  8. SEO(エスイーオー)
  9. Linux(リナックス)
  10. Linux(リナックス)
PAGE TOP