隨著網路的發展，時間選擇控制在網頁開發中越來越常用。其中，jQuery 時間選擇器外掛在操作簡單、效果美觀方面具有明顯優勢，廣受開發者的歡迎與支援。本文將介紹如何使用 jQuery 時間選擇器插件，幫助開發者更快更簡單地實作時間選擇控制項。
一、jQuery 時間選擇器插件介紹
jQuery 時間選擇器插件是一個快速、靈活、跨瀏覽器的日期時間選擇器插件，依賴jQuery 庫，具有自適應、易擴展、樣式優美等特色。其使用方式簡單，支援多種語言，可高度客製化，並且提供了豐富的事件回呼函數。開發者只需引入相關 JS、CSS 檔案並簡單呼叫即可實現時間選擇控制項。目前，jQuery 時間選擇器外掛有多個版本，本文引用的是版本號為 2.1.9 的插件。
二、jQuery 時間選擇器外掛程式的使用
首先，需要在HTML 檔案的head 標籤中引入jQuery 函式庫和jQuery 時間選擇器插件的相關JS、CSS 檔案。
<head> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery-timepicker/2.1.9/jquery.timepicker.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-timepicker/2.1.9/jquery.timepicker.min.css"> </head>
接著，在頁面中新增一個 input 標籤作為時間選擇器的容器。
<input type="text" class="timepicker" />
其中，class 屬性值為 timepicker，表示這個 input 標籤是時間選擇器。
呼叫 jQuery 時間選擇器外掛程式的 timepicker() 方法來初始化時間選擇器。
$(document).ready(function() {
$('.timepicker').timepicker();
});其中，ready() 方法是用來確保文件已經完全載入後再執行 JavaScript 程式碼。 timepicker() 方法用於初始化時間選擇器，它具有各種可選參數，可以進行高度客製化。
除了基本的時間選擇外，jQuery 時間選擇器外掛程式還提供了許多進階功能，例如設定時間格式、設定分鐘間隔、添加時間限制、更改語言等。下面，將分別介紹這些常用功能的實作。
（1）設定時間格式
透過設定 format 屬性，可以設定時間選擇器的格式。格式化選項可以包括日期格式、時間格式、初始時間（如果要顯示初始時間，則需要設定對應時間）。
$(function() {
$("#timepicker").timepicker({
timeFormat: "HH:mm:ss",
dateFormat: "yy-mm-dd",
dateTimeFormat: "yy-mm-dd HH:mm:ss",
initialValue: "09:00"
});
});上面程式碼設定了時間選擇器的時間格式為“HH:mm:ss”，日期格式為“yy-mm-dd”，日期時間格式為“yy-mm-dd HH:mm :ss”，初始時間為“09:00”。
（2）設定分鐘間隔
透過設定step 屬性，可以設定時間選擇器的分、秒間隔，以15 分鐘為例：
$(function() {
$("#timepicker").timepicker({
step: 15 * 60 // 单位为秒
});
});上面程式碼設定了時間選擇器的分鐘間隔為15 分鐘。
（3）加入時間限制
透過設定minTime 與maxTime 屬性，可以限制時間選擇器的時間範圍，以9:00 到17:00 為例：
$(function() {
$("#timepicker").timepicker({
minTime: "9:00",
maxTime: "17:00"
});
});上面程式碼設定了時間選擇器的最早時間為9:00，最晚時間為17:00。
（4）更改語言
透過設定語言包，可以更改時間選擇器的語言。
$(function() {
$("#timepicker").timepicker({
timeFormat: "HH:mm",
lang: "zh"
});
});上面程式碼設定了時間選擇器的時間格式為“HH:mm”，語言為中文。
三、總結
本文介紹如何使用 jQuery 時間選擇器外掛程式來實現時間選擇控制項。透過引入相關文件、新增 HTML 頁面佈局和初始化外掛程式等簡單步驟，就可以快速地建立一個美觀實用的時間選擇器。此外，透過設定時間格式、分鐘間隔、時間限制和語言包等進階功能，可以進一步客製化時間選擇器。因此，對於開發時間選擇器的開發者而言，學習使用 jQuery 時間選擇器插件是十分必要的技能。
以上是如何用jquery選擇時間控件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
