I'm using the jQuery Date Picker plugin by Kelvin Luck ( / ) and need to do the following, maybe somebody can help me:

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.

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

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

Thanks a lot.

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

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.

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

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

Thanks a lot.

• javascript
• jquery
• datepicker

• Around here, people like that you have put in some effort. Have you tried anything? – switz Commented Feb 1, 2011 at 19:52
• 1 Yes, I've looked at several things. Namely the plugin's demo pages, searches on google and StackOverflow, the plugin's docs and such. But so far I haven't found anything that does that. Only some examples where you can define a range for the second input, like in kelvinluck./assets/jquery/datePicker/v2/demo/… – Contraculto Commented Feb 1, 2011 at 19:56

3 Answers 3

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

http://jqueryui./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

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

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-date is the start date input, .plan-length is 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-date is the end date input.

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

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.