Question

我想知道是否可以在datepicker中每年只显示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 link

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/

jQuery UI DatePicker - 仅显示全年3天

2 个答案: