カレンダー生成モジュールであるDatepickerで取得した年月日をリンクのパラメータとして使用する方法をメモします。
前回「Datepickerを日本語で利用する」で基本的な設定方法は説明しているので割愛します。
要件
Datepickerで取得した年月日を年月と日に分割して、以下のリンクを生成します。
分割した年月を「Ymdata」に、日を「Daydata」に代入します。また、当日は選択できない事と選択できる年月日は2022年3月31日までとします。
例）Datepickerで取得した年月日=2021年11月10日
リンク
https://www.sample.com/datepicker.php?Ymdata=202111&Daydata=10
基本的な設定
まず、DatePickerに必要なライブラリjQueryとjQuery UIのJSを読み込みます。
ライブラリ
<script src="jquery-3.4.1.min.js"></script> <script src="jquery-ui.min.js"></script> <script src="datepicker-ja.js"></script>
CSS（headに記述）
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
HTMLを記述する
ソースを記述します。
<body>
<input type="text" id="datepicker" placeholder="年月日を選択してください" readonly>
<input type="submit" id="datesubmit" name="ymd" value="検索する" onClick="calsearch();">
<script src="jquery-3.4.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="datepicker-ja.js"></script>
<script>
//カレンダー制御
$( '#datepicker' ) . datepicker( {
dateFormat: 'yy年mm月dd日',//データフォーマット
minDate: '+1d',//1日先から選択
maxDate: new Date(2022, 03 - 1, 31)//2022年3月31日まで選択
});
function calsearch(){
var url = "https://www.sample.com/";
var ym = document.getElementById("datepicker");
//不要文字列を削除
ym.value = ym.value.replace("年", "");
ym.value = ym.value.replace("月", "");
ym.value = ym.value.replace("日", "");
//下2桁を削除（年月を取得）
ymSlice = ym.value.slice( 0, -2 );
//上6桁を削除（日を取得）
daySlice = ym.value.slice( 6 );
if( document.getElementById('datepicker').value ){
url += "?Ymdata="+ymSlice+"&Daydata="+daySlice;
}
location.href = url;
}
</script>
</body>
カレンダーを制御する
当日は選択できない事と選択できる年月日は2022年3月31日までにしたいので、DatePickerのオプションを以下のように設定します。
dateFormat: 'yy年mm月dd日',//データフォーマット minDate: '+1d',//1日先から選択 maxDate: new Date(2022, 03 - 1, 31)//2022年3月31日まで選択
情報を取得する
選択されたカレンダー年月日情報を取得します。
submitにonClick="calsearch();を記述します。検索ボタンをクリックしたと同時にfunction calsearch()に情報を渡します。
<input type="submit" id="datesubmit" name="ymd" value="検索する" onClick="calsearch();">
function calsearch(){
var ym = document.getElementById("datepicker");
}
不要な文字列を削除し分割する
パラメータに代入する際、年月日は不要なので削除します。また年月と日に分割します。
不要な文字列の削除はreplace関数を使用します。
ym.value = ym.value.replace("年", "");
ym.value = ym.value.replace("月", "");
ym.value = ym.value.replace("日", "");
続いてslice関数を使用して分割します。
//下2桁を削除（年月を取得） ymSlice = ym.value.slice( 0, -2 ); //上6桁を削除（日を取得） daySlice = ym.value.slice( 6 );
リンクのパラメータを生成する
年月が代入されたymSliceと日が代入されたdaySliceをパラメータとして設定します。
url += "?Ymdata="+ymSlice+"&Daydata="+daySlice;
最後にリンク先へ遷移します。
location.href = url;
Datepickerのオプション次第で文字列を削除は不要
今回はDatepickerのフォーマットを年月日にしています。
dateFormat: 'yy年mm月dd日',//データフォーマット
そのため、replace関数で年月日を削除していますが、そもそもdateFormat自体に余計な情報がなければreplaceする必要はありません。
dateFormat: 'yymmdd',//データフォーマット
以上です。
予約なんかで使えそうですね。
デモ用意しました。
