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>

コメントを残す

メールアドレスが公開されることはありません。