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短期学習プログラム

関連記事

  1. JavaScript

    Javascript

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

    久しぶりにGoogle Maps APIを利用した案件の対応を行ったん…

  2. JavaScript

    Javascript

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

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

  3. JavaScript

    Javascript

    videoタグを使用する際には、html5mediaもご一緒に!!

    動画をサイト上に載せる場合、HTML5でのコーディングがメインにな…

  4. JavaScript

    Javascript

    history.back()

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

  5. JavaScript
  6. JavaScript

    Javascript

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

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

最近の記事

  1. URLのwwwあり・なしの統一方法
  2. URLのwwwはあり?なし?
  3. SEO(エスイーオー)
  4. 中古ドメイン(Old Domain)について
  5. CakePHP
  6. Technology-Connection-Net
  7. ドメインにハイフンを使うのは日本人だけ?
  8. SSL(HTTPS)
  9. ドメインについて
  10. WP:WordPress(ワードプレス)
PAGE TOP