DateRangePicker显示错误的日期或未应用所选日期
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DateRangePicker显示错误的日期或未应用所选日期相关的知识，希望对你有一定的参考价值。
我正在尝试使用带有以下代码的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格式。
答案
你可以通过设置"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="">以上是关于DateRangePicker显示错误的日期或未应用所选日期的主要内容，如果未能解决你的问题，请参考以下文章
解决daterangepicker 初始化默认值不能设置为空，双日历初始不能选择当天日期的问题；
尝试在 SharePoint 环境中使用 AngularJS DateRangePicker 时出现未定义错误
PLS-00221 'to_date' 不是程序或未定义的错误，并转换以句点分隔的日期