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>

デモ

 

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

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

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

関連記事

  1. JavaScript

    Javascript

    history.back()

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

  2. JavaScript

    Javascript

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

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

  3. JavaScript

    Javascript

    flatpickr【デートピッカー用ライブラリ】

    flatpickrについて先日、という日付け選択用のデート…

  4. JavaScript

    Javascript

    IE10でLightboxが。。。

    自作の画像ギャラリーが動作しなくなったと報告がありました。&nbs…

  5. JavaScript

    Javascript

    写真の右クリックコピーを禁止!!

    弊社は不動産会社様にホームページを提供する機会が多いのですが、その…

  6. JavaScript

    Javascript

    setInterval()とsetTimeout()

    Javascriptでタイマー設定する時に使用する関数にsetTime…

最近の記事

  1. JavaScript
  2. バージョンアップ
  3. JavaScript
  4. セキュリティー
  5. JavaScript
PAGE TOP