javascript - 带有 json 的日期选择器的具体日期？

Question

我有一个包含特定日期的预订表格，如果您单击我的日期选择器，您会看到我为特定日期着色

所以我的问题是我为我的具体使用数组列表

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 = [];

但我必须使用 json，这就是我创建如下 json 文件的原因

日期.json

{
    "firstDate": [
        { "field": "2017-06-15"}
    ],
    "lasDate":[
        {"field":"2017-12-20"}
    ],
    
    "availabledays":[
        {"field":"2017-06-15"},
        {"field":"2017-06-16"},
        {"field":"2017-06-23"},
        {"field":"2017-06-30"}
    ],
    "booked":[
        {"field":"2017-06-16"},
        {"field":"2017-06-23"},
        {"field":"2017-06-24"},
        {"field":"2017-06-25"}
    ]
}

我的问题是如何从服务器请求 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;}
		.ui-bos .ui-state-default{background: green !important;border-color: green !important;color: white !important;}
		.ui-ss .ui-state-default{background: yellow !important;border-color: yellow !important;color: gray !important; cursor:help;}
		.ui-ss-donus .ui-state-default{background: yellow !important;border-color: yellow !important;color: gray !important; cursor:help;}	
		.ui-highlight-donus .ui-state-default{background: red !important;border-color: red !important;color: white !important; }	
.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

我会在请求发生时禁用日期选择器并将它们灰显，并在请求完成后启用它们。可以使用 $('#checkout').datepicker('disable') 禁用 jquery ui datepicker。

就数据格式而言，您可以编写几个函数在成功回调中提取数据。有点像

$.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.
};

将以您想要的格式返回可用天数。