您的位置: 首页  >  技术问答  >  从日期选择器更新jquery timepicker插件

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

分类: 技术问答 • 2022-06-08 09:42:16
问题描述：

我有两个输入字段，一个带有日期选择器，另一个带有时间选择器(仅显示时间滑块，没有日历).如果在datePicker中选择了周六，我想在时间选择器中显示一个不同的时间跨度. 因此，html就是这样

I have two input fields, one with a date picker and one with a timepicker (showing only the time sliders, without the calendar). I wanted to show a different time span in the time picker, if Saturday has been selected in the datePicker. So, the html is like this

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

javascript看起来像这样

The javascript looks like this

$("#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 我正在使用

The problem with the code above is that it isn't updating the max hours in the timepicker and it is showing some kind of error in the console when I try to choose a new time (the error doesn't affect the timespan functionality): Error parsing the date string: Unexpected literal at position 2 date string = 22:00 date format = dd/mm/yy I am using

  • jquery-1.8.3.min.js
  • jquery-ui-1.9.2.custom.min.js
  • version 1.2.1 of time picker (http://trentrichardson.com/examples/timepicker/)

答

尝试将您发布的代码替换为下面的代码. .timepicker构造函数如果找不到hasDatepicker类，则会重新绘制ui timepicker div. JsFiddle

Try replacing the code you posted with the one below. .timepicker constructor looks for the hasDatepicker class if it doesn't find it it re-draws the ui timepicker divs. 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"
                                });
                            }
                        }
                    });

相关推荐