Show daterangepicker "inline" inside a div, without drop-down

Question

Show daterangepicker "inline" inside a div, without drop-down

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I am doing a filtering in a list and I would like to include the calendar with the possibility of selecting a range of dates as the daterangepicker provides in the column on the left as I show you below.

I have not found any option to keep the calendar static in this column, it always depends on a drop-down or an input that opens the calendar. I've seen this link where it appears static hanging from an input " link " but it's not what I'm looking for.

I have seen other plugins like datepicker with which I can keep the calendar static but it does not give me the option to select a range of dates.

Can anyone tell me if there is a plugin with which I can select a date range and put the calendar as it appears in the example that I have attached?

Thank you very much in advance.

[UPDATE]

I enclose my code and the test I have done with David's suggestion:

<a class="btn btn-primary filter-date-picker">
    Fecha
</a>
<div class="calendar-box"></div>

And here the javascript code:

$(document).ready(function(){
    $('.filter-date-picker').daterangepicker({
            "locale": {
                "format": "DD/MM/YYYY",
                "separator": " - ",
                "applyLabel": "Aplicar",
                "cancelLabel": "Cancelar",
                "fromLabel": "Desde",
                "toLabel": "Hasta",
                "customRangeLabel": "Custom",
                "daysOfWeek": [
                    "Lu",
                    "Ma",
                    "Mi",
                    "Ju",
                    "Vi",
                    "Sa",
                    "Do"
                ],
                "monthNames": [
                    "Enero",
                    "Febrero",
                    "Marzo",
                    "Abril",
                    "Mayo",
                    "Junio",
                    "Julio",
                    "Agosto",
                    "Septiembre",
                    "Octubre",
                    "Noviembre",
                    "Diciembre"
                ],
                "firstDay": 0
            },
             // opens: 'left'
        }, function(start, end, label) {
            $(".filter-date-picker").html(start.format('DD-MM-YYYY')+" <i class='fas fa-minus'></i> "+end.format('DD-MM-YYYY'));
        });


        $(".filter-date-picker").toggle(function() {
            $(".calendar-box").datepicker("show");
        }, function() {
            $(".calendar-box").datepicker("hide");
        });

The fact is that after implementing this, directly the div "filter-date-picker" disappears.

Before:

After:

jquery html5 datepicker daterangepicker

asked by Argoitz 05.12.2018 в 11:22

source

2 answers

0

The daterangepicker library handles a functionality in its components that is as follows:

 .toggle()

Which you can implement it in the following way:

$(".showCalendar").toggle(function() {
    $("#tuInputDate").datepicker("show");
}, function() {
    $("#tuInputDate").datepicker("hide");
});

You could also manage the visible property for the widget, something like this:

$(".dp-icon").click(function (event) {
    var visible = $(".has-dp").datepicker("widget").is(":visible");
    $(".has-dp").datepicker(visible ? "hide" : "show");
})

answered by 05.12.2018 в 11:35

JSON RECORD IT recursive MySQL query

score 1 · Accepted Answer

According to the creator of the plugin there is no way to show it inline by default:

Hi Dan,

Is there a configuration option to have the calendar appear "inline".   I would like to use the calendar without the input box ("always   visible ")?



Dan Mod No

Here I leave you a solution that you could do. The idea is to always show it at the beginning with

$('.calendar-box').data('daterangepicker').show();

And then reset the function hide() so that it does not do anything (it never hides the calendar)

$('.calendar-box').data('daterangepicker').hide = function () { };

I have also removed the <a> and left only the div .calendar-box to show the calendar there

$(document).ready(function () {
    $('.calendar-box').daterangepicker({
        "locale": {
            "format": "DD/MM/YYYY",
            "separator": " - ",
            "applyLabel": "Aplicar",
            "cancelLabel": "Cancelar",
            "fromLabel": "Desde",
            "toLabel": "Hasta",
            "customRangeLabel": "Custom",
            "daysOfWeek": [
                "Lu",
                "Ma",
                "Mi",
                "Ju",
                "Vi",
                "Sa",
                "Do"
            ],
            "monthNames": [
                "Enero",
                "Febrero",
                "Marzo",
                "Abril",
                "Mayo",
                "Junio",
                "Julio",
                "Agosto",
                "Septiembre",
                "Octubre",
                "Noviembre",
                "Diciembre"
            ],
            "firstDay": 0
        },
        // opens: 'left'
    }, function (start, end, label) {
        $(".calendar-box").html(start.format('DD-MM-YYYY') + " <i class='fas fa-minus'></i> " + end.format('DD-MM-YYYY'));
    });
    
    $('.calendar-box').data('daterangepicker').show();
    $('.calendar-box').data('daterangepicker').hide = function () { };
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.3/daterangepicker.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.3/daterangepicker.js"></script>

<div class="calendar-box"></div>

Finally, it would be convenient to remove this from your CSS to avoid showing the small arrow that goes up to the left (I am pulling the CSS of the CDN and I can not modify it):

.daterangepicker:before, .daterangepicker:after {
    position: absolute;
    display: inline-block;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
}