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, Nov 21 '16 at 03:24
True, thanks for noticing, norcal, that doesn't change the behavior of the code though. — Ricardo Melo, Nov 21 '16 at 03:33
No it does not but it stood out to me. Can you provide a jsfiddle? — norcal johnny, Nov 21 '16 at 03:39
http://stackoverflow.com/questions/26256145/javascript-date-issue-incorrect-timezone, http://stackoverflow.com/questions/2488313/javascripts-getdate-returns-wrong-date, — chiliNUT, Nov 21 '16 at 03:40
I don't really know how to, the component has over 1500 lines and the code will not work without it. — Ricardo Melo, Nov 21 '16 at 03:46
Through @chiliNUT comment i could find out it is related to the end days of daylight saving time, though i still don't know how to fix it. It is a great step forward, thanks! — Ricardo Melo, Nov 21 '16 at 03:53

score 3 · Accepted Answer · answered Nov 21 '16 at 04:08

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 '16 at 04:08

Ricardo Melo

459
1
4
14

1

glad my links helped! Dates in javascript are an ever-present source of annoyance at work for me :) – chiliNUT Nov 21 '16 at 05:52

score 1 · Answer 2 · answered Nov 21 '16 at 04:18

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/

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

2 Answers2