資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在 ReactJS 中驗證日期？
有時，我們需要從使用者的字串格式獲取日期。因此，使用者在將日期值輸入輸入欄位時可能會出錯。因此，我們需要在應用程式程式碼中驗證日期字串。
下面，我們將學習在 ReactJs 中驗證日期的各種解決方案。
使用 Validator NPM 包
Validator 是一個 NPM 包，其中包含各種驗證字串的方法。例如，它包含 isDate() 方法，我們可以用任何分隔符分隔的日期字串進行驗證。此外，它還包含驗證電子郵件和電話號碼的方法。
使用者應使用以下命令安裝 validator NPM 包。
npm i validator
語法
使用者可以按照以下語法使用 validator NPM 包來驗證日期字串。
let isValid = validator.isDate(inputDate)
在上述語法中，isValid 變數將根據 validator NPM 包的 isDate() 方法儲存布林值，該方法用於驗證日期。
示例
在下面的示例中，我們使用 hook 來管理日期。我們有一個文字輸入，用於將日期作為文字字串輸入。當用戶在輸入中輸入任何文字時，它將自動執行 handleDate() 函式，該函式將新值設定為 dateStirng 變數，並使用 isDate() 方法驗證日期。
此外，使用者可以觀察我們如何根據日期是否有效來更改驗證訊息的顏色。
import React, { useState } from "react";
import validator from "validator";
const App = () => {
const [dateString, setDateString] = useState("2023/01/27");
const [message, setMessage] = useState(" ");
const [messageColor, setMessageColor] = useState("green");
function handleDate(event) {
let inputDate = event.target.value;
setDateString(inputDate);
if (validator.isDate(inputDate)) {
setMessage("Date is Valid");
setMessageColor("green");
} else {
setMessage("Please, Enter a valid date!");
setMessageColor("red");
}
}
return (
<div>
<h2>
{" "}
Validate the date
<i> using the validator NPM package </i>
</h2>
<div style = {{ color: messageColor }}> {message} </div>
<input type = "text" value = {dateString} onChange = {handleDate} />
<div> You have entered the {dateString} in the input. </div>
</div>
);
};
export default App;
輸出
使用 HTML 日期輸入
HTML 日期輸入允許我們從日期選擇器中選擇日期。此外，我們可以在輸入標籤中設定最小和最大日期限制，這就是我們如何使用 HTML 日期輸入在 ReactJS 中驗證日期。
語法
使用者可以按照以下語法使用 HTML 日期輸入來驗證日期。
<input
Type = "date"
Value = {dateString}
onChange = {handleDate}
min = "2020-01-01"
max = "2023-01-27"
/>
我們在上述語法中使用 min 和 max 屬性來定義日期範圍。此外，我們還將“date”作為 type 屬性的值傳遞，以使輸入欄位成為日期選擇器。
示例
在下面的示例中，我們使用了輸入欄位，該欄位充當使用者的日期選擇器。因此，我們沒有使用任何 JavaScript 來驗證日期字串，因為 HTML 輸入本身會驗證日期。在 handleDate() 函式中，我們只是將新的日期值設定為 dateString 變數。
import React, { useState } from "react";
const App = () => {
const [dateString, setDateString] = useState("2023/01/27");
function handleDate(event) {
let inputDate = event.target.value;
setDateString(inputDate);
}
return (
<div>
<h2>
{" "}
Validate the date
<i> using the HTML date input </i>
</h2>
<input
type = "date"
value = {dateString}
onChange = {handleDate}
min = "2020-01-01"
max = "2023-01-27"
/>
<div> You have selected the {dateString} date. </div>
</div>
);
};
export default App;
輸出
使用 React 日期選擇器 NPM 包
React 日期選擇器是一個庫，用於自定義日期選擇器的樣式和行為。它提供了各種各樣的功能，開發人員可以根據應用程式的需求使用這些功能。
開發人員需要安裝 react 日期選擇器 NPM 包並將其匯入專案才能使用它。開發人員應遵循以下命令來安裝 react 日期選擇器 NPM 模組。
npm i react-datepicker --save
語法
使用者可以按照以下語法使用 react 日期選擇器 NPM 模組來驗證日期。
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
<DatePicker selected={dateString} onChange={handleDate} />
我們在上述語法中從 react-date-picker 庫匯入了 DatePicker 元件。此外，我們還在程式碼中使用了該元件，並傳遞了各種 props。
示例
在這個例子中，我們匯入了日期選擇器及其 CSS 樣式。之後，我們將 dateString 作為 selected 屬性的值，並將 handleDate() 函式作為 onChange 屬性的值傳遞。
在輸出中，使用者可以觀察日期選擇器的樣式。但是，我們也可以根據需要傳遞其他 props。例如，日期範圍等。
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
const App = () => {
const [dateString, setDateString] = useState(new Date());
function handleDate(date) {
let inputDate = date;
setDateString(inputDate);
}
return (
<div>
<h2>
{" "}
Validate the date
<i> using the React date picker </i>
</h2>
<DatePicker selected = {dateString} onChange = {handleDate} />
</div>
);
};
export default App;
輸出
在本教程中，我們學習瞭如何驗證日期。在第一種方法中，我們學習瞭如何使用 validator NPM 包驗證用分隔符分隔的自定義日期字串。在第二種方法中，我們使用日期輸入管理日期，在第三種方法中，我們使用 react 日期選擇器庫。
3K+ 瀏覽量
