jQuery 日時選択ボックスdatetimepicker(xdsoft)

設定

https://xdsoft.net/jqplugins/datetimepicker/
からライブラリをダウンロード
jquery.datetimepicker.full
jquery.datetimepicker
を参照
jquery.min.js
jquery-ui.min.js
も参照

実装

オプション

※HTML
<input type=”text” id=”datetime” readonly=”readonly”>

※JavaScript
<script>
$(function() {

　　$.datetimepicker.setLocale(‘ja’);
　　$(‘#datetime’).datetimepicker({
　　
　　　
　　　　時間選択ボックス非表示
　　　　timepicker : false,
　　　　
　　　　日付フォーマット
　　　　format:’Y/m/d’,
　　　　
　　　　日付選択ボックス非表示
　　　　datepicker:false,
　　　　
　　　　時間フォーマット
　　　　format:’H:i’,
　　　　
　　　　時間選択ボックスに表示する時間
　　　　allowTimes:[“9:00”, “10:00”, “11:00”, “12:00”],
　　　　
　　});

});
</script>

Ajax利用

日付選択ボックスと時間選択ボックスを個別に表示。

日付選択ボックス
文字入力不可
選択可能な日はハイライト表示

時間選択ボックス
文字入力不可
選択可能な日を選択するまでは時間選択不可
選択可能な日の内、選択可能な時間をプログラムで取得する
サーバ側の処理は省略

※HTML
<input type=”text” id=”date” readonly=”readonly””>
<input type=”text” id=”time” readonly=”readonly” disabled=”disabled”>

※JavaScript
<script>
日付
var eventDates = [“2019/6/5″,”2019/6/10″,”2019/6/15″,”2019/6/20″,”2019/6/25″,”2019/6/30”];

PHP等を利用する場合、↑のフォーマット(0埋め無しで日付配列を取得する必要あり)
var eventDates = <?= $eventDates; ?>;

$(function() {
　　$.datetimepicker.setLocale(‘ja’);
　　$(‘#date’).datetimepicker({
　　　　format:’Y/m/d’,
　　　　timepicker : false,
　　　　変数eventDates配列の日付だった場合に背景色を変更
　　　　beforeShowDay:function(date){
　　　　　　var d = date.getFullYear()+”/”+(date.getMonth()+1)+”/”+date.getDate();
　　　　　　for(var i=0; i<eventDates.length; i++){
　　　　　　　　if(eventDates[i] == d ){
　　　　　　　　　　背景色
　　　　　　　　　　return [“xdsoft_highlighted_mint”];
　　　　　　　　}else{
　　　　　　　　　　continue;
　　　　　　　　}
　　　　　　}
　　　　},
　　　　日付選択時イベント
　　　　onChangeDateTime: function(){
　　　　　　var eventTimes = [];
　　　　　　var select = $(‘#date’).val().replace(/\/0/g, “/”);

　　　　　　if ( eventDates.find(item => item === select) ){

　　　　　　　　var date = $(‘#date’).val();

　　　　　　　　var result = $.ajax(
　　　　　　　　　　{
　　　　　　　　　　　　type: “GET”,
　　　　　　　　　　　　contentType: ‘application/json’,
　　　　　　　　　　　　url: サーバーURL,
　　　　　　　　　　　　data:{
　　　　　　　　　　　　　　”date”:$(‘#date’).val()
　　　　　　　　　　　　},
　　　　　　　　　　　　async: false,
　　　　　　　　　　　　success: function(data)
　　　　　　　　　　　　{
　　　　　　　　　　　　　　var json = $.parseJSON(data);
　　　　　　　　　　　　　　var len = json.length;

　　　　　　　　　　　　　　for(var i = 0; i < len; i++) {
　　　　　　　　　　　　　　　　eventTimes.push(json[i].time);
　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　$(“#time”).prop(‘disabled’, false);

　　　　　　　　　　　　　　$(‘#time’).datetimepicker({
　　　　　　　　　　　　　　　　format:’H:i’,
　　　　　　　　　　　　　　　　datepicker:false,
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　Ajaxで取得した時間の配列を設定。↓の様な配列の必要あり
　　　　　　　　　　　　　　　　allowTimes:eventTimes,
　　　　　　　　　　　　　　　　allowTimes: [“9:00”, “10:00”, “11:00”, “12:00”],
　　　　　　　　　　　　　　});
　　　　　　　　　　　　},
　　　　　　　　　　　　error: function(XMLHttpRequest,textStatus,errorThrown)
　　　　　　　　　　　　{
　　　　　　　　　　　　　 Ajax通信失敗処理
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　);

　　　　　　}else{
　　　　　　　　$(“#time”).prop(‘disabled’, true);
　　　　　　}
　　　　}
　　});
});
</script>