引导时间选择器 12 小时格式 - Javascript

当我们需要在前端实现一个时间选择器时，可以使用 Javascript 中的 Bootstrap Datepicker 插件。该插件提供了许多可配置的选项，包括日期和时间的格式、语言、选择范围等。

本文将介绍如何使用 Bootstrap Datepicker 实现一个引导时间选择器，支持 12 小时格式。

准备工作

在使用 Bootstrap Datepicker 之前，我们需要先引入相关文件。可以从 这里 下载最新版本的插件。

<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap-datepicker.js"></script>

代码实现

首先，在 HTML 中添加一个文本框和一个按钮。

<input type="text" id="datepicker">
<button id="btn-select-time" class="btn btn-default">选择时间</button>

然后，使用以下 Javascript 代码初始化 DatePicker。

$('#datepicker').datepicker({
    format: 'yyyy/mm/dd hh:ii:ss',
    autoclose: true,
    todayHighlight: true,
    showMeridian: true
});

在上面的代码中，我们设置了以下选项：

• format：用于显示日期和时间的格式。在本例中，我们使用了 12 小时制的格式，同时包含了日期和时间的信息。
• autoclose：选择日期后是否自动关闭选择框。
• todayHighlight：是否高亮显示当天日期。
• showMeridian：是否显示上午 / 下午的标识。

最后，在按钮的点击事件中获取选择的时间，并将其设置到文本框中。

$('#btn-select-time').click(function() {
    var date = $('#datepicker').datepicker('getDate');
    $('#datepicker').val(date);
});

结语

通过这篇文章，我们学习了如何使用 Bootstrap Datepicker 插件实现一个引导式时间选择器，支持 12 小时制格式。希望能对你有所帮助。