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>
デフォルト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>
他にもオプションが用意されているのですが、
全て紹介するには数が多いので、以下のページを確認してみて下さい。
[デートピッカー サンプル ]
[タイムピッカー サンプル ]
