【问题标题】:How to allow any date range with moment.js daterangepicker?如何使用 moment.js daterangepicker 允许任何日期范围?
【发布时间】:2019-08-01 14:51:09
【问题描述】:

我正在使用 moment.js daterangepicker 从用户界面接受 from 和 to date。但是,每当我希望将日期范围设置为超过一个月或一年时,日历日期会自动将它们调整为一个月的日期范围。

我浏览了文档并尝试了属性 maxSpan、autoUpdate 等。 今天,上个月等的范围工作正常。 我需要自定义范围来接受任何日期范围。

<script src="resources/js/moment/moment.min.js"></script>
<script>
var startDate;
                var endDate;
                var startDateCount = <%= l_startdatecount%>;
                var endDateCount = <%= l_enddatecount%>;
                startDateCount  =   -startDateCount;
                endDateCount    =   -endDateCount;
                $(document).ready(function() {
                    $('#reportrange_right').daterangepicker( {
                        startDate: moment().subtract(startDateCount, 'days'),
                        endDate: moment().subtract(endDateCount, 'days'),
                        minDate: '01/01/2012',
                        maxDate: '01/01/2050',
                        dateLimit: {
                            days: 365
                        },
                        showDropdowns: true,
                        showWeekNumbers: true,
                        timePicker: false,
                        timePickerIncrement: 1,
                        timePicker12Hour: true,
                        ranges: {
                            'Today': [moment(), moment()],
                            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                            'This Month': [moment().startOf('month'), moment()],
                            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                        },
                        opens: 'right',
                        buttonClasses: ['btn btn-default'],
                        applyClass: 'btn-small btn-primary',
                        cancelClass: 'btn-small',
                        format: 'MM/DD/YYYY',
                        separator: ' to ',
                        locale: {
                            applyLabel: 'Submit',
                            cancelLabel: 'Clear',
                            fromLabel: 'From',
                            toLabel: 'To',
                            customRangeLabel: 'Custom',
                            daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                            monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                            firstDay: 1
                        }

                    },
                    function(start, end) {
                        $('#reportrange_right span').html(start.format('D MMMM YYYY') + ' - ' + end.format('D MMMM YYYY'));
                        startDate = start.startOf('day');
                        endDate = end.startOf('day');
                    }
                    );
                    $('#reportrange_right span').html(moment().subtract(startDateCount, 'days').format('D MMMM YYYY') + ' - ' + moment().subtract(endDateCount, 'days').format('D MMMM YYYY'));
                    startDate   =   moment().startOf('day').subtract(startDateCount, 'days');
                    endDate     =   moment().startOf('day').subtract(endDateCount, 'days')

                    $('[data-toggle="tooltip"]').tooltip();
                 });
</script>

预期输出: 左日历选择 2018-07-29,然后右日历可以选择从 2018-07-29 到未来的任何日期。

实际输出: 左侧日历选择 2018-07-29,右侧日历仅允许 2019 年 8 月的日期,反之亦然。

【问题讨论】:

    标签: momentjs


    【解决方案1】:

    从moment.js 的论坛得到了解决方案! 我必须添加 linkedCalendars:false 并删除

    dateLimit: {
    days: 365
     } 
    

    【讨论】:

      猜你喜欢
      • 2016-10-06
      • 2020-04-26
      • 2019-11-26
      • 2017-04-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-10-24
      • 2020-01-13
      相关资源
      最近更新 更多