Question

我有两个输入字段，一个带有日期选择器，另一个带有时间选择器（仅显示时间滑块，没有日历）。如果在datePicker中选择了星期六，我想在时间选择器中显示不同的时间跨度。所以，html就像这样

<input id="datePicker" type="text" name="date"/>
<input id="timePicker" type="text" name="time"/>

javascript看起来像这样

$("#datePicker").datepicker({
  dateFormat : "dd/mm/yy",
  onSelect: function(dateText, instance) {
    var date = $.datepicker.parseDate("dd/mm/yy",  dateText);
    var isWeekend = !$.datepicker.noWeekends(date)[0];
    if (isWeekend) {
      $("#timePicker").timepicker('options','hourMax', 15);
    }
    else {
      $("#timePicker").timepicker('options','hourMax', 22);
    }
  }
});
$("#timePicker").timepicker({
  hourMin : 8,
  hourMax : 22,
  stepMinute : 15,
  timeOnly: true,
  timeFormat : "HH:mm"
});

上面代码的问题是它没有更新timepicker中的最大小时数，并且当我尝试选择新时间时它在控制台中显示某种错误（错误不会影响时间长度）功能）：解析日期字符串时出错：位置2处的意外文字日期字符串= 22:00 日期格式= dd / mm / yy 我正在使用

的jquery-1.8.3.min.js
的jquery-UI-1.9.2.custom.min.js
时间选择器的版本1.2.1（http://trentrichardson.com/examples/timepicker/）

Answer 1

尝试使用下面的代码替换您发布的代码。 .timepicker构造函数查找hasDatepicker类，如果它没有找到它重新绘制ui timepicker div。 JsFiddle

$("#datePicker").datepicker({
                        dateFormat: "dd/mm/yy",
                        onSelect: function (dateText, instance) {
                            var date = $.datepicker.parseDate("dd/mm/yy", dateText);
                            var isWeekend = !$.datepicker.noWeekends(date)[0];
                            alert(isWeekend);
                            if (isWeekend) {
                                $("#timePicker").removeClass("hasDatepicker");
                                $("#timePicker").timepicker({
                                    hourMin: 8,
                                    hourMax: 15,
                                    stepMinute: 15,
                                    timeOnly: true,
                                    timeFormat: "HH:mm"
                                });
                            } else {
                                 $("#timePicker").removeClass("hasDatepicker");
                                $("#timePicker").timepicker({
                                    hourMin: 8,
                                    hourMax: 22,
                                    stepMinute: 15,
                                    timeOnly: true,
                                    timeFormat: "HH:mm"
                                });
                            }
                        }
                    });

从日期选择器更新jquery timepicker addon

1 个答案: