資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 ReactJS 中建立日期選擇器？
日期選擇器允許應用程式使用者選擇日期。如果我們以字串格式從使用者那裡獲取資料，他們在輸入日期時可能會出錯，並輸入錯誤的日期格式。
因此，從使用者那裡獲取正確日期輸入的最佳方法是使用日期選擇器。在本教程中，我們將使用 ReactJS 的各種庫並建立一個日期選擇器，允許使用者選擇任何日期、月份、年份或十年。
使用“react-date-picker”NPM 包
React 提供了各種庫和 npm 包來操作日期和時間。“react-date-picker”是最好的庫之一，允許使用者選擇日期。
此外，它還提供了各種額外功能來自定義日期欄位。
在開始使用“react-date-picker”之前，我們需要在我們的 React 專案中安裝它。在專案目錄內的終端中使用以下命令。
npm i react-date-picker
語法
使用者可以按照以下語法使用 react-date-picker。
import DatePicker from "react-date-picker";
<DatePicker onChange={onDateChange} value={dateValue} />
我們在上面的語法中從“react-date-picker”匯入了 DatePicker。之後，我們在 React 元件中使用了 DatePicker。此外，我們在 DatePicker 元件中添加了 onChange 事件。
示例 1
在下面的示例中，我們從 react-date-picker 匯入了 DatePicker。之後，我們在我們的 App.js 檔案中使用了 DatePicker 元件。DatePicker 元件接受各種 props。我們使用 value props 將預設日期值傳遞給元件。
此外，我們在元件中添加了一個 onChange 事件，以便在使用者選擇新日期時觸發 onDateChange() 函式。此外，我們還使用了 useState 鉤子來處理新選擇的日期值。
import React, { useState } from "react";
import DatePicker from "react-date-picker";
export default function App() {
const [dateValue, onDateChange] = useState(new Date());
return (
<>
<h2>
Using the <i> react-date-picker </i> with the react functional
components.{" "}
</h2>
<h3>Select any date from the below date picker.</h3>
<div>
<DatePicker onChange={onDateChange} value={dateValue} />
</div>
</>
);
}
輸出
示例 2
在這個示例中，我們也使用 react-date-picker 實現日期選擇器，但是我們自定義了日期選擇器。使用者可以看到我們向 DatePicker 元件傳遞了不同的 props。
autofocus props 允許我們自動將焦點放在日期選擇器上，並在元件掛載時。此外，我們還將 closeCalender props 與 false 布林值一起傳遞，以防止使用者選擇日期時關閉日曆。使用者需要點選外部才能關閉日曆。
className props 允許我們將類傳遞給子元件，並使用類名來設定這些元件的樣式。
import React, { useState } from "react";
import DatePicker from "react-date-picker";
export default function App() {
const [dateValue, onDateChange] = useState(new Date());
const mystyle = {
color: "blue",
backgroundColor: "lightblue",
padding: "2rem",
};
return (
<>
<div style={mystyle}>
<h2>
Using the<i>react-date-picker</i>with the react functional components.
</h2>
<div>
<DatePicker
onChange={onDateChange}
value={dateValue}
autoFocus={true}
className="date-picker"
closeCalendar={false}
/>
</div>
</div>
</>
);
}
輸出
在上面的輸出中，使用者還可以觀察我們如何向網頁新增樣式。
React-date-picker-props
在這裡，我們將瞭解一些有用的 props，我們可以將它們傳遞給 Datepicker 元件來自定義日期。
disabled - 它允許我們停用日期選擇器。
format - 我們可以使用 format props 指定輸入日期格式。
isOpen - 它允許您設定日曆是否應開啟。
maxDate - 我們可以使用 maxDate props 設定日期選擇的最大限制。
minDate - 我們可以指定選擇日期的最小限制。
name - 我們可以使用 name props 自定義日期選擇器的名稱。
onChange - 每當使用者從日期選擇器中選擇新的日期值時，都會觸發一個事件。
Value - 它是日期的當前值。
使用 HTML input type =“date”和 React 建立日期選擇器
HTML 包含 <input>，它可以從使用者那裡獲取各種型別的輸入，例如文字、數字、日期等。在這裡，我們將使用 <input> 標籤來建立日期選擇器。
語法
使用者可以按照以下語法使用 HTML input 來建立日期選擇器。
<input
type="date"
value={date}
onChange={onDateChange}
/>
在上面的語法中，我們將日期值與輸入繫結，並使用“date”作為型別來使用輸入建立日期選擇器。
示例 3
在下面的示例中，我們使用了 HTML input 來建立日期選擇器，如上面的語法所示。此外，我們還使用了鉤子來處理日期輸入。每當使用者選擇日期時，它都會呼叫 onDateChange() 函式，我們使用 setDate() 函式將日期值設定為 date 變數。
import React, { useState } from "react";
export default function App() {
const [date, setDate] = useState("none");
const onDateChange = (event) => {
setDate(event.target.value);
};
const mystyle = {
color: "black",
backgroundColor: "lightgrey",
padding: "2rem",
width: "700px",
};
const dateStyle = {
backgroundColor: "red",
width: "13.2rem",
height: "2rem",
fontSize: "1.5rem",
};
return (
<>
<div style={mystyle}>
<h2>
Using the <i>HTML date input </i> with the react functional components.
</h2>
The selected date is {date}
<div>
<input
type="date"
style={dateStyle}
value={date}
onChange={onDateChange}
/>
</div>
</div>
</>
);
}
輸出
在上面的輸出中，使用者可以觀察我們應用於日期輸入欄位的樣式。因此，我們可以像自定義普通 HTML 元素的樣式一樣自定義日期輸入欄位的樣式。
使用者現在可以理解為什麼我們應該使用 react-date-picker 而不是 HTML input。HTML 日期輸入不包含設定最小和最大日期限制或自動聚焦的功能。
在本教程中，我們學習了僅使用 HTML 和 React 庫建立日期選擇器的方法。建議使用 React 庫建立日期選擇器並對其進行更多自定義。
9K+ 閱讀量
