Question

我有一个页面，用户可以使用jQuery UI Datepicker选择三个不同的约会日。当用户在第一个字段中选择一天时，我希望该日期被其他两个字段阻止。我目前也在禁用星期日，但无法获得动态日期禁用工作。

    Appointment Time 1<br />
<input id="appointment1_date" type="text" name="appointment1_date" value="Select..." />

Appointment Time 2<br />
<input id="appointment2_date" type="text" name="appointment2_date" value="Select..." />

Appointment Time 3<br />
<input id="appointment3_date" type="text" name="appointment3_date" value="Select..." />


        <script type="text/javascript">
        function noSunday(date){
          var day = date.getDay();
                      return [(day > 0), ''];
          };
        </script>
        <script type="text/javascript">
        $(function() {
            $("#appointment1_date").datepicker(
            {
                minDate: +2, 
                beforeShowDay: noSunday
            });
        });
        $(function() {
            $("#appointment2_date").datepicker(
            {
                minDate: +2, 
                beforeShowDay: noSunday
            });
        });
        $(function() {
            $("#appointment3_date").datepicker(
            {
                minDate: +2, 
                beforeShowDay: noSunday
            });
        });
        </script>

Answer 1

您可以使用beforeShowDay函数设置禁用日期。

有关完整说明，请参阅here。

Answer 2

要阻止其他字段中的日期，您必须获取日期并在处理功能中进行比较。根据您提供的代码，以下内容可以替代noSunday：

function noSunday(date) {
      var day = date.getDay();
      return [
          (day > 0 &&
           date.valueOf() != $('#appointment1_date').datepicker('getDate').valueOf()
          ),
          ''
      ];
};

基本上，您不仅要确保day > 0使其不是星期日，而且还要确保日期不等于appointment1_date给出的日期。使用.datepicker('getDate')并将其valueOf()与date进行比较是关键。

您可能希望将其重命名为noSundayOrSelected或同样具有描述性的内容。

jQuery Datepicker - 多个实例并禁用以前选择的日期？

2 个答案: