javascript Jquery 日期选择器:选择一个日期,自动更新第二个字段

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4867266/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 15:09:40  来源:igfitidea点击:

Jquery Date picker: Select one date, automatically update second field

javascriptjquerydatepicker

提问by Contraculto

I'm using the jQuery Date Picker plugin by Kelvin Luck ( http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/) and need to do the following, maybe somebody can help me:

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

On a website for travel insurance I have two date fields, one for a start date and one for an end date. There's also a third field (a select) that selects plans, each with a different coverage, in a number of days. The idea would be that if you select a plan for, for example, 15 days, and a start date of X, the second date field would be magically populated with a date of X + 15 days.

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

Thing is, my JavaScript knowledge is not what you would call advanced.

事实是,我的 JavaScript 知识不是您所说的高级知识。

Anybody has some experience with the plugin, or could at least give me some pointers?

任何人都对插件有一些经验,或者至少可以给我一些指示?

Thanks a lot.

非常感谢。

采纳答案by JuanToroMarty

Maybe this could help

也许这会有所帮助



$(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");  
        }  
    });  
});  

I guess this is what you need

我想这就是你需要的

回答by dm03514

http://jqueryui.com/demos/datepicker/onSelect might be what you are looking for, when you select the first date you can add 15 days to it and populate the second field

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

The datepicker you are using is the old version, I think, you should look into jquery datepicker at the link above

您使用的 datepicker 是旧版本,我认为,您应该在上面的链接中查看 jquery datepicker

回答by Victor

I modified one of the samples. something like this:

我修改了其中一个样本。像这样:

$(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());
            }
        }
    );      
});

where #start-dateis the start date input, .plan-lengthis a selector that will return the number of days the plan would add (obviously i dont know your implementation, so this would surely have to change). and #end-dateis the end date input.

#start-date开始日期输入在哪里,.plan-length是一个选择器,它将返回计划将添加的天数(显然我不知道你的实现,所以这肯定会改变)。和#end-date在结束日期输入。

EDIT:I also highly recommend you look at the jquery UI DatePicker plugin, as it is much more flexible and IMO easier to use.

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

EDIT 2:You could set the start and end date, so it is only one choice. I added 1 more line to the code above.

编辑 2:您可以设置开始和结束日期,因此只有一种选择。我在上面的代码中又添加了 1 行。