Jquery 日期选择器：选择一个日期，自动更新第二个字段答案

【问题标题】：Jquery Date picker: Select one date, automatically update second fieldJquery 日期选择器：选择一个日期，自动更新第二个字段
【发布时间】：2011-02-01 19:50:49
【问题描述】：

我正在使用 Kelvin Luck (http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/) 的 jQuery Date Picker 插件，需要执行以下操作，也许有人可以帮助我：

在旅游保险网站上，我有两个日期字段，一个用于开始日期，一个用于结束日期。还有一个第三个字段（一个选择），用于在几天内选择计划，每个计划都有不同的覆盖范围。这个想法是，如果您选择一个计划，例如 15 天，开始日期为 X，第二个日期字段将神奇地填充 X + 15 天的日期。

问题是，我的 JavaScript 知识并不是你所说的高级。

有人对插件有一些经验，或者至少能给我一些指导吗？

非常感谢。

【问题讨论】：

在这里，像你这样的人已经付出了一些努力。你有没有尝试过？
是的，我看过几件事。即插件的演示页面、google 和 StackOverflow 上的搜索、插件的文档等。但到目前为止，我还没有找到任何可以做到这一点的东西。只有一些示例可以为第二个输入定义范围，例如kelvinluck.com/assets/jquery/datePicker/v2/demo/…

标签： javascript jquery datepicker

【解决方案1】：

也许这会有所帮助

$(document).ready(function(){    
    $("#date2").datepicker();  
    $("#date1").datepicker({  
        onSelect: function(){  
            var fecha = $(this).datepicker('getDate');  
            $("#date2").datepicker("setDate", new Date(fecha.getTime()));  
            $("#date2").datepicker("setDate", "+15d");  
        }  
    });  
});

我想这就是你需要的

【讨论】：

¿这段代码使用了 UI Datepicker，对吧？在过去的一个小时里一直在寻找解决方案。会试试这个，谢谢。
像魅力一样工作。我永远感激不尽。 :)

【解决方案2】：

http://jqueryui.com/demos/datepicker/ onSelect 可能是您要查找的内容，当您选择第一个日期时，您可以为其添加 15 天并填充第二个字段

您使用的日期选择器是旧版本，我认为您应该在上面的链接中查看 jquery datepicker

【讨论】：

谢谢，我会调查那个。我只是使用那个，因为那是我必须修改的网站所拥有的。（显然我没有成功）

【解决方案3】：

我修改了其中一个示例。像这样：

$(function()
{
    $('#start-date').bind(
        'dpClosed',
        function(e, selectedDates)
        {
            var d = selectedDates[0];
            if (d) {
                d = new Date(d);
                var timeframe = $('.plan-length').val();
                $('#end-date').dpSetStartDate(d.addDays(timeframe).asString());
                $('#end-date').dpSetEndDate( d.addDays(timeframe + 1).asString());
            }
        }
    );      
});

其中#start-date 是开始日期输入，.plan-length 是一个选择器，它将返回计划将添加的天数（显然我不知道您的实现，所以这肯定必须改变）。 #end-date 是结束日期输入。

编辑：我还强烈建议您查看 jquery UI DatePicker 插件，因为它更灵活且 IMO 更易于使用。

编辑 2：您可以设置开始和结束日期，所以它只是一个选择。我在上面的代码中又添加了 1 行代码。

【讨论】：

谢谢。这很接近，但显然使用此插件您只能设置开始日期而不是确切日期。我会研究一下 UI 插件。
您可以设置开始和结束日期，所以它只是一个选择。我在上面的代码中又添加了 1 行代码。