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>
他にもオプションが用意されているのですが、
全て紹介するには数が多いので、以下のページを確認してみて下さい。
[デートピッカー サンプル ]
[タイムピッカー サンプル ]
大変参考になりました。ありがとうございます！
一つ質問させていただきたいです。
デートピッカーのdisable: []の部分で日曜日は全部店休日+隔週の曜日のみ店休日のような場合はどういう処理で書けばよいでしょうか？（月曜日の1,3,5週のみ店休日など）
よろしければご回答おねがいいたします。
よろしくお願いいたします。