我在项目上使用bootstrap-datepicker,当日期时间选择器显示在模态上时,它有一个非常奇怪的行为,所有日期都被交换:
这只发生在模态中,滚动内容后和使用Firefox时,在其他所有情况下都能正常工作。
为了完全验证此错误,我创建了一个演示页面:http://tuttipromo.blacklambs.net/Test.aspx
可能是什么问题?
$(document).ready(function ()
{
$('.datepicker').datepicker({
language: 'pt',
format: 'dd/mm/yyyy',
autoclose: true,
//appendTo: "div.modal",
orientation: "top"
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/locales/bootstrap-datepicker.pt.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalEditCampaign">
Launch demo modal
</button>
<div id="modalEditCampaign" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">
DatePicker
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12 form-horizontal">
<div class="col-sm-6 col-sm-offset-0">
<div class="form-group">
<label for="tbEditCampaignStartDate" class="col-sm-4 control-label">Start</label>
<div class="col-sm-5">
<input type="text" name="startDate" class="form-control input-normal datepicker" />
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="tbEditCampaignEndDate" class="col-sm-5 control-label">End</label>
<div class="col-sm-6">
<input type="text" name="endDate" class="form-control input-normal datepicker" />
</div>
</div>
</div>
<div class="col-sm-12"></div>
</div>
</div>
</div>
</div>
</div>
</div>