Выбор даты JQuery: добавление даты начала к дате окончания и отображение дат только в будущем

Question

Я использую средства выбора даты Jquery, чтобы получить начальную и конечную даты для приложения, которое я создаю.

У меня есть два средства выбора даты, одно для даты начала и одно для даты окончания.

Когда кто-то щелкает дату в средстве выбора даты, мне нужно, чтобы эта дата автоматически добавлялась в средство выбора даты окончания.

Мне также нужно, чтобы средство выбора даты окончания выбирало будущие даты только из добавленной к нему даты.

На сайте jquery datepicker есть две демонстрации, которые делают то, что я хочу, но я не уверен, как объединить их, чтобы обе делали, что я хочу.

Пример первый:

Этот пример показывает, как вы можете связать два сборщика даты вместе, чтобы дата, выбранная в одном, влияет на даты, которые можно выбрать в другой

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

Пример два:

Пример, показывающий встроенные средства выбора даты которые связаны вместе и вызывают поведение друг в друге ...

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

Я пробовал много комбинаций кодов, перечисленных выше, но мне не удалось получить желаемые результаты.

Спасибо за вашу помощь,

Тим

Answer 1

здесь попробуйте это, выберите дату начала, добавьте любое значение в поле ввода даты начала и установите дату окончания на дату начала:

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