Question

任何人都可以帮我如何让daterangepicker始终保持开放状态吗？ daterangepicker网址为“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(function () {
     $('.daterangepicker.dropdown-menu.ltr.show-calendar.opensright').show();
});

在库中的选项中，没有任何可用的内容可以在开放模式下始终显示daterangepicker。

请建议。

Answer 1

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

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

Answer 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 + ')');
});

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

Answer 4

正如@Ahmad Zahabi提到的那样，没有内置选项可以使daterangepicker始终保持打开状态。但是，只需对其代码进行一些修改，就可以实现。他的解决方案对我不起作用，因为它会弄乱文档。单击页面上其他菜单的调用。以下是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();
            }
        },

然后，在初始化选择器之后，触发相应的输入字段，请单击：

$("#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.
});

最后，值得一提的是，上述更改将

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

就是这样。希望它能帮助外面的人

Answer 5

在您的情况下，您只需触发输入单击即可：

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

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

5 个答案: