Bootstrap datetimepicker使用教程及实例

CYYM • 2024-11-04 17:52 • 编程

在现代web应用程序中，日期和时间选择器是不可或缺的组件。Bootstrap datetimepicker插件是目前使用最广泛的日期时间选择器插件之一。本文将从多个方面介绍Bootstrap datetimepicker的使用方法及实例。

一、基础用法

首先，让我们来看看基础用法。要使用Bootstrap datetimepicker插件，我们需要在HTML文件中引入相应的JavaScript和CSS文件，如下所示：

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

接下来，我们需要在页面上定义一个input元素，作为日期时间选择器的触发器，代码示例如下：

<input type="text" class="form-control datetimepicker" />

然后，在JavaScript文件中，我们需要实例化Bootstrap datetimepicker，传递一些选项参数，代码示例如下：

$('.datetimepicker').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss',
    locale: moment.locale('zh-cn')
});

这里，我们指定了日期时间格式为’YYYY-MM-DD HH:mm:ss’，并将locale设置为’zh-cn’，以便在选择器中显示中文。

二、选项参数

除了基本用法，Bootstrap datetimepicker还提供了许多选项参数，以便我们自定义选择器的外观和功能。以下是一些常用的选项参数：

format：指定日期时间格式，如’YYYY-MM-DD HH:mm:ss’。
locale：指定locale，如’moment.locale(‘zh-cn’)’。
minDate：指定最小日期，如’minDate: “2020-01-01″‘。
maxDate：指定最大日期，如’maxDate: “2050-12-31″‘。
useCurrent：指定选择器打开时是否使用当前日期时间，默认为true。
defaultDate：指定选择器的默认日期时间，如’defaultDate: “2021-06-01″‘。
showTodayButton：指定是否显示今天按钮，默认为false。
showClose：指定是否显示关闭按钮，默认为false。

三、实例展示

为了更好地理解Bootstrap datetimepicker的使用，下面将展示一些实例。

1. 日期时间选择器

我们可以使用’mode’选项来指定选择器的模式，如’datetime’表示显示日期和时间。示例代码如下：

$('.datetimepicker').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss',
    locale: moment.locale('zh-cn'),
    mode: 'datetime'
});

2. 限定最小和最大日期

使用’minDate’和’maxDate’选项可以限制可选择的日期范围。示例代码如下：

$('.datetimepicker').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss',
    locale: moment.locale('zh-cn'),
    minDate: "2020-01-01",
    maxDate: "2050-12-31"
});

3. 关闭按钮

使用’showClose’选项可以在选择器中显示关闭按钮。示例代码如下：

$('.datetimepicker').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss',
    locale: moment.locale('zh-cn'),
    showClose: true
});

4. 今天按钮

使用’showTodayButton’选项可以在选择器中显示今天按钮，点击可以选择当前日期。示例代码如下：

$('.datetimepicker').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss',
    locale: moment.locale('zh-cn'),
    showTodayButton: true
});

5. 默认日期时间

使用’defaultDate’选项可以指定选择器的默认日期时间。示例代码如下：

$('.datetimepicker').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss',
    locale: moment.locale('zh-cn'),
    defaultDate: "2021-06-01"
});

总结

本文介绍了Bootstrap datetimepicker的基础用法、选项参数以及实例展示。使用Bootstrap datetimepicker，我们可以轻松地添加日期和时间选择器，使用户能够快速、准确地选择所需的日期和时间。

原创文章，作者：CYYM，如若转载，请注明出处：https://www.506064.com/n/149058.html