时间戳

首页 > 解决方案 > 在 daterangepicker 中，我如何动态设置 minDate？

javascript - 在 daterangepicker 中，我如何动态设置 minDate？

问题描述

我有两个日期输入，一个是开始日期，另一个是结束日期。我想根据开始日期动态设置 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

标签： javascriptjquerydate-rangedaterangepicker

解决方案

将 onChange 事件侦听器绑定到start_date输入和处理程序内部，获取start_date' 值并使用 moment js 再添加一天，因为您已经在使用它。

然后使用如下所示的( Link ) 属性重新初始化end_date日历输入。因此无法选择距开始时间不到 1 天的先前日期。minDate

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

推荐阅读