datetimepicker
是一个常用的日期时间选择器插件,它可以方便地让用户选择日期和时间。如果你想让 datetimepicker
显示数据库中的日期而不显示当前日期,你需要做的是在初始化 datetimepicker
时设置其默认值为数据库中的日期。
以下是一个使用 jQuery 和 Bootstrap 的 datetimepicker
插件来显示数据库中日期的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Datetimepicker Example</title>
<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">
<div class="input-group date" id="datetimepicker">
<input type="text" class="form-control" />
<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.6.0.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.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</body>
</html>
$(function () {
// 假设从数据库获取的日期是 '2023-04-30'
var dbDate = '2023-04-30';
$('#datetimepicker').datetimepicker({
format: 'YYYY-MM-DD', // 设置日期格式
defaultDate: dbDate // 设置默认日期为数据库中的日期
});
});
在这个示例中,defaultDate
选项被设置为从数据库中获取的日期字符串。这样,当页面加载时,datetimepicker
将显示该日期而不是当前日期。
应用场景: 这个功能适用于任何需要用户编辑数据库中已有日期的场景,例如编辑文章发布日期、事件日期等。
可能遇到的问题及解决方法:
defaultDate
的值与 format
选项设置的格式相匹配。datetimepicker
插件版本与 Bootstrap 和 jQuery 的版本兼容。参考链接:
请注意,上述代码示例使用了 Bootstrap 3 和相应版本的 datetimepicker
。如果你使用的是 Bootstrap 4 或更高版本,可能需要调整 CSS 和 JavaScript 文件的链接以及初始化代码。
领取专属 10元无门槛券
手把手带您无忧上云