如何使 daterangepicker 始终保持打开状态答案

【问题标题】：How to make daterangepicker stay open always如何使 daterangepicker 始终保持打开状态
【发布时间】：2018-02-22 22:21:20
【问题描述】：

谁能帮助我如何让 daterangepicker 始终保持打开状态？ daterangepicker url 是“http://www.daterangepicker.com/”。我找不到任何使之成为可能的选项。任何人都可以建议如何制作它？

到目前为止我尝试过的是

HTML

<div class="row">
    <div id='divtest'>
        <input id="txtAssetCategoryBootstrapDateRangePicker" class="form-control" />
    </div>
</div>
<div class="clearfix"></div>

JAVASCRIPT

 $('#txtAssetCategoryBootstrapDateRangePicker').daterangepicker({
        inline: true,
        singleDatePicker: false,
        startDate: moment().subtract(30, 'days'),
        endDate: moment(),
        minDate: moment().subtract(30, 'days'),
        maxDate: moment(),
        //ranges: { 'Today': [moment(), moment()-29] } 
    });

我的 document.ready 在这里

$(document).ready(function () {
     $('.daterangepicker.dropdown-menu.ltr.show-calendar.opensright').show();
});

在库中的选项中，没有任何可用的选项会始终以打开模式显示日期范围选择器。

请提出建议。

【问题讨论】：

标签： bootstrap-daterangepicker

【解决方案1】：

你可以写这个sn-p，我认为它会工作。放入文件准备功能：

$(".daterangepicker").show();

【讨论】：

对不起。试过你的答案。没有运气
在你的函数之前实际上默认 daterangepicker 属性是 display:none;所以它会是 wrk 我已经尝试过了 $(".daterangepicker").show();
默认情况下我不能这样做。因为我在三个不同的部分有三个日期范围选择器。在第三部分 daterangepicker 我想一直打开
根据您的意见使用 nth-child css 属性，但如果您愿意，可以尝试
我已针对第三个日期范围选择器编辑了我的问题。我已经提到的 css 类。

【解决方案2】：

尝试添加 alwaysShowCalendars 属性：

$('#demo').daterangepicker({
    "alwaysShowCalendars": true,
    "startDate": "04/14/2018",
    "endDate": "04/20/2018"
}, function(start, end, label) {
  console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
});

【讨论】：

【解决方案3】：

没有始终打开datarangepicker的选项，您需要将daterangepicker.js中的最后两行重新排序为hide函数：

        this.element.trigger('hide.daterangepicker', this);
        this.isShowing = false;

到

        this.isShowing = false;
        this.element.trigger('hide.daterangepicker', this);

然后

$('#daterange-btn').on('hide.daterangepicker', function(ev, picker) {
    $('#daterange-btn').click();
});

$('#daterange-btn').click();

如果您只想保持打开范围日期列表，则需要添加以下事件：

$('#daterange-btn').on('apply.daterangepicker', function(ev, picker) {
    $('.calendar').hide();
});
$('.ranges ul li').on("click",function() {
    $('.calendar').show();
});

【讨论】：

【解决方案4】：

正如@Ahmad Zahabi 提到的，没有内置选项可以让日期范围选择器始终打开。但是，通过对其代码进行一些修改，这是可能的。他的解决方案对我不起作用，因为它会弄乱 document.click 页面上其他菜单的调用。以下是 daterangepicker.js 文件中需要更新的几行：

outsideClick 部分 - 注释掉 this.hide();行如下：

outsideClick: function(e) {
            var target = $(e.target);
            // if the page is clicked anywhere except within the daterangerpicker/button
            // itself then call this.hide()
            if (
                // ie modal dialog fix
                e.type == "focusin" ||
                target.closest(this.element).length ||
                target.closest(this.container).length ||
                target.closest('.calendar-table').length
                ) return;
            //this.hide();
            this.element.trigger('outsideClick.daterangepicker', this);
        },

clickCancel 部分 - 注释掉 this.hide();行如下：

clickCancel: function(e) {
            this.startDate = this.oldStartDate;
            this.endDate = this.oldEndDate;
            //this.hide();
            this.element.trigger('cancel.daterangepicker', this);
        },

ClickRange 部分 - 注释掉 this.clickApply();而是添加 this.updateCalendars() 如下：

clickRange: function(e) {
            var label = e.target.getAttribute('data-range-key');
            this.chosenLabel = label;
            if (label == this.locale.customRangeLabel) {
                this.showCalendars();
            } else {
                var dates = this.ranges[label];
                this.startDate = dates[0];
                this.endDate = dates[1];

                if (!this.timePicker) {
                    this.startDate.startOf('day');
                    this.endDate.endOf('day');
                }

                if (!this.alwaysShowCalendars)
                    this.hideCalendars();
                //this.clickApply();
                this.updateCalendars();
            }
        },

然后，初始化picker后，触发对应的输入框点击：

$("#daterange").click();

一旦单击“应用”按钮，分配单击事件以执行您希望发生的事情：

$([div housing your calendar]).find(".drp-buttons .applyBtn").click(function(){
    //my code picks the value from the calendar input field and passes it via the URL to reload the page. It could execute some AJAX call or whatever you desire it to do.
});

最后，值得一提的是，上述变化将

始终保持日历打开
不会像使用“单击日历关闭时的日期范围输入字段”解决方案那样导致日历闪烁
允许使用日期范围并在点击范围时自动更新日历
单击“取消”时将日期重置为定义的默认日期，而不关闭日历

就是这样。希望它可以帮助那里的人

【讨论】：

【解决方案5】：

在您的情况下，您可以简单地触发点击输入：

$('#txtAssetCategoryBootstrapDateRangePicker').trigger('click')

【讨论】：