bootstrap-daterangepicker - 如何使 daterangepicker 始终保持打开状态

Question

谁能帮助我如何让 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();
});

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

请建议。

score 1 · Accepted Answer

尝试添加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 + ')');
});

score 0 · Accepted Answer

正如@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.
});

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

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

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

score 0 · Accepted Answer

你可以写这个片段，我认为它会起作用。放入文件准备功能：

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

        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();
});

bootstrap-daterangepicker - 如何使 daterangepicker 始终保持打开状态

5 回答 5

Related

Reference