CODEWITHSUNDEEP
javascriptjquerydatepicker
Contraculto
Contraculto

Reputation: 43

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

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:

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.

Upvotes: 4

Views: 12461

Answers (3)

JuanToroMarty
JuanToroMarty

Reputation: 506

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

Upvotes: 2

Victor
Victor

Reputation: 4721

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 recommend 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.

Upvotes: 1

dm03514
dm03514

Reputation: 55942

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

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

Upvotes: 1

Related Questions