在不被maxDate覆盖的情况下将Twitter Bootstrap DateTimePicker的日期设置为数据库中的日期,可以通过以下步骤实现:
以下是一个示例代码片段,展示了如何在不被maxDate覆盖的情况下将Twitter Bootstrap DateTimePicker的日期设置为数据库中的日期:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="datepicker">选择日期:</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control" readonly>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script>
$(document).ready(function() {
// 从后端获取数据库中的日期数据
var databaseDate = "2022-01-01";
// 初始化DateTimePicker组件
$('#datepicker').datetimepicker({
format: 'YYYY-MM-DD',
maxDate: databaseDate
});
});
</script>
</body>
</html>
在这个示例中,我们使用了Bootstrap和DateTimePicker的CDN链接,确保所需的CSS和JavaScript文件被正确加载。在JavaScript部分,我们使用jQuery选择器选中日期选择器的元素,并初始化DateTimePicker组件。通过设置maxDate属性为数据库中的日期数据,确保选择的日期不会超过数据库中的日期。
请注意,这只是一个简单的示例,实际情况中可能需要根据具体的开发环境和需求进行适当的调整和修改。
领取专属 10元无门槛券
手把手带您无忧上云