我有两个日期范围表单。每个表单都有 2 个字段:from
和 to
。在 javascript 中,我创建了日期范围日期选择器的两个实例,但由于某种原因,在第二个日期范围表单中,它不太正常工作。
第一种形式完美运行。但是,当我在第二种表单的 from
框中选择日期时,例如 10 月 9 日,它会在 from
框中显示该日期。然后,当我单击第二个表单中的 to
字段时,由于某种原因我可以选择的最远日期是 10 月 9 日?
我在下面有一个 JS Fiddle,这样你就可以看到发生了什么。我四处搜索,但找不到两个日期范围表单的任何工作示例。我可以找到很多默认的日期选择器,但它们当然不是日期范围,并且写法不同,它们的常见问题是人们使用相同的 ID,但我的都不同,所以我不明白..
JS fiddle - http://jsfiddle.net/6jJ36/
最佳答案
工作演示 http://jsfiddle.net/fxr5c/
罪魁祸首是:var option = this.id == "invfrom"? "minDate": "maxDate",
旧代码中的代码行您的 id 错误,即 ivnfrom
,它颠倒了行为。
休息一下,这应该对你的事业有帮助:)
代码
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
dateFormat: 'dd/mm/yy',
onSelect: function (selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(
instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
var invdates = $("#invfrom, #invto").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
dateFormat: 'dd/mm/yy',
onSelect: function (selectedDate) {
var option = this.id == "invfrom" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(
instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
selectedDate, instance.settings);
invdates.not(this).datepicker("option", option, date);
}
});
关于javascript - 使用 jQuery 创建两个日期选择器日期范围实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19268168/