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/