日期选择器设置为今天的日期并禁用周末

Question

<div class="form-group">
    <div class="col-md-4 col-md-offset-4">
        <label>Start Date</label>
        <script>
            //$(".selector").datepicker({ beforeShowDay: $.datepicker.noWeekends })
            $(".datepicker").datepicker({ beforeShowDay: $.datepicker.noWeekends })
            //$(".date").datepicker("setDate", new Date());
        </script>
        <input type="date" class="form-control" id="startDate" />
    </div>
</div>

如何将日历的开始日期设置为今天的日期？我已经尝试了注释掉的代码，但它们不起作用。或者是否可以设置输入 min=datetime.today 之类的？另外，如何禁用周末？我已经尝试搜索如何执行此操作，但代码对我不起作用。

我第一次使用带有 <script> 标签的代码，是否有任何东西需要添加到我的代码中？因为似乎所有 jquery (?) 代码都适用于其他人而不适用于我，所以我觉得我遗漏了一些东西，所以它可能不起作用。

还有最后一个问题。如果我还想禁用 public 假期，如果 public 假期存储在 excel 文件中，我该怎么办？

编辑

 $(document).ready(function(){
    $('#startDate').datepicker({
    minDate: new Date(),
    beforeShowDay: $.datepicker.noWeekends
    });
})

Answer 1

关于您的第一个问题，假设您使用的是 JQueryUI：

$('.datepicker').datepicker({
      minDate: new Date()
});

应该为你做。

至于第二个，我将不得不对其进行一些研究，因为我也对此感到疑惑。 Excel 可能有点笨拙，但可以轻松导出到更适合网络的内容。它可能涉及将侦听器附加到您的 'change' 事件并获取当月的假期，然后做...某事。

Answer 2

您有一个内联脚本，您试图 select 元素存在于 DOM 之前。此外 selector 指的是一个不存在的元素。将您的脚本移动到页面底部（紧接在结束 </body> 标记之前），或将其包装在 $( document ).ready() 中。脚本应该是

$(document).ready(function(){
    $('#startDate').datepicker({
        minDate: new Date(),
        beforeShowDay: $.datepicker.noWeekends
    });
})

这会将最短日期设置为今天的日期，并禁用 selection of weekend dates。要设置特定日期，请使用 minDate: new Date(2015, 10, 4)，这会将最短日期设置为 2105 年 11 月 4 日（请注意，月份是从零开始的，因此一月是 0）。

要包含其他不 select 可用的日期，您可以创建一个函数以传递给 beforeShowDay 选项。首先，将日期数组作为视图模型属性或 ViewBag 属性传递给视图，并将其分配给 javascript 变量，这可能会导致 say

var dates = ['11/16/2015', '11/25/2015'];

然后新建一个他们的时代数组

var holidays = [];
for (i = 0; i < dates.length; i++) {
    var vals = dates[i].split('/');
    var y = parseInt(vals[2]);
    var m = parseInt(vals[0]) - 1;
    var d = parseInt(vals[1]);
    var holiday = new Date(y, m, d);
    holidays.push(holiday.getTime());
}

并创建以下函数

function noHoliday(date) {
    if(holidays.indexOf(date.getTime()) > -1) {
       return [false];
    } else {
       return [true];
    }
}

function noWeekendsOrHolidays(date) {
    var noWeekend = $.datepicker.noWeekends(date);
    if (noWeekend[0]) {
        return noHoliday(date);
    } else {
        return noWeekend;
    }
}

然后修改datepicker脚本为

$('#startDate').datepicker({
    minDate: new Date(),
    beforeShowDay: noWeekendsOrHolidays
});

参考 this fiddle 的工作示例

日期选择器设置为今天的日期并禁用周末

Datepicker set to today's date and disable weekends

jquery

jquery-ui-datepicker