Date Range Picker (JavaScript Component for Bootstrap) picks the wrong date on specific day

Question

Currently I have been working with code which I am not the author and the user spotted a very specific problem I couldn’t find an answer to at all.

The page in question uses the Date Range Picker component to pick two dates (start and end).

Whenever someone clicks specifically on the day 16/10/2016 it is automatically shifted to 17/10/2016.

This was tested in multiple computers and browsers to no effect, I couldn’t trace down the issue with the debugger either.

Any other day, of any month, on any year, returns no problem at all. It only happens on the day 16/10/2016, and only if that date is the End date, it can be the Start date with no issues.

The current version: 2.1.24

Here is the code used:

<section class="col-md-4"> <!-- Selecionar Datas-->
    <div class="form-group has-feedback has-feedback-right">
        <input type="hidden" id="dt_inicio_afastamento">
        <input type="hidden" id="dt_fim_afastamento">
        <label class="control-label">Escolha o intervalo de datas</label>
        <i class="form-control-feedback glyphicon glyphicon-calendar"></i>
        <input id="escolhe_data" name="escolhe_data" class="input-mini form-control" type="text">
    </div>
</section>

And the Script:

    $('input[name="escolhe_data"]').daterangepicker({
        showDropdowns: true,
        autoApply: true,
        autoUpdateInput: true,
        locale: {
            "format": "DD/MM/YYYY",
            "separator": " - ",
            "applyLabel": "Aplicar",
            "cancelLabel": "Cancelar",
            "fromLabel": "De",
            "toLabel": "Até",
            "customRangeLabel": "Outro",
            "weekLabel": "S",
            "daysOfWeek": ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"],
            "monthNames": ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro" ],
            "firstDay": 1
        },
        alwaysShowCalendars: true
    },
    function(start, end, label) {
      //console.log($('#escolhe_data').data());

    });

    $('#escolhe_data').on('apply.daterangepicker', function(ev, picker) {
        $('#dt_inicio_afastamento').val(picker.startDate.format('YYYY-MM-DD'));
        $('#dt_fim_afastamento').val(picker.endDate.format('YYYY-MM-DD'));
    });

Your last input should not have a closing input statement. Thats one thing. — norcal johnny
– norcal johnny, Commented Nov 21, 2016 at 3:24
True, thanks for noticing, norcal, that doesn't change the behavior of the code though. — Ricardo Melo
– Ricardo Melo, Commented Nov 21, 2016 at 3:33
No it does not but it stood out to me. Can you provide a jsfiddle? — norcal johnny
– norcal johnny, Commented Nov 21, 2016 at 3:39
stackoverflow.com/questions/26256145/…, stackoverflow.com/questions/2488313/…, — chiliNUT
– chiliNUT, Commented Nov 21, 2016 at 3:40
I don't really know how to, the component has over 1500 lines and the code will not work without it. — Ricardo Melo
– Ricardo Melo, Commented Nov 21, 2016 at 3:46

Ricardo Melo · Accepted Answer · 2016-11-21 04:08:18Z

3

Based on the links posted by chiliNUT I was able to pinpoint the problem. It was related to the end of daylight savings. Having the user select the hour as well fixed the issue. This can be done using the option "timePicker": true in the $().daterangepicker({ }) configuration.

Thanks chiliNUT and everyone that helped!

answered Nov 21, 2016 at 4:08

Ricardo Melo

4691 gold badge4 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chiliNUT Over a year ago

glad my links helped! Dates in javascript are an ever-present source of annoyance at work for me :)

norcal johnny · Accepted Answer · 2016-11-21 04:18:02Z

Going to add to this..in case it helps but i did +1 the OP answer.

Here is some other features you can add as well. That does not use autoupdate and time zone will not affect it even if wrongly set.

$(function() {
    $('input[name="escolhe_data"]').daterangepicker({
        timePicker: true,
        timePickerIncrement: 30,
        locale: {
            format: 'MM/DD/YYYY h:mm A'
        },
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    });

    $(window).scroll(function() {
        if ($('input[name="daterange"]').length) {
            $('input[name="daterange"]').daterangepicker("close");
      }
    });
});

DEMO: https://jsfiddle.net/norcaljohnny/kensoubf/

Collectives™ on Stack Overflow

Date Range Picker (JavaScript Component for Bootstrap) picks the wrong date on specific day

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related