WordPress短期学習プログラム
JavaScript

Javascript

pickadate.js【デートピッカー・タイムピッカー用ライブラリ】

pickadate.jsについて

デートピッカーと言えば、「jQuery UI Datepicker」が有名ですが、
今回は、pickadate.jsというデートピッカー ライブラリについて紹介します。

こちらも、jQueryを利用するプラグインになりますが、
jQuery UI Datepicker」に飽きた方は、こちらを利用されてみてはいかがでしょうか。

また、デートピッカーだけではなく、タイムピッカーも設定できるので、
タイムピッカーをお探しの方にもおすすめです。

 

pickadate.jsの設定方法

まず、pickadate.jsの基本的な設定方法を説明します。

はじめに、こちらより、ライブラリをダウンロードして、サーバ上にアップロードして下さい。

次に、以下を<head>~</head>内に追加して下さい。

<title>pickadate.js デモ</title>
<link rel="stylesheet" href="lib/themes/default.css">
<link rel="stylesheet" href="lib/themes/default.date.css">
<link rel="stylesheet" href="lib/themes/default.time.css">

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="lib/picker.js"></script>
<script src="lib/picker.date.js"></script>
<script src="lib/picker.time.js"></script>
<script src="lib/legacy.js"></script>

<script>
$(function(){
//デートピッカー用スクリプト
$("#datepicker").pickadate();
//タイムピッカー用スクリプト
$("#timepicker").pickatime();
});
</script>

さらに、以下のHTMLを<body>~</body>内に追加して下さい。

<input type="text" id="datepicker">
<input type="text" id="timepicker">

設定はこれだけです。
表示されているテキストボックス内をクリックして、デートピッカーとタイムピッカーが立ち上げれば、
問題なく設定できています。
※もし、タイムピッカーが不要な場合には、「id="timepicker"」のテキストボックスを削除して下さい。

この通りに追加して貰えれば動作すると思いますが、
念の為に、いかにソースをまとめておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>pickadate.js デモ</title>
<link rel="stylesheet" href="lib/themes/default.css">
<link rel="stylesheet" href="lib/themes/default.date.css">
<link rel="stylesheet" href="lib/themes/default.time.css">

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="lib/picker.js"></script>
<script src="lib/picker.date.js"></script>
<script src="lib/picker.time.js"></script>
<script src="lib/legacy.js"></script>
<!-- 日本語化対応 -->
<script src="lib/translations/ja_JP.js"></script>

<script>
$(function(){
//デートピッカー用スクリプト
$("#datepicker").pickadate();
//タイムピッカー用スクリプト
$("#timepicker").pickatime();
});
</script>

</head>
<body>
<input type="text" id="datepicker"><br><br>
<input type="text" id="timepicker">
</body>
</html>

pickadate.js デモ

 

デフォルトCSSをクラシックCSSに更変

pickadate.jsには、クラシック版のCSSも用意されています。

デフォルトのCSSと比べるとかなりシンプルなカレンダーですが、デザインを変更することも可能です。
読み込むCSSを以下に変更するだけなので、設定は簡単です。

<link rel="stylesheet" href="lib/themes/classic.css">
<link rel="stylesheet" href="lib/themes/classic.date.css">
<link rel="stylesheet" href="lib/themes/classic.time.css">

※デフォルトのCSSの読み込み部分は、削除して下さい。

クラシック版 デモ

 

日本語化

デフォルトのままだと英語表記ですが、日本語対応することも可能です。

まず、以下の日本語対応スクリプトを<head>~</head>内に読み込みます。

<script src="lib/translations/ja_JP.js"></script>

さらに、スクリプトを以下の様に変更して、表示フォーマットを設定します。

<script>
$(function(){
//デートピッカー用スクリプト
$("#datepicker").pickadate({
format: "yyyy年mm月dd日"
});
//タイムピッカー用スクリプト
$("#timepicker").pickatime({
format: "HH:i"
});
});
</script>

ソースをまとめると、以下の様になります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>pickadate.js デモ</title>
<link rel="stylesheet" href="lib/themes/default.css">
<link rel="stylesheet" href="lib/themes/default.date.css">
<link rel="stylesheet" href="lib/themes/default.time.css">

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="lib/picker.js"></script>
<script src="lib/picker.date.js"></script>
<script src="lib/picker.time.js"></script>
<script src="lib/legacy.js"></script>

<!-- 日本語化対応 -->
<script src="lib/translations/ja_JP.js"></script>


<script>
$(function(){
//デートピッカー用スクリプト
$("#datepicker").pickadate({
format: "yyyy年mm月dd日"
});
//タイムピッカー用スクリプト
$("#timepicker").pickatime({
format: "HH:i"
});
});
</script>

</head>
<body>
<input type="text" id="datepicker"><br><br>
<input type="text" id="timepicker">
</body>
</html>

日本語化対応版 デモ

 

オプション

こちらのライブラリには、オプションも複数用意されています。

例えば、弊社では、不動産サイトの来店予約フォームを作成することが多いのですが、
定休日に来店されても困りますし、
さらに、営業時間外に来店されても困ります。

その場合には、
disable、interval(時間間隔)、min(選択最小時間)、max(選択最大時間)
というオプションを設定して下さい。

<script>
$(function(){
//デートピッカー用スクリプト
$("#datepicker").pickadate({
format: "yyyy/mm/dd",
disable: [3] //除外する曜日を指定
});
//タイムピッカー用スクリプト
$("#timepicker").pickatime({
format: "HH:i",
interval: 60, //時間間隔(分で指定)
min: [9,00], //最小時間
max: [18,00] //最大時間
});
});
</script>

これで、水曜日は選択できなくなります。
また、9時から18時までを、1時間(60分)間隔で選択できるようになります。
※不動産業者さんは、水曜日定休日が多いです。

デモ

さらに、1年も先の来店を予約されても困りますね。
その場合には、pickadate()に、minとmaxを設定します。

<script>
$(function(){
//デートピッカー用スクリプト
$("#datepicker").pickadate({
format: "yyyy/mm/dd",
disable: [3], //除外する曜日を指定
min: -10,
max: 30
});
//タイムピッカー用スクリプト
$("#timepicker").pickatime({
format: "HH:i",
interval: 60, //時間間隔(分で指定)
min: [9,00], //最小時間
max: [18,00] //最大時間
});
});
</script>

デモ

 

他にもオプションが用意されているのですが、
全て紹介するには数が多いので、以下のページを確認してみて下さい。

[デートピッカー サンプル ]

[タイムピッカー サンプル ]

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

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

内容

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

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

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

ご用意頂くもの

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

などなど、

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

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

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

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

関連記事

  1. JavaScript

    Javascript

    jQuery - $("select") / $('select[name="name属性"]')

    本日ですが、セレクトボックス(プルダウン)を一括で操作したくて、…

  2. JavaScript

    Javascript

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

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

  3. JavaScript

    Javascript

    Google Static Maps API V1の終了

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

  4. JavaScript

    Javascript

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

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

  5. JavaScript

    Javascript

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

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

  6. JavaScript

    Javascript

    ajaxzip2からajaxzip3へ変えてみました!!

    弊社で日頃からお世話になっているライブラリーといえば、ajaxzi…

最近の記事

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