DateRangePicker显示错误的日期或未应用所选日期

Question

我正在尝试使用带有以下代码的bootstrap dateRangePicker：

$('.dateRangePicker').daterangepicker({
    "locale": {
        "format": "DD/MM/YYYY",
        "separator": " - ",
        "applyLabel": "Aplicar",
        "cancelLabel": "Cancelar",
        "fromLabel": "De",
        "toLabel": "Até",
        "customRangeLabel": "Custom",
        "daysOfWeek": ["Dom","Seg","Ter","Qua","Qui","Sex","Sáb"],
        "monthNames": ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"],
        "firstDay": 0
        }
    }, function(start, end, label) {
    console.log(start.toISOString(), end.toISOString(), label);
});

使用上面的代码，该字段的值将在插件启动后立即更改为今天。如果我把"autoUpdateInput" : false的值不会自动更改为今天，但根本不会收到任何更改。

ps。：此代码适用于pt-br格式。

Answer 1

你可以通过设置"autoUpdateInput" : false来实现这一目标

然后捕获apply.daterangepicker和hide.daterangepicker事件，以便在用户单击“应用”按钮时选择基于选择的值，或者在daterangepicker外部单击以隐藏它。

请参阅以下代码：

$('.dateRangePicker').daterangepicker({
  "autoUpdateInput": false,
  "locale": {
    "format": "DD/MM/YYYY",
    "separator": " - ",
    "applyLabel": "Aplicar",
    "cancelLabel": "Cancelar",
    "fromLabel": "De",
    "toLabel": "Até",

    "customRangeLabel": "Custom",
    "daysOfWeek": ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
    "monthNames": ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
    "firstDay": 0
  }
});

$('.dateRangePicker').on('apply.daterangepicker', function(ev, picker) {
  $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
});

$('.dateRangePicker').on('hide.daterangepicker', function(ev, picker) {
  $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
});


$('.dateRangePicker').on('cancel.daterangepicker', function(ev, picker) {
  $(this).val('');
});

.dateRangePicker {
  width: 50%;
  padding: 10px;
}

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />

<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<input class="dateRangePicker" value="">