資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用jQuery UI建立基本的日期選擇器？
日期選擇器介面元素在Web開發中經常使用，它幫助使用者從圖形日曆中選擇日期。著名的jQuery UI工具包提供了許多UI小部件和效果，其中包括一個功能強大且可自定義的日期選擇器小部件，用於建立網站。本文將介紹使用jQuery UI建立簡單日期選擇器所需的所有步驟。
JQuery中的日期選擇器
jQuery UI日期選擇器是一個高度可定製的外掛，可為您的頁面提供日期選擇功能。您可以輕鬆新增按鈕和其他導航選項、限制可選擇日期範圍以及更改日期格式和語言。
預設情況下，當相關文字欄位獲得焦點時，一個帶有日期選擇器日曆的小型覆蓋層將開啟。只需將其附加到div或span即可獲得內聯日曆。
方法
要使用jQuery Mobile建立一個基本的Accordion，我們可以遵循兩種方法：
使用datepicker()函式。
使用datepicker()函式以及自定義選項。
讓我們來看看這兩種方法：
方法1：使用datepicker()函式
JQuery UI的datepicker()函式用於從日曆中選擇日期。它作為一個外掛，日曆在一個小型覆蓋層中開啟，我們可以在日期選擇器日曆中選擇日期。也可以使用style標籤新增內部css，並自定義input標籤以及正文中的文字。
演算法
要使用JQuery建立一個基本的日期選擇器，請按照以下步驟操作：
步驟1 - 在HTML部分新增jQuery庫和jQuery UI庫，以新增datepicker()函式作為UI。
步驟2 - 使用input標籤從輸入中獲取日期。
步驟3 - 在指令碼中為id=”pickDate”使用帶有datepicker()函式的input標籤。
步驟4 - 將樣式作為內部css新增到span標籤，以增強頁面的外觀。
示例
<!DOCTYPE html>
<html>
<head>
<!--Add style to make the appearance better-->
<style>
/*Add style to the text of the content*/
body{
color:purple;
font-weight: bold;
}
/*Add style to the input tag*/
input {
background-color: #ffff97;
border: 2px solid purple;
}
</style>
<!--Add jQuery css -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!--Add jquery scripts to add functionality in the code-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--Add jquery scripts to add functionality in the code-->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
Pick date: <input type="text" id="pickDate">
<script>
$(function() {
$("#pickDate").datepicker();
});
</script>
</body>
</html>
方法2
使用datepicker()函式以及自定義選項。
可以透過向datepicker()新增dateFormat屬性來完成日期格式化。這可以為使用datepicker()選擇的日期提供特定的格式。
演算法
要使用JQuery建立一個基本的日期選擇器，請按照以下步驟操作：
步驟1 - 在HTML部分包含jQuery庫和jQuery UI庫，以新增datepicker()函式作為UI，並選擇日期。
步驟2 - 使用input標籤從輸入中獲取日期。
步驟3 - 在指令碼中為id=”pickDate”使用帶有datepicker()函式的input標籤，並新增dateFormat以自定義日期格式。
步驟4 - 將樣式作為內部css新增到span標籤，以增強頁面的外觀。
步驟5 - 為input標籤新增背景顏色，併為其新增邊框。
步驟6 - 更改正文中文字的格式顏色。
示例
<!DOCTYPE html>
<html>
<head>
<!--Add style to make the appearance better-->
<style>
/*Add style to the text of the content*/
body{
color:purple;
font-weight: bold;
}
/*Add style to the input tag*/
input {
background-color: #ffff97;
border: 2px solid purple;
}
</style>
<!--Add jQuery css -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!--Add jquery scripts to add functionality in the code-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--Add jquery scripts to add functionality in the code-->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
Pick date: <input type="text" id="pickDate">
<script>
$(function() {
$("#pickDate").datepicker({
dateFormat: 'dd-mm-yy',
});
});
</script>
</body>
</html>
結論
使用jQuery UI構建簡單的日期選擇器是在您的網站中快速有效地新增日期選擇功能的方法。您只需幾行程式碼即可修改其功能和外觀，選擇不同的日期範圍，更改格式和語言等等。您可以按照本文中描述的方法，快速地將日期選擇器新增到您的專案中，讓使用者能夠快速輕鬆地輸入日期。
瀏覽量：122
