Skip to content Skip to sidebar Skip to footer

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

Solution 1:

Maybe this could help


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

I guess this is what you need

Solution 2:

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

Solution 3:

I modified one of the samples. something like this:

$(function()
{
    $('#start-date').bind(
        'dpClosed',
        function(e, selectedDates)
        {
            var d = selectedDates[0];
            if (d) {
                d = newDate(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.

Post a Comment for "Jquery Date Picker: Select One Date, Automatically Update Second Field"