資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 ReactJS 中建立時間選擇器？
ReactJS 是一個流行的 JavaScript 庫，用於構建使用者介面。它為開發者提供了一種靈活且高效的方式來建立互動式 Web 應用程式。時間選擇器通常用於使用者需要選擇特定時間段來預訂約會、安排事件或預訂資源的應用程式。時間選擇器允許使用者輕鬆選擇所需時間並確保準確的時間分配。在本文中，我們將逐步使用 reactjs 建立一個時間選擇器。
設定 React 應用程式
首先，讓我們使用 Create React App 設定一個新的 React 應用程式。開啟您的終端並執行以下命令：
示例
以下程式碼將建立一個名為“time-picker”的新資料夾，其中包含所有必要的文 件和依賴項。
npx create-react-app time-picker
方法一：使用 react-time-picker 庫
react-time-picker 庫提供了一個簡單且可定製的時間選擇器元件。它提供了各種配置選項來調整時間選擇器的外觀和行為。
示例
首先，讓我們使用 npm 安裝 react-time-picker 庫：
npm install react-time-picker
在下面的示例中，我們匯入了必要的依賴項，包括 React 和來自 react-time-picker 庫的 TimePicker 元件。在 TimePickerComponent 函式元件中，我們使用 useState hook 定義了一個名為 time 的狀態變數，初始化為當前日期和時間。我們定義了一個 handleTimeChange 函式，該函式在所選時間更改時更新 time 狀態。在 JSX 程式碼中，我們渲染 TimePicker 元件，將 handleTimeChange 函式作為 onChange 屬性傳遞，並將 time 狀態作為 value 屬性傳遞。
import React, { useState } from 'react';
import TimePicker from 'react-time-picker';
function TimePickerComponent() {
const [time, setTime] = useState(new Date());
const handleTimeChange = (newTime) => {
setTime(newTime);
};
return (
<div>
<h1>React Time Picker Example</h1>
<TimePicker
onChange={handleTimeChange}
value={time}
/>
</div>
);
}
export default TimePickerComponent;
輸出
方法二：使用 react-datetime 庫
react-datetime 庫提供了一個高度可定製的日期和時間選擇器元件。它提供了各種格式化和配置選項，以滿足對時間選擇器的特定需求。
示例
要使用 react-datetime 庫，我們需要使用 npm 安裝它：
npm install react-datetime
在下面的程式碼中，安裝 react-datetime 庫後，我們匯入所需的依賴項，包括 React、Datetime 元件和相應的 CSS 檔案。
在 TimePickerComponent 函式元件中，我們使用 useState hook 定義了一個名為 time 的狀態變數，初始化為空字串。我們定義了一個 handleTimeChange 函式，該函式接收一個 moment 物件並透過將 moment 物件格式化為所需的時間格式來更新 time 狀態。在 JSX 程式碼中，我們渲染 Datetime 元件，將 handleTimeChange 函式作為 onChange 屬性傳遞，將 time 狀態作為 value 屬性傳遞，並傳遞其他配置，例如 dateFormat 和 inputProps 以進行自定義。
import React, { useState } from 'react';
import Datetime from 'react-datetime';
import 'react-datetime/css/react-datetime.css';
function TimePickerComponent() {
const [time, setTime] = useState('');
const handleTimeChange = (momentObj) => {
setTime(momentObj.format('HH:mm'));
};
return (
<div>
<h1>React Datetime Example</h1>
<Datetime
onChange={handleTimeChange}
value={time}
dateFormat={false}
inputProps={{ placeholder: 'Select time' }}
/>
</div>
);
}
export default TimePickerComponent;
輸出
方法三：使用 react-time-range-picker 庫
react-time-range-picker 庫為選擇時間範圍提供了一個全面的解決方案。它允許使用者選擇開始和結束時間，併為所選範圍提供視覺反饋。
示例
要使用 react-time-range-picker 庫，我們需要使用 npm 安裝它：
npm install react-time-range-picker
在下面的示例中，安裝 react-time-range-picker 庫後，我們匯入必要的依賴項，包括 React、TimeRangePicker 元件和相應的 CSS 檔案。在 TimePickerComponent 函式元件中，我們使用 useState hook 定義了一個名為 timeRange 的狀態變數，初始化為預設的開始和結束時間。
我們定義了一個 handleTimeChange 函式，該函式在所選時間範圍更改時更新 timeRange 狀態。在 JSX 程式碼中，我們渲染 TimeRangePicker 元件，將 handleTimeChange 函式作為 onChange 屬性傳遞，並將 timeRange 狀態作為 value 屬性傳遞。
import React, { useState } from 'react';
import TimeRangePicker from 'react-time-range-picker';
import 'react-time-range-picker/dist/styles.css';
function TimePickerComponent() {
const [timeRange, setTimeRange] = useState({
start: '09:00',
end: '17:00',
});
const handleTimeChange = (time) => {
setTimeRange(time);
};
return (
<div>
<h1>React Time Range Picker Example</h1>
<TimeRangePicker
onChange={handleTimeChange}
value={timeRange}
/>
</div>
);
}
export default TimePickerComponent;
輸出
結論
在本文中，我們討論瞭如何在 Reactjs 中建立時間選擇器。我們使用了 react-time-picker、react-datetime 和 react-time-range-picker 庫，每個庫都提供了獨特的特性和優勢。透過遵循提供的程式碼示例，您可以建立高度可定製的時間選擇器以滿足各種用例。此外，我們還討論瞭如何透過向時間選擇器元件新增 CSS 樣式來增強使用者體驗，使它們更具視覺吸引力和使用者友好性。
1K+ 瀏覽量
