Question

I am using Jquery Date pickers to get Start and End Dates for an application I am building.

I have two datepickers, one for a start date and one for an end date.

When someone clicks a date in the start date picker I need that date to be appended automatically to the end date picker.

I also need the end date picker to select future dates only from the date that has been appended to it.

There are two demos on the jquery datepicker site that do what I want, but I am unsure how to combine them to both do what I want.

Example One:

This example shows how you can tie
two date pickers together so that the
date selected in one influences the
dates that can be selected in the
other

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

Example Two:

An example showing inline date pickers
which are linked together and trigger
behaviour in each other…

$(function()
{
    $('#date-view1')
        .datePicker({inline:true})
        .bind(
            'dateSelected',
            function(e, selectedDate, $td)
            {
                $('#date1').val(selectedDate.asString());
                $('#date-view2, #date-view3').dpSetSelected(selectedDate.addDays(3).asString());
            }
        );
    $('#date-view2')
        .datePicker({inline:true})
        .bind(
            'dateSelected',
            function(e, selectedDate, $td)
            {
                $('#date2').val(selectedDate.asString());
            }
        );
    $('#date-view3').datePicker();
    $('#form-check')
        .bind(
            'click',
            function()
            {
                alert('date1=' + $('#date1').val() + '\n' + 'date2=' + $('#date2').val());
            }
        );
});

I have tried many combinations of the codes listed above, but I have not been able to get the desired results.

Thanks for all your help,

Tim

Answer 1

here try this, select start date will append whatever value in start-date input and set the end date to start date :

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