Search code examples
javascriptjquerydaterangepickerangular-daterangepicker

Date range picker does not show next arrow but shows previous arrow

I am working with DateRangePicker and I am not shown the following arrow, I don't know what I have configured wrong.

As we see the image should have on the right side an arrow too, this time I went back to 2020 so you can see that I don't have the arrow enter image description here

My input

<input type="text" id="daterange" name="daterange"/>

My script

<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script>
    $(function() {

        $('input[name="daterange"]').daterangepicker({
            "minDate": "01-01-2018",
            "maxDate": '0',
            "autoUpdateInput": false,
            "locale": {
                "cancelLabel": 'Limpiar',
                "applyLabel": 'Aplicar',
                "fromLabel": "Desde",
                "toLabel": "Hasta",
                "daysOfWeek": [
                    "Do",
                    "Lu",
                    "Ma",
                    "Mi",
                    "Ju",
                    "Vi",
                    "Sa"
                ],
                "monthNames": [
                    "Enero",
                    "Febrero",
                    "Marzo",
                    "Abril",
                    "Mayo",
                    "Junio",
                    "Julio",
                    "Agosto",
                    "Setiembre",
                    "Octubre",
                    "Noviembre",
                    "Diciembre"
                ],
            }
        });

        $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
        });

        $('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });
    });   
</script>
Solution

  • you need to set the "maxDate". it cannot be "maxDate": '0',