Jquery Date Picker: Append Start Date to End Date and display dates in the future only.

Question

Hello,

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