JavaScript

Javascript

Javascript おすすめのデートピッカー(日付選択ライブラリー)

WEB制作の仕事をしていると、デートピッカー(日付選択用カレンダー)を利用することが良くあります。

一番有名なのは、jQuery UI Datepickerですが、
他にライブラリーが多数存在するので、
正直、どれを使うか迷ってしまいます。

そんな場合には、
私はお客さんに、いくつかの候補から選んで貰うのが一番手っ取り早いと思うので、
この機会に、使えそうなデートピッカーをいくつか集めてみました。

jQuery UI Datepicker

まず、デートピッカーと言えば、jQuery UI Datepickerですね。

jQuery UI Datepicker

デフォルトのカレンダーはシンプルなものですが、
テーマを変えるることで、カラーデザインを変更することも出来ます。

jQueryの拡張ライブラリーということもあり、情報量も多いので、設定するのも、難しくないと思います。

jQuery UI Datepicker デモ

 

Air Datepicker

シンプルなデザインのデートピッカーで、どのようなサイトにも合わせやすいです。

Air Datepicker

日付の範囲を指定することも可能です。
Air Datepicker 範囲指定

Chrome、Firefox、IE 10以上、Safari 8以上、Opera 17以上で動作します。

Air Datepicker デモ

 

flatpickr

こちらも、シンプルな見た目のデートピッカーで、
日付選択だけではなく、タイムピッカー(時間選択用のカレンダー)も追加可能です。

【デートピッカー】
flatpickr デートピッカー
【タイムピッカー】
flatpickr タイムピッカー

Chrome、Firefox、IE 10以上、Safari 6以上で動作します。
IE9でも動作させる場合には、以下を参照して下さい。
https://flatpickr.js.org/ie9/

flatpickr デモ

設置方法の詳細は、以下のページでまとめています。
flatpickr 設置方法

 

pickadate.js

画面下から日付選択用のカレンダーが上がってくる動きのあるカレンダーで、
かっこいいデートピッカーをお探しの方におすすめです。

タイムピッカーも追加可能で、人気のデートピッカーライブラリーになっています。

【デートピッカー】
pickadate.js デートピッカー
【タイムピッカー】
pickadate.js タイムピッカー

モダンブラウザとIE8以上に対応しています。

pickadate.js デモ

設置方法の詳細は、以下のページでまとめています。
pickadate.js 設置方法

 

mdPickers

AngularJSのライブラリーで、こちらも、デートピッカータイムピッカーを実装できます。

【デートピッカー】
mdPickers デートピッカー
【タイムピッカー】
mdPickers タイムピッカー

mdPickers デモ

 

Angular Datepicker

こちらも、AngularJSのデートピッカーです。
Angular Datepicker

シンプルなUIで、使い易いデートピッカーになっています。

Angular Datepicker デモ

 

Bootstrap Material DatePicker

Bootstrapというフレームワーク用に作成されたデートピッカーで、タイムピッカーも実装できます。
因みに、Bootstrapフレームワークが無くても、動作します。

【デートピッカー】
Bootstrap Material DatePicker デートピッカー
【タイムピッカー】
Bootstrap Material DatePicker タイムピッカー

Bootstrap Material DatePicker デモ

ライブラリーは、GitHubからダウンロードできます。

設置方法の詳細は、以下のページでもまとめています。
Bootstrap Material DatePicker 設置方法

弊社では、以下の方に向けて、WordPressの短期学習プログラムを
格安で提供しております。

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

内容

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

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

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

ご用意頂くもの

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

などなど、

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

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

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

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

関連記事

  1. JavaScript

    Javascript

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

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

  2. JavaScript

    Javascript

    Google Static Maps API V1の終了

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

  3. JavaScript

    Javascript

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

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

  4. JavaScript

    Javascript

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

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

  5. JavaScript

    Javascript

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

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

  6. JavaScript

    Javascript

    jQueryのプラグイン「jCanvas」で間取図を作成

    HTML5のCanvasを使ってやりたい事があったので、本日はjQ…

最近の記事

  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