日期范围选择器(Bootstrap的JavaScript组件)在特定日期选择错误的日期

时间:2016-11-21 03:13:39

标签: javascript jquery twitter-bootstrap daterangepicker

目前我一直在使用代码,我不是作者,用户发现了一个非常具体的问题,我根本找不到答案。

相关网页使用Date Range Picker组件选择两个日期(开始和结束)。

每当有人在16/10/2016日专门点击时,它会自动转移到17/10/2016

这在多台计算机和浏览器中测试无效,我无法用调试器追查问题。

任何一天,任何一个月,任何一年,都没有任何问题。它只发生在16/10/2016那天,并且只有当该日期是结束日期时,它才可以是没有问题的开始日期。

当前版本:2.1.24

以下是使用的代码:

<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>

和剧本:

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

2 个答案:

答案 0 :(得分:2)

根据chiliNUT发布的链接,我能够找出问题所在。 这与夏令时的结束有关。 让用户选择小时也解决问题。 这可以使用选项"timePicker": true来完成 在$().daterangepicker({ })配置中。

感谢辣椒和所有帮助过的人!

答案 1 :(得分:1)

要添加到这个..如果它有帮助,但我做了OP答案。

您还可以添加其他一些功能。即使设置错误,也不会使用autoupdate和时区也不会影响它。

$(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/