bootstrap-daterangepicker 更改自定义范围选择行为

Question

有谁知道如何更改 bootstrap-daterangepicker 允许用户 select 自定义日期范围的方式？

目前看来，第一个点击日期是'From'日期，第二个是'To'日期。这个问题是如果用户想要过去的日期范围并决定首先选择 'To' 日期，因为它在可见日历上，然后浏览日历并选择 'From'日期。

我想更改它，以便首先 select 编辑的日期被视为 'From' 日期。并且第二个日期设置为'To'日期，除非第二个日期更早，在这种情况下，应该调换日期。

我知道用户可以简单地更正输入字段中的日期，但这会影响日历的使用 UI。

我希望有人已经采用了类似的方法。如果没有，我可能不得不求助于创建此插件的一个版本。（从代码上看，我需要关注的似乎是clickDate函数）

Answer 1

抱歉我之前的回答，我在这里更新了我的代码。也许这会有所帮助。

CLICK HERE FOR THE CODE

Answer 2

好的，因为我不想切换到不同的日期范围选择器，所以我决定坚持使用这个，但改变了它的 clickDate 行为。我用于 clickDate 的代码是这样的，它对如何设置开始和结束日期进行了评论。请注意注释掉的原始行为，然后是指示新行为的新块。还要注意在此之后，为 if (this.singleDatePicker) 块添加的 else 条件：

    clickDate: function(e) {

        if (!$(e.target).hasClass('available')) return;

        var title = $(e.target).attr('data-title');
        var row = title.substr(1, 1);
        var col = title.substr(3, 1);
        var cal = $(e.target).parents('.calendar');
        var date = cal.hasClass('left') ? this.leftCalendar.calendar[row][col] : this.rightCalendar.calendar[row][col];

        // This was the original behaviour which I replaced below.
        //
        // this function needs to do a few things:
        // * alternate between selecting a start and end date for the range,
        // * if the time picker is enabled, apply the hour/minute/second from the select boxes to the clicked date
        // * if autoapply is enabled, and an end date was chosen, apply the selection
        // * if single date picker mode, and time picker isn't enabled, apply the selection immediately
        //
        // if (this.endDate || date.isBefore(this.startDate)) {
        //     if (this.timePicker) {
        //         var hour = parseInt(this.container.find('.left .hourselect').val(), 10);
        //         if (!this.timePicker24Hour) {
        //             var ampm = cal.find('.ampmselect').val();
        //             if (ampm === 'PM' && hour < 12)
        //                 hour += 12;
        //             if (ampm === 'AM' && hour === 12)
        //                 hour = 0;
        //         }
        //         var minute = parseInt(this.container.find('.left .minuteselect').val(), 10);
        //         var second = this.timePickerSeconds ? parseInt(this.container.find('.left .secondselect').val(), 10) : 0;
        //         date = date.clone().hour(hour).minute(minute).second(second);
        //     }
        //     this.endDate = null;
        //     this.setStartDate(date.clone());
        // } else {
        //     if (this.timePicker) {
        //         var hour = parseInt(this.container.find('.right .hourselect').val(), 10);
        //         if (!this.timePicker24Hour) {
        //             var ampm = this.container.find('.right .ampmselect').val();
        //             if (ampm === 'PM' && hour < 12)
        //                 hour += 12;
        //             if (ampm === 'AM' && hour === 12)
        //                 hour = 0;
        //         }
        //         var minute = parseInt(this.container.find('.right .minuteselect').val(), 10);
        //         var second = this.timePickerSeconds ? parseInt(this.container.find('.right .secondselect').val(), 10) : 0;
        //         date = date.clone().hour(hour).minute(minute).second(second);
        //     }
        //     this.setEndDate(date.clone());
        //     if (this.autoApply)
        //         this.clickApply();
        // }


        // Change the behaviour as follows:
        // - If the first date selected, assign it to the start date.
        // - When the second date is selected, check if it is later than (or equal to) the first date (which is currently the start date). 
        //   If the second date is later than (or is equal to) the first date, then make it the end date.
        //   If the second date is earlier than the first date, make the first date the end date, and make the second date the start date. 
        // - If auto-apply is off, and another date is selected, then treat it as the first date go back to rule #1.
        if (this.startDate && !this.endDate) {
            if (date.isSame(this.startDate) || date.isAfter(this.startDate)) {
                if (this.timePicker) {
                    var hour = parseInt(this.container.find('.left .hourselect').val(), 10);
                    if (!this.timePicker24Hour) {
                        var ampm = cal.find('.ampmselect').val();
                        if (ampm === 'PM' && hour < 12)
                            hour += 12;
                        if (ampm === 'AM' && hour === 12)
                            hour = 0;
                    }
                    var minute = parseInt(this.container.find('.left .minuteselect').val(), 10);
                    var second = this.timePickerSeconds ? parseInt(this.container.find('.left .secondselect').val(), 10) : 0;
                    date = date.clone().hour(hour).minute(minute).second(second);
                }
                this.setEndDate(date.clone());
            } 
            else {
                if (this.timePicker) {
                    var hour = parseInt(this.container.find('.left .hourselect').val(), 10);
                    if (!this.timePicker24Hour) {
                        var ampm = cal.find('.ampmselect').val();
                        if (ampm === 'PM' && hour < 12)
                            hour += 12;
                        if (ampm === 'AM' && hour === 12)
                            hour = 0;
                    }
                    var minute = parseInt(this.container.find('.left .minuteselect').val(), 10);
                    var second = this.timePickerSeconds ? parseInt(this.container.find('.left .secondselect').val(), 10) : 0;
                    date = date.clone().hour(hour).minute(minute).second(second);
                }
                this.endDate = this.startDate.clone();
                this.setStartDate(date.clone());
            } 
        }
        else {
            if (this.timePicker) {
                var hour = parseInt(this.container.find('.right .hourselect').val(), 10);
                if (!this.timePicker24Hour) {
                    var ampm = this.container.find('.right .ampmselect').val();
                    if (ampm === 'PM' && hour < 12)
                        hour += 12;
                    if (ampm === 'AM' && hour === 12)
                        hour = 0;
                }
                var minute = parseInt(this.container.find('.right .minuteselect').val(), 10);
                var second = this.timePickerSeconds ? parseInt(this.container.find('.right .secondselect').val(), 10) : 0;
                date = date.clone().hour(hour).minute(minute).second(second);
            }
            this.setStartDate(date.clone());
            this.endDate = null;
        }

        if (this.singleDatePicker) {
            this.setEndDate(this.startDate);
            if (!this.timePicker)
                this.clickApply();
        } 
        // I also added this else condition:
        // If a date range picker, and both dates are selected, and it is auto-apply, trigger clickApply.
        else if (this.autoApply && !this.timePicker && this.startDate && this.endDate && !this.startDate.isSame(this.endDate)) {
            this.clickApply();
        }

        this.updateView();

    },

我还完全注释掉了 hoverDate 函数，因为我发现当我将鼠标悬停在日历上时，输入字段的值正在发生变化，这让我很困惑。但这是我个人的喜好。

更新

如果你想看看我做了什么，你可以在GitHubhere上查看。

bootstrap-daterangepicker 更改自定义范围选择行为

bootstrap-daterangepicker change custom range selection behavior

jquery

daterangepicker