How to make daterangepicker stay open always

Question

Can anyone help me how to make daterangepicker stay open always? The daterangepicker url is "http://www.daterangepicker.com/". I cannot find any option to make it possible. can anyone suggest how to make it?

What i Have tried so far is

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

And my document.ready is here

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

In the options in library, there is nothing available which will show the daterangepicker always in open mode.

Please suggest.

Answer 1

You can write this snippet, I think it will be work. Put in document ready function:

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

Answer 2

I found a solution to achieve this without modifying daterangepicker.js.

1. Add this to show calendar on start:

$('#txtAssetCategoryBootstrapDateRangePicker').data("daterangepicker").show();

2. Add this code to each event you want to not close the calendar, for example, calendar will not close on outsideClick:

$('#txtAssetCategoryBootstrapDateRangePicker')
  .on('outsideClick.daterangepicker', function(ev, picker) {
    $('#txtAssetCategoryBootstrapDateRangePicker').data("daterangepicker").show();
});

You have events like: outsideClick, apply, cancel. If you add above code for each event your calendar will never close.

PS. In documentation, you don't have this info, but there are also supported events like: clickPrev, clickNext, hoverDate, clickDate. You can add your own code to run additionally on a particular event.

Answer 3

As @Ahmad Zahabi mentioned, there is no built in option to keep the daterangepicker always open. However, with a bit of tinkering around its code, it is possible. His solution did not work for me, as it would mess the document.click call for other menus on the page. Here are the few lines that need to be updated within the daterangepicker.js file:

outsideClick section - comment out this.hide(); line as follows:

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 section - comment out this.hide(); line as follows:

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

ClickRange section - comment out this.clickApply(); and instead add this.updateCalendars() as follows:

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

Then, after initializing the picker, trigger the corresponding input field click:

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

Assign click event to do what you would like to happen once the 'Apply' button is clicked:

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

And finally, it is worth mentioning, that the above changes will

• always keep the calendar open
• will not cause calendar flickering, as it would, if 'click the daterange input field on calendar close' solution was used
• allow date ranges to be used and will update the calendar automatically on the range click
• reset date to defined default date on 'cancel' click, without closing the calendar

That's that. Hope it helps someone out there

Answer 4

You can simply trigger click on input, in your case :

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

Answer 5

There is no option to open always the datarangepicker, you need to reorder the last two line in daterangepicker.js into hide function:

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

To

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

And then

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

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

And if you want to stay open the ranges dates list only, you need to add the following events:

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

Answer 6

try to add alwaysShowCalendars properties:

$('#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 + ')');
});