如何在 ReactJS 中創建時間選擇器？-魔扣目錄

ReactJS 是一個用于構建用戶界面的流行 JavaScript 庫。它為開發人員提供了一種靈活高效的方式來創建交互式 Web 應用程序。時間選擇器通常用于用戶需要選擇特定時間段來預約、安排活動或預留資源的應用程序。時間選擇器允許用戶輕松選擇所需的時間并確保準確的時間分配。在本文中，我們將使用reactjs逐步創建一個時間選擇器。

設置 React 應用程序

首先，讓我們使用 Create React App 設置一個新的 React 應用程序。打開終端并運行以下命令：

示例

下面的代碼將創建一個名為“time?picker”的新文件夾，其中包含所有必需的文件和依賴項。

npx create-react-app time-picker

登錄后復制

方法1：使用react-time-picker庫

react-time-picker 庫提供了一個簡單且可定制的時間選擇器組件。它提供了各種配置選項來調整時間選擇器的外觀和行為。

示例

首先，讓我們使用 npm 安裝react-time-picker 庫：

npm install react-time-picker

登錄后復制

在下面的示例中，我們導入必要的依賴項，包括 React-time-picker 庫中的 React 和 TimePicker 組件。在 TimePickerComponent 函數組件內，我們使用 useState 掛鉤定義一個狀態變量 time，并使用當前日期和時間進行初始化。我們定義一個handleTimeChange函數，每當選定的時間發生變化時，它就會更新時間狀態。在 JSX 代碼中，我們渲染 TimePicker 組件，將 handleTimeChange 函數作為 onChange 屬性傳遞，將時間狀態作為 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;

登錄后復制

輸出

方法2：使用react-datetime庫

react-datetime 庫提供了一個高度可定制的日期和時間選擇器組件。它提供各種格式和配置選項來滿足時間選擇器的特定需求。

示例

要使用react-datetime庫，我們需要使用npm安裝它：

npm install react-datetime

登錄后復制

在下面的代碼中，安裝react-datetime庫后，我們導入所需的依賴項，包括React、Datetime組件和相應的CSS文件。

在TimePickerComponent函數組件內，我們使用useState鉤子定義了一個狀態變量time，初始化為空字符串。我們定義一個handleTimeChange函數，它接收一個時刻對象，并通過將時刻對象格式化為所需的時間格式來更新時間狀態。在 JSX 代碼中，我們渲染 Datetime 組件，將 handleTimeChange 函數作為 onChange 屬性傳遞，將時間狀態作為 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;

登錄后復制

輸出

方法3：使用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 掛鉤定義一個狀態變量 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 樣式來增強用戶體驗，使它們更具視覺吸引力和用戶友好性。

以上就是如何在 ReactJS 中創建時間選擇器？的詳細內容，更多請關注www.92cms.cn其它相關文章！