jQuery UI DatePicker-仅显示全年3天

Question

我想知道是否可以在日期选择器中仅显示3天？

这是我到目前为止所得到的：

JS：

 var availableDates = ["28-12-2017","29-12-2017","30-12-2017"];

 function available(date) {
   dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + 
   date.getFullYear();
   if ($.inArray(dmy, availableDates) !== -1) {
     return [true, "","Available"];
   } else {
     return [false,"","unAvailable"];
   }
 }

 $('#date').datepicker({ beforeShowDay: available }); 

CSS：

.ui-datepicker-unselectable {display: none;}

jsfiddle链接

Answer 1

亲爱的您忘记了defaultDate ，请尝试以下操作：

  var availableDates = ["28-12-2017","29-12-2017","30-12-2017"];

  function available(date) {
   dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
  if ($.inArray(dmy, availableDates) !== -1) {
      return [true, "","Available"];
    } else {
      return [false,"","unAvailable"];
    }
  }

  $('#date').datepicker({ beforeShowDay: available, defaultDate: "12/28/2017" }); 

请使用此小提琴http://jsfiddle.net/szYYY/50/

Answer 2

我建议您删除硬编码的日期并使代码更通用：

JS：

 var availableDates = ["28-12-2017", "29-12-2017", "30-12-2017"];

 function available(date) {
   dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
   if ($.inArray(dmy, availableDates) !== -1) {
     return [true, "", "Available"];
   } else {
     return [false, "", "unAvailable"];
   }
 }

 $('#date').datepicker({
   beforeShowDay: available,
   dateFormat: "dd-mm-yy",
   minDate: availableDates[0],
   maxDate: availableDates[2]
 });

无需CSS。

显示带有禁用日期的完整月份可以使用户更加清楚，而不是隐藏日期。

演示： http ： //jsfiddle.net/szYYY/52/