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

Answer 1

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!

Answer 2

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/