jsonのdatepickerの特定の日ですか？

Question

私は特定の日に予約フォームを持っていると私はあなたが私の日付ピッカーをクリックした場合は、

が表示されます、私の特定の日色付けので、私のquesitonは、私は私の特定の

var firstDate = ['2017-06-15']; 
 
var lastDate = ['2017-12-20']; 
 
var availabledays = ['2017-06-15', '2017-06-16', '2017-06-23', '2017-06-30', ]; 
 
var booked = ['2017-06-16', '2017-06-23', '2017-06-24', '2017-06-25']; 
 
var ssdays = [];

のための配列リストを使用しています

が、私は dates.json

以下のようにJSONファイルを作成した理由ですJSONを使用する必要があります10

と私の質問は、サーバMYSからJSONファイルを要求して、ときにフォーカス日付ピッカーに入れる方法ですか？

、これは私が日付ピッカーを無効にし、要求が起こっている間、それらをグレーと要求が完了した後にそれらを可能にする完全なデモ

$(function() { 
 
    var firstDate = ['2017-06-15']; 
 
    var lastDate = ['2017-12-20']; 
 
    var availabledays = ['2017-06-15','2017-06-16','2017-06-23','2017-06-30',]; 
 
    var booked = ['2017-06-16','2017-06-23','2017-06-24','2017-06-25']; 
 
    var ssdays = []; 
 
    
 
    var dateFormat = "mm/dd/yy", 
 
    from = $("#checkin").datepicker({ 
 
     changeMonth : true, 
 
     numberOfMonths: 2, 
 
     firstDay:1, 
 
     minDate:new Date(firstDate), 
 
     maxDate:new Date(lastDate), 
 
     onSelect: function(selectedDate) { 
 
     var newdate = new Date(); 
 

 
     var date = $(this).datepicker('getDate'); 
 
      date.setTime(date.getTime() + (1000*60*60*24)) 
 
      
 
      $("#checkout").datepicker("option", "minDate",date ); 
 
      }, 
 
     
 
     beforeShowDay : function(date){ 
 
      var y = date.getFullYear().toString(); // get full year 
 
      var m = (date.getMonth() + 1).toString(); // get month. 
 
      var d = date.getDate().toString(); // get Day 
 
      if(m.length == 1){ m = '0' + m; } // append zero(0) if single digit 
 
      if(d.length == 1){ d = '0' + d; } // append zero(0) if single digit 
 
      var currDate = y+'-'+m+'-'+d; 
 
      if(jQuery.inArray(currDate,availabledays) >= 0){ 
 
      return [false, "ui-highlight"]; 
 
      } 
 
     
 
      if(jQuery.inArray(currDate,booked) >= 0){ 
 
      return [true, "ui-bos"]; 
 
      }else{ 
 
      return [true]; 
 
      }    
 
     
 
     }, 
 
     isTo1: true, 
 
    }).on("change", function() { 
 
     to.datepicker("option", "minDate", getDate(this)); 
 
    }), 
 
    to = $("#checkout").datepicker({ 
 
     changeMonth : true, 
 
     changeYear : true, 
 
     firstDay:1, 
 
     numberOfMonths: 2, 
 
     minDate:new Date(firstDate), 
 
     maxDate:new Date(lastDate), 
 
     onSelect: function(selectedDate) { 
 
      $("#checkin").datepicker("option", "maxDate", selectedDate); 
 
      }, 
 
     beforeShowDay : function(date){ 
 
      var y = date.getFullYear().toString(); // get full year 
 
      var m = (date.getMonth() + 1).toString(); // get month. 
 
      var d = date.getDate().toString(); // get Day 
 
      if(m.length == 1){ m = '0' + m; } // append zero(0) if single digit 
 
      if(d.length == 1){ d = '0' + d; } // append zero(0) if single digit 
 
      var currDate = y+'-'+m+'-'+d; 
 
      
 
      if(jQuery.inArray(currDate,booked) >= 0){ 
 
      return [true, "ui-highlight-donus"]; 
 
      } 
 
      if(jQuery.inArray(currDate,availabledays) >= 0){ 
 
      return [true, "ui-bos"]; 
 
      } 
 
      if(jQuery.inArray(currDate,ssdays) >= 0){ 
 
      return [true, "ui-ss-donus"]; 
 
      }else{ 
 
      return [true]; 
 
      } 
 
     } 
 
    }).on("change", function() { 
 
     from.datepicker("option", "maxDate", getDate(this)); 
 
    }); 
 

 
});

.form{ 
 
    width:960px; 
 
    margin:120px auto; 
 
} 
 
.form input{ 
 
    width:250px; 
 
    padding:10px; 
 
} 
 
.ui-highlight .ui-state-default{background: red !important;border-color: red !important;color: white !important; cursor:no-drop;} 
 
\t \t .ui-bos .ui-state-default{background: green !important;border-color: green !important;color: white !important;} 
 
\t \t .ui-ss .ui-state-default{background: yellow !important;border-color: yellow !important;color: gray !important; cursor:help;} 
 
\t \t .ui-ss-donus .ui-state-default{background: yellow !important;border-color: yellow !important;color: gray !important; cursor:help;} \t 
 
\t \t .ui-highlight-donus .ui-state-default{background: red !important;border-color: red !important;color: white !important; } \t 
 
.ui-testtarih .ui-state-default{ 
 
    background:black !important; 
 
    color:#FFF !important; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"> 
 

 
<div class="form"> 
 
    <input type="text" id="checkin" /> 
 
    <input type="text" id="checkout" /> 
 
    <input type="submit" value="Search" /> 
 
</div> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Answer 1

私のDatePickerの例です。 jquery ui datepickerは$('#checkout').datepicker('disable')で無効にすることができます。

データ形式では、成功コールバックでそのデータをプルするための2つの関数を書くことができます。何かのように

$.ajax({ 
    url: "your-data-url.com" 
}) 
    .done(function(serverFormattedDays) { 
    var availableDays = serverFormattedDays.map(function(day) { 
     return day.field; 
    } 
    // code to create/edit/modify datepickers here. 
}; 

希望の形式で利用可能な日数を返します。