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文件，如下所示

dates.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文件请求然后在焦点时放入datepicker？

这是我的datepicker示例完整演示

$(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

我会禁用datepicker并在请求发生时将其灰显，并在请求完成后启用它们。可以使用$('#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.
};

将以您希望的格式返回可用日期。

使用json的datepicker的具体日期？

1 个答案: