如何用jquery選擇時間控件-前端問答-PHP中文網

如何用jquery選擇時間控件

WBOY

發布： 2023-05-23 20:47:06

原創

2033 人瀏覽過

隨著網路的發展，時間選擇控制在網頁開發中越來越常用。其中，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>

登入後複製

HTML 頁面佈局

接著，在頁面中新增一個 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中文網其他相關文章！