如何在 ReactJS 中創(chuàng)建時(shí)間選擇器？-魔扣目錄

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

設(shè)置 React 應(yīng)用程序

首先，讓我們使用 Create React App 設(shè)置一個(gè)新的 React 應(yīng)用程序。打開終端并運(yùn)行以下命令：

示例

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

npx create-react-app time-picker

登錄后復(fù)制

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

react-time-picker 庫提供了一個(gè)簡單且可定制的時(shí)間選擇器組件。它提供了各種配置選項(xiàng)來調(diào)整時(shí)間選擇器的外觀和行為。

示例

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

npm install react-time-picker

登錄后復(fù)制

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

登錄后復(fù)制

輸出

方法2：使用react-datetime庫

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

示例

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

npm install react-datetime

登錄后復(fù)制

在下面的代碼中，安裝react-datetime庫后，我們導(dǎo)入所需的依賴項(xiàng)，包括React、Datetime組件和相應(yīng)的CSS文件。

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

登錄后復(fù)制

輸出

方法3：使用react-time-range-picker庫

react-time-range-picker 庫提供了選擇時(shí)間范圍的全面解決方案。它允許用戶選擇開始和結(jié)束時(shí)間，并為所選范圍提供視覺反饋。

示例

要使用react-time-range-picker庫，我們需要使用npm安裝它：

npm install react-time-range-picker

登錄后復(fù)制

在下面的示例中，安裝react-time-range-picker庫后，我們導(dǎo)入必要的依賴項(xiàng)，包括React、TimeRangePicker組件和相應(yīng)的CSS文件。在 TimePickerComponent 函數(shù)組件內(nèi)部，我們使用 useState 掛鉤定義一個(gè)狀態(tài)變量 timeRange，并使用默認(rèn)的開始和結(jié)束時(shí)間進(jìn)行初始化。

我們定義了一個(gè)handleTimeChange函數(shù)，每當(dāng)選定的時(shí)間范圍發(fā)生變化時(shí)，它就會更新timeRange狀態(tài)。在 JSX 代碼中，我們渲染 TimeRangePicker 組件，將 handleTimeChange 函數(shù)作為 onChange 屬性傳遞，將 timeRange 狀態(tài)作為 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;

登錄后復(fù)制

輸出

結(jié)論

在本文中，我們討論了如何在 Reactjs 中創(chuàng)建時(shí)間選擇器。我們利用了react-time-picker、react-datetime 和react-time-range-picker 庫，每個(gè)庫都提供了獨(dú)特的功能和優(yōu)勢。通過遵循提供的代碼示例，您可以創(chuàng)建高度可定制的時(shí)間選擇器以適應(yīng)各種用例。此外，我們還討論了如何通過向時(shí)間選擇器組件添加 CSS 樣式來增強(qiáng)用戶體驗(yàn)，使它們更具視覺吸引力和用戶友好性。

以上就是如何在 ReactJS 中創(chuàng)建時(shí)間選擇器？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！