в daterangepicker, как я могу установить minDate динамически? - PullRequest
Новая
       24

в daterangepicker, как я могу установить minDate динамически?

0 голосов
/ 24 января 2019

У меня есть две даты ввода, одна с датой начала, а другая - с датой окончания.Я хочу установить minDate Динамически, чтобы закончить ввод даты на основе начальной даты.Короче говоря, я хочу запретить пользователю выбирать дату окончания меньше даты начала (при изменении даты начала я хочу обновить свойство minDate для ввода даты окончания). 

<input type="text" id="start_date" class="form-control"  name="start_date" data-input="date-range" >
<input type="text" id="end_date" class="form-control"  name="end_date" data-input="date-range" >

    $('[data-input=date-range]').each(function(index, picker) {
            $(picker).daterangepicker({
                alwaysShowCalendars: true,
                showCustomRangeLabel: true,
                startDate: picker.value ? moment(picker.value, "YYYY-MM-DD hh:mm:ii") : moment(),
                singleDatePicker: true,
                showDropdowns:true,
                autoUpdateInput: true,
                locale: {
                    cancelLabel: 'Clear',
                    format: 'MMMM D, YYYY'
                },
            });
        });

Я использую daterangepicker в форме

1 Ответ

0 голосов
/ 24 января 2019

привязывает прослушиватель события onChange к входу start_date и внутри обработчика извлекает значение start_date и добавляет еще один день, используя момент js, так как вы уже используете его.

Затем повторно инициализируйте ввод календаря end_date с помощью свойства minDate ( Link ), как показано ниже.так что предыдущие даты менее чем за 1 день от начала не могут быть выбраны. 

$('#start_date').on('change', function(){
    $('#end_date').daterangepicker({
            alwaysShowCalendars: true,
            showCustomRangeLabel: true,
            minDate:moment($('#start_date').val(), "MMMM D, YYYY").add(1, 'd');
            singleDatePicker: true,
            showDropdowns:true,
            autoUpdateInput: true,
            locale: {
                cancelLabel: 'Clear',
                format: 'MMMM D, YYYY'
            },
});

убедитесь, что вы используете соответствующие форматы при разборе даты, используя момент.

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

$('#end_date').data('daterangepicker').minDate = new_date_you_obtained
...