社区首页 >问答首页 >从日期选择器中更新jquery时间选择器插件

问从日期选择器中更新jquery时间选择器插件
EN

Stack Overflow用户

提问于 2013-04-10 05:28:51

回答 1查看 5.1K关注 0票数 0

我有两个输入字段，一个带有日期选择器，另一个带有时间选择器(只显示时间滑块，不显示日历)。如果在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"
});

上面代码的问题是，它没有更新时间选择器中的最大小时数，而且当我尝试选择一个新的时间(错误不影响timespan功能)时，它在控制台中显示了某种错误:错误解析日期字符串:位置2的意外文本日期字符串= 22:00日期格式= dd/mm/yy。

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

jquery-ui-datepicker

jquery-ui-timepicker

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-04-10 06:41:11

尝试用下面的代码替换您发布的代码。.timepicker构造函数查找hasDatepicker类，如果找不到它，就重新绘制ui时间选择器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"
                                });
                            }
                        }
                    });