从日期选择器更新 jquery timepicker 插件

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"
}); 

上面代码的问题是它没有更新时间选择器中的最大小时数，当我尝试选择新时间时它在控制台中显示某种错误（该错误不会影响时间跨度功能）： 解析日期字符串时出错：位置 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"
                                });
                            }
                        }
                    });