Bootstrap datetimepicker使用教程及實例

在現代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還提供了許多選項參數，以便我們自定義選擇器的外觀和功能。以下是一些常用的選項參數：

1. format：指定日期時間格式，如’YYYY-MM-DD HH:mm:ss’。
2. locale：指定locale，如’moment.locale(‘zh-cn’)’。
3. minDate：指定最小日期，如’minDate: “2020-01-01″‘。
4. maxDate：指定最大日期，如’maxDate: “2050-12-31″‘。
5. useCurrent：指定選擇器打開時是否使用當前日期時間，默認為true。
6. defaultDate：指定選擇器的默認日期時間，如’defaultDate: “2021-06-01″‘。
7. showTodayButton：指定是否顯示今天按鈕，默認為false。
8. 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，我們可以輕鬆地添加日期和時間選擇器，使用戶能夠快速、準確地選擇所需的日期和時間。