JQuery datepicker- 2 个输入/文本框答案

【问题标题】：JQuery datepicker- 2 inputs/textboxesJQuery datepicker- 2 个输入/文本框
【发布时间】：2009-10-06 11:40:09
【问题描述】：

两个输入框：当我设置第一个时，我希望第二个比第一个选择的日期晚一天。我正在使用 Keith Wood 的 jquery 插件：http://keith-wood.name/datepickRef.html。

使用 altField: 只是在两个字段中保持相同，但我想在第二个输入字段中获得 1 天后。

【问题讨论】：

标签： jquery datepicker date field hyperlink

【解决方案1】：

定义一个 onSelect 处理程序，使用比为第一个字段选择的日期晚一个日期更新第二个字段。

【讨论】：

【解决方案2】：

在这里看看我的回答 - JQuery datepicker- 2 inputs/textboxes and restricting range

一种方法是使用beforeShow 属性来限制第二个日期选择器中的值。或者，定义一个 onSelect 处理程序，当在第一个输入中选择日期时更新第二个输入。

Working Demo 注意：这是基于jQuery DatePicker 而不是Keith Woods'。

编辑：

如日期选择上所述plugin page -

这个插件构成了 jQuery UI 日期选择器。它被制成可作为单独的插件使用，因为 UI 团队希望简化他们版本的功能。

因此，基于 jQuery UI Datepicker 的代码将与 Keith 的 datepicker 一起使用。

演示代码

$(function () 
{

    $('#txtStartDate, #txtEndDate').datepicker(
    {
        showOn: "both",
        dateFormat: "dd M yy",
        onSelect: insertOtherDate,
        firstDay: 1, 
        changeFirstDay: false
    });   
});

function insertOtherDate(value, date, inst) {

     var firstDate = new Date(value);
     var datepickerInput = (date.id === 'txtStartDate') ? 'txtEndDate' : 'txtStartDate';
     var dateAdjust = (date.id === 'txtStartDate') ? 1 : -1;
     var secondDate = new Date(firstDate.getFullYear(), firstDate.getMonth(), firstDate.getDate() + dateAdjust);   

     $('#' + datepickerInput).datepicker('setDate', secondDate);
}

【讨论】：

startDate 和 endDate 之间的范围不能总是 1。因为 startDate 和 endDate 有 minDate 和 maxDate。选择 endDate 时，startDate 不能更改为“endDate - 1”，并且 startDate 可以保持与以前相同。当 startDate 被选中时，endDate 应该变成 "the startDate + 1"，那么怎么做非常感谢
如果我的理解正确，endDate 应该比 startDate 多 1 天，但不应超过为 endDate 定义的 maxDate。同样，startDate 应该比 endDate 少 1 天，但不能早于为 startDate 定义的 minDate。那是对的吗？如果不是，您需要澄清 startDate 和 endDate 之间的范围。
在 startDate 之前选择 endDate 会发生什么？
@Jason - 在上面的 InsertOtherDate 函数中，您需要检查 (a) endDate，如果 secondDate 大于 maxDate 或 (b) startDate，如果 secondDate 小于 minDate。如果这些情况属实，请将日期分别设置为 maxDate 或 minDate。

【解决方案3】：

从日期选择器创建一个 onSelect 事件。在回调中读取值，将日期转换为 UNIX TIMESTAMP（可以使用 $.datepick.TIMESTAMP），添加 24*60*60000 并相应地配置第二个输入。

【讨论】：

这是否会输入与第一个日期选择器中使用的自定义格式相同的日期？