jQuery UI DatePicker - дата отправления и дата возвращения - PullRequest
1 голос
/ 30 сентября 2010

В основном я пытаюсь создать два поля DatePicker.Первая - это дата отъезда, а вторая - дата возвращения.Так, например, если кто-то искал праздник, который длился 5 ночей, при загрузке страницы даты выглядели бы следующим образом:

01/12/2010 |Иконка Календарь 07.12.2010 |Значок календаря

В качестве даты отъезда вы можете выбрать любую дату (текущую или любую будущую дату).А когда вы щелкнете по дате возвращения, вы сможете выбрать только даты, которые проходят через пять ночей после даты отъезда.

Я почти получил эту функцию таким же образом, как читал различные статьи о переполнении стека.Вот код, который я использую:

$().ready(function() {
    $('.dDate, .rDate').datepicker({
        showOn: 'both',
        buttonImage: "<?=$http?>layout_images/calendar.gif",
        buttonImageOnly: true,
        beforeShow: customRange,
        buttonText: 'Open Calendar',
        firstDay: 1,
        dateFormat: 'D d M yy',
        onSelect: function(date) {
            date = $(this).datepicker('getDate');
            $('#returningdate').val($.datepicker.formatDate('D d M yy', date));
        }
    });
});

function customRange(a) {
    var b = new Date();
    var c = new Date(b.getFullYear(), b.getMonth(), b.getDate());
    if (a.id == 'returningdate') {
        if ($('.dDate').datepicker('getDate') != null) {
            c = $('.dDate').datepicker('getDate');
        }
    }
    return {
        minDate: c
    }
}

Этот код выполняет следующие действия:

Если я выберу 01/12/2010 в поле даты отъезда.Он автоматически заполняет дату возвращения 01/12/2010.

В поле даты вылета я могу выбрать любую дату (сегодняшнюю дату и более), а теперь в дате возвращения я не могу выбрать дни до 01/12/2010.

Но я хочу, чтобы я выбрал 01/12/2010 в дату отъезда, он автоматически добавит 5 ночей и сделает дату возвращения 07/12/2010 ине разрешать выбирать дни до этого.

Есть ли какой-нибудь простой способ изменить приведенный выше код для такой работы?

Большое спасибо,

Квинтин Хобсон

1 Ответ

0 голосов
/ 30 сентября 2010

Вот решение, которое я нашел:

    $(document).ready(function() {
        $('.dDate, .rDate').datepicker({
            showOn: 'both',
            buttonImage: '<?=$http?>layout_images/calendar.gif',
            buttonImageOnly: true,
            beforeShow: customRange,
            buttonText: 'Open Calendar',
            firstDay: 1,
            dateFormat: 'D d M yy',
            onSelect: function(date) {
                date = $(this).datepicker('getDate');
                if($(this).attr("id") != 'returningdate'){
                    var returnDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 6);
                    $('#returningdate').val($.datepicker.formatDate('D d M yy', returnDate));
                }
            }
        });
    });

    function customRange(a) {
        var returnDateMin;
        var b = new Date();
        var c = new Date(b.getFullYear(), b.getMonth(), b.getDate());
        if (a.id == 'returningdate') 
        {
            if ($('.dDate').datepicker('getDate') != null) {
                c = $('.dDate').datepicker('getDate');
            }
            returnDateMin = new Date(c.getFullYear(), c.getMonth(), c.getDate() + 6);
        }
        else
        {
            returnDateMin = c;
        }
        return {
            minDate: returnDateMin
        }
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...