【发布时间】：2021-08-16 05:48:46
【问题描述】：
我正在动态创建 html 并预填充一些选项卡。这包括使用 bootstrap-datepicker 作为 dd/mm/yyyy 在每个选项卡上的开始和结束日期。当我更改开始日期时，会在结束日期中设置 minDate。但是，当我选择一个新的结束日期时，它显示为 mm/dd/yyyy。如果我首先选择结束日期到开始日期（设置了 maxDate 并且当我选择新的开始日期时，它显示为 mm/dd/yyyy），这同样适用。
我创建了我的 html（在一个或多个选项卡上）：
//Start Date
contents += '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">';
contents += '<div class="form-group">';
contents += '<label class="control-label control-label-left col-lg-5 col-md-5 col-sm-12 col-xs-12" for="startDate0a">Start Date<span class="req"> *</span></label>';
contents += '<div class="input-group date datepicker1" id="datepicker1">';
contents += '<input type="text" class="form-control" id="startDate0a" name="startDate" placeholder="Start Date" value="" required>';
contents += '<span class="input-group-addon">';
contents += '<span class="glyphicon glyphicon-calendar"></span>';
contents += '</span>';
contents += '</div>';
contents += '</div>';
contents += '</div>';
//End Date
contents += '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">';
contents += '<div class="form-group">';
contents += '<label class="control-label control-label-left col-lg-5 col-md-5 col-sm-12 col-xs-12" for="endDate0a">End Date<span class="req"> *</span></label>';
contents += '<div class="input-group date datepicker2" id="datepicker2">';
contents += '<input type="text" class="form-control" id="endDate0a" name="endDate" placeholder="End Date" value="" required>';
contents += '<span class="input-group-addon">';
contents += '<span class="glyphicon glyphicon-calendar"></span>';
contents += '</span>';
contents += '</div>';
contents += '</div>';
contents += '</div>';
contents += '</div>';
然后我捕捉到日期的变化并设置最大或最小日期：
$(document).on('click', '.datepicker1' , function () {
var date1ID = $(this).attr('id')
var date2ID = $(this).attr('id').replace("datepicker1", "datepicker2");
$('#'+date1ID).datepicker({
showOn: "both",
format: 'dd/mm/yyyy',
todayHighlight: true,
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#'+date2ID).datepicker('setStartDate', minDate);//set min date
}).datepicker("show");
});
$(document).on('click', '.datepicker2', function () {
var date2ID = $(this).attr('id')
var date1ID = $(this).attr('id').replace("datepicker2", "datepicker1");
$('#'+date2ID).datepicker({
showOn: "both",
format: 'dd/mm/yyyy',
todayHighlight: true,
}).on('changeDate', function (selected) {
var maxDate = new Date(selected.date.valueOf());
$('#'+date1ID).datepicker('setEndDate', maxDate);//sets max date
}).datepicker("show");
});
我的cdn是：
<!-- Bootstrap Date Picker-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" />
我已在以下位置尝试过解决方案：
datepicker, minDate, maxDate + dateformat issue
$.datepicker.setDefaults({
dateFormat: 'dd-mm-yy',
});
即，
$(document).on('click', '.datepicker1' , function () {
var date1ID = $(this).attr('id')
var date2ID = $(this).attr('id').replace("datepicker1", "datepicker2");
$.datepicker.setDefaults({
dateFormat: 'dd-mm-yy',
});
$('#'+date1ID).datepicker({
showOn: "both",
format: 'dd/mm/yyyy',
todayHighlight: true,
}).on('changeDate', function (selected) {
$.datepicker.setDefaults({
dateFormat: 'dd-mm-yy',
});
var minDate = new Date(selected.date.valueOf());
$('#'+date2ID).datepicker('setStartDate', minDate);//set min date
}).datepicker("show");
});
【问题讨论】：
-
检查浏览器控制台是否有 javascript 错误。我相信
setDefaults函数调用中的尾随逗号：dateFormat: 'dd-mm-yy', <= HERE会造成麻烦。 -
嗨，Paul，虽然在没有其他默认值时没有必要，但逗号不会导致错误，并且逗号被删除时没有区别。谢谢:-)
-
我明白了。我猜引导框架比我见过的其他框架处理得更好。
标签： jquery twitter-bootstrap-3 datepicker