必備的前15個免費最佳React日期選擇器元件

React日期選擇器元件有哪些？你想在下一個專案中使用最好的 React Date Picker 元件嗎？你來對地方了。他們就在路上！在這篇博文中，我為 React 專案精心挑選了前 15 個免費的最佳 React 日期選擇器。但首先，讓我們快速瞭解一下 最佳React日期選擇器元件合集的全部內容。

React日期選擇器

日期選擇器，也被稱為一個彈出的日曆，日期和時間選擇器，或時間選擇器，是一個圖形使用者介面小視窗，其允許使用者選擇從日曆和/或從一個時間範圍內的時間的日期。因此，React datepicker 元件也做同樣的工作。React Datepicker 元件是一種基於 React.js 的特殊使用者介面元件。

這些簡單的可重用元件已經成為 React 最流行的庫。

注意：在為你的專案選擇日期選擇器之前，請仔細檢視演示、規格和要求。最好通過 Github 儲存庫進行詳細檢查。不同的 React 日期選擇器支援不同型別的工作。因此，請仔細檢查先決條件是否與你的系統完全匹配，或者，如有必要，請先安裝它們。

React Datepickers 有什麼好處？

最好的日期選擇器元件是 React Datepicker 元件。這些點說明了原因。

• 使用者只需使用滑鼠即可設定或選擇日期。
• 無需寫下日期。
• 優秀的社群支援。
• 極快。
• 可重複使用的元件。
• 簡單而現代的外觀。
• 易於設定。
• 輕的。

以及許多其他方面使 React.js Datepicker 元件成為最好的元件之一。

最佳React日期選擇器元件合集

哪個React日期選擇器元件最好？下面是詳細的介紹。注意：下面的列表沒有特定的順序。

1. Wojtekmaj / React Date Picker

實時預覽/詳細資訊

主要特點

• 日期選擇器
• 時間選擇器
• 日期時間範圍選擇器
• 時間範圍選擇器
• 日期範圍選擇器
• 日期時間選擇器
• 日曆
• 時鐘
• 可定製
• 輕量級庫

Github 連結

安裝命令

npm install react-date-picker --save

程式碼片段

import React, { useState } from 'react';
import DatePicker from 'react-date-picker';
 
export default function MyDatePicker() {
  const [value, updateValue] = useState(new Date());
 
  const onChange = (date) => {
    updateValue(date);
  }
 
  return (
    <div>
      <DatePicker
        onChange={onChange}
        value={value}
      />
    </div>
  );
}
 

2.React day picker

實時預覽/詳細資訊

主要特點

• 簡單的圖書館
• 易於定製
• 可本地化
• 廣泛的示例列表
• 原生 TypeScript 支援
• 日期選擇器
• 唱腔支援

Github 連結

安裝命令

npm install react-day-picker --save

程式碼片段

import React, { useState } from "react";
import DayPickerInput from "react-day-picker/DayPickerInput";
import "react-day-picker/lib/style.css";
 
export default function ReactDayPicker() {
  const [date, setDate] = useState(new Date());
 
  function onChange(date) {
    setDate(date);
  }
 
  return <DayPickerInput onDayChange={onChange} />;
}

3. Material UI 日期/時間選擇器

實時預覽/詳細資訊

主要特點

• 遵循 Material UI 設計
• 支援 4 種不同的日期庫（date-fns、Day.js、Luxon、Moment.js）
• 日期選擇器
• 時間選擇器
• 日期時間選擇器
• 日期範圍選擇器
• 可本地化

Github 連結

安裝命令

Core Material UI 庫：

npm install @material-ui/core date-fns @date-io/date-fns@^1.3.13 @material-ui/pickers --save

程式碼 片段

import React, { useState } from 'react';
import DateFnsUtils from '@date-io/date-fns';
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker,
} from '@material-ui/pickers';
 
export default function MaterialDatePicker() {
 
  const [selectedDate, setSelectedDate] = useState(new Date());
 
  const handleDateChange = (date) => {
    setSelectedDate(date);
  };
 
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <KeyboardDatePicker
        disableToolbar
        variant="inline"
        format="MM/dd/yyyy"
        margin="normal"
        id="date-picker-inline"
        label="Date picker inline"
        value={selectedDate}
        onChange={handleDateChange}
        KeyboardButtonProps={{
          'aria-label': 'change date',
        }}
      />
    </MuiPickersUtilsProvider>
  );
 
}

4.Carbon Design System DatePicker

實時預覽/詳細資訊

主要特點

• 日期選擇器
• IBM 的開源設計系統
• 支援 React、Vue、Angular、Svelte、Vanilla JS
• 通過使用flatpickr 選項完全可定製。
• 便於使用

Github 連結

安裝命令

npm install carbon-components carbon-components-react carbon-icons --save

程式碼片段

import React from 'react';
import { DatePickerInput } from 'carbon-components-react';
 
export default function CarbonDatePicker() {
 
  return (
    <DatePickerInput
        placeholder="mm/dd/yyyy"
        labelText="Date Picker label"
        id="date-picker-single"
        onChange={date => {
          console.log(date);
        }}
      />
    </DatePicker>  
  );
}

5. Airbnb React Dates

主要特點

• 移動友好
• 可本地化
• 日期選擇器
• 日期範圍選擇器

Github 連結

安裝命令

npm install react-dates --save

程式碼片段

import React, { useState } from "react";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import { SingleDatePicker } from "react-dates";
 
export default function ReactdatesDatepicker() {
  const [date, setDate] = useState(null);
  const [isFocused, setIsFocused] = useState(false);
 
  function onDateChange(date) {
    setDate(date);
  }
 
  function onFocusChange({ focused }) {
    setIsFocused(focused);
  }
 
  return (
    <SingleDatePicker
      id="date_input"
      date={date}
      focused={isFocused}
      onDateChange={onDateChange}
      onFocusChange={onFocusChange}
    />
  );
}

6. React Datepicker

實時預覽/詳細資訊

主要特點

• 可重複使用的
• 便於使用
• 簡單的設計
• 用於本地化的 date-fns
• 日期選擇器

Github 連結

安裝命令

npm install react-datepicker --save

程式碼片段

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
 
export default function HackeroneDatepicker() {
  const [date, setDate] = useState(new Date());
 
  function onChange(date) {
    setDate(date);
  }
 
  return <DatePicker selected={date} onChange={onChange} />;
}

7. React Rainbow 元件日期選擇器

實時預覽/詳細資訊

注意： React Rainbow 是一個 UI 元件庫。你必須採用整個庫才能使用它。

主要特點

• 日期選擇器
• 日期時間選擇器
• 日期選擇器模式
• 簡單的設計
• 支援深色模式
• 可定製

Github 連結

安裝命令

npm install react-rainbow-components --save

程式碼片段

import React, { useState } from "react";
import { DatePicker } from "react-rainbow-components";
 
export default function RainbowDatepicker() {
  const [date, setDate] = useState(null);
 
  function onChange(date) {
    setDate(date);
  }
 
  return (
    <DatePicker
      id="datePicker-1"
      value={date}
      onChange={onChange}
      label="DatePicker Label"
      formatStyle="large"
    />
  );
}

8. Ant Design DatePicker

實時預覽/詳細資訊

主要特點

• 日期選擇器
• 時間選擇器
• 日期時間選擇器
• 日期範圍選擇器
• 提供 UI 元件庫
• 可本地化
• 打字稿支援
• 可定製
• 遵循 Ant 設計規範
• 簡約設計
• 更好的使用者體驗

Github 連結

安裝命令

npm install antd --save

程式碼片段

import React, { useState } from "react";
import { DatePicker } from "antd";
import "antd/dist/antd.css";
 
export default function AntDatepicker() {
  const [date, setDate] = useState(new Date());
 
  function onChange(date, dateString) {
    setDate(date);
  }
 
  return <DatePicker onChange={onChange} />;
}

9. Hypeserver / React Date Range

實時預覽/詳細資訊

主要特點

• 日曆輸入
• 日期範圍選擇器
• 高度可定製
• 單擊並按住選擇

Github 連結

安裝命令

npm install react-date-range date-fns --save

程式碼片段

import React, { useState } from "react";
import { Calendar } from "react-date-range";
import "react-date-range/dist/styles.css";
import "react-date-range/dist/theme/default.css";
 
export default function HypeserverDatepicker() {
  const [date, setDate] = useState(new Date());
 
  function onChange(date) {
    setDate(date);
  }
 
  return <Calendar date={date} onChange={onChange} />;
}

10. RC Datepicker

實時預覽/詳細資訊

主要特點

• 體面的設計
• 日期選擇器
• 易於設定
• 可定製

Github 連結

安裝命令

npm install --save rc-datepicker

程式碼片段

import React from 'react';
 
// Import Datepicker
import { DatePicker, DatePickerInput } from 'rc-datepicker';
 
// Import the default style
import 'rc-datepicker/lib/style.css';
  
export default class App extends React.Component {
    constructor(props, context) {
        super(props, context);
 
        // Initial state with date
        this.state = {
            // or Date or Moment.js
            selectedDate: '2017-08-13'
        };
 
        // This binding is necessary to make `this` work in the callback
        this.onChange = this.onChange.bind(this);
    }
 
    onChange(date) {
        this.setState({
            selectedDate: date
        });
    }
 
    render() {
        return (
            <div>
                <DatePickerInput
                    onChange={this.onChange}
                    value={this.state.selectedDate}
                    className='my-custom-datepicker-component'
                />
 
                {/* this renders only a fixed datepicker */}
                <DatePicker onChange={this.onChange} value={this.state.selectedDate} />
            </div>
        );
    }
}

11.React Datepicker CS

實時預覽/詳細資訊

主要特點

• 簡化的日期選擇器
• 安裝簡單
• 多語言支援
• 只有 5 個屬性

Github 連結

安裝命令

npm install react-date-picker-cs --save

程式碼片段

import React from 'react';
 
// Import Datepicker
import ReactDatePicker from 'react-date-picker-cs';
  
export default class App extends React.Component {
    constructor(props, context) {
        super(props, context);
 
        // Initial state with date
        this.state = {
            selectedDate: '2017-08-13'
        };
 
        // This binding is necessary to make `this` work in the callback
        this.handleLog = this.handleLog.bind(this);
    }
 
    handleLog(date) {
        this.setState({
            selectedDate: date
        });
    }
 
    render() {
        return (
            <div>
                <ReactDatePicker
                    onChange={this.handleLog} 
                    range={[2013, 2020]} 
                    value={this.state.selectedDate} 
                    disabled={true}
                />
            </div>
        );
    }
}

12. Input Moment

實時預覽/詳細資訊

注意：此模組需要 Moment.js 作為 peerDependency。

主要特點

• 日期時間選擇器
• 來自 Ionicons 的圖示
• 由 Moment.js 提供支援
• 國際學習中心執照
• 易於安裝

Github 連結

安裝命令

npm i input-moment --save

程式碼片段

import '../src/less/input-moment.less';
import './app.less';
import moment from 'moment';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import InputMoment from '../src/input-moment';
import packageJson from '../package.json';
 
class App extends Component {
  state = {
    m: moment()
  };
 
  handleChange = m => {
    this.setState({ m });
  };
 
  handleSave = () => {
    console.log('saved', this.state.m.format('llll'));
  };
 
  render() {
    return (
      <div className="app">
        <h1>
          {packageJson.name}: {packageJson.version}
        </h1>
        <h2>{packageJson.description}</h2>
        <form>
          <div className="input">
            <input type="text" value={this.state.m.format('llll')} readOnly />
          </div>
          <InputMoment
            moment={this.state.m}
            onChange={this.handleChange}
            minStep={5}
            onSave={this.handleSave}
          />
        </form>
      </div>
    );
  }
}

13. React Bootstrap 日期選擇器

實時預覽/詳細資訊

注意：為此，你必須匯入 Bootstrap 主題。

主要特點

• 基於 Bootstrap
• 極簡設計
• 日期選擇器
• 可定製

Github 連結

安裝命令

npm install react-bootstrap-date-picker

程式碼片段

import React from 'react';
 
// Import Datepicker
import DatePicker from "react-bootstrap-date-picker";
 
// Import Bootstrap components
import FormGroup from 'react-bootstrap/lib/FormGroup';
import ControlLabel from 'react-bootstrap/lib/ControlLabel';
import HelpBlock from 'react-bootstrap/lib/HelpBlock';
 
export default class App extends React.Component {
    constructor(props, context) {
        super(props, context);
 
        // Initial state with date
        this.state = {
            selectedDate: new Date().toISOString()
        };
 
        // This binding is necessary to make `this` work in the callback
        this.onChange = this.onChange.bind(this);
    }
 
    onChange(value, formattedValue) {
        this.setState({
            value: value, // ISO String, ex: "2016-11-19T12:00:00.000Z"
            formattedValue: formattedValue // Formatted String, ex: "11/19/2016"
        });
    }
 
    componentDidUpdate() {
        // Access ISO String and formatted values from the DOM.
        var hiddenInputElement = document.getElementById("example-datepicker");
        console.log(hiddenInputElement.value); // ISO String, ex: "2016-11-19T12:00:00.000Z"
        console.log(hiddenInputElement.getAttribute('data-formattedvalue')) // Formatted String, ex: "11/19/2016"
    }
 
    render() {
        return (
            <div>
                <FormGroup>
                    <ControlLabel>Label</ControlLabel>
                    <DatePicker id="example-datepicker" value={this.state.selectedDate} onChange={this.onChange} />
                    <HelpBlock>Help</HelpBlock>
                </FormGroup>
            </div>
        );
    }
}

14.React Infinite Calendar

實時預覽/詳細資訊

主要特點

• 無限滾動
• 靈活性
• 可本地化
• 可定製
• 日期選擇器
• 可擴充套件
• 移動友好
• 鍵盤支援
• 事件和回電
• 主題

Github 連結

安裝命令

npm install react-infinite-calendar --save

用法

import React from 'react';
import { render } from 'react-dom';
import InfiniteCalendar from 'react-infinite-calendar';
import 'react-infinite-calendar/styles.css'; // only needs to be imported once
 
// Render the Calendar
var today = new Date();
var lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
 
render(
  <InfiniteCalendar
    width={400}
    height={600}
    selected={today}
    disabledDays={[0,6]}
    minDate={lastWeek}
  />,
  document.getElementById('root')
);

15. React Input Calendar

實時預覽/詳細資訊

主要特點

• 簡單元件
• 用 CSS 編寫的所有系統
• 日期輸入日曆
• 極簡設計
• 易於安裝

Github 連結

安裝命令

npm install react-input-calendar

用法

import Calendar from 'react-input-calendar'
<Calendar format='DD/MM/YYYY' date='4-12-2014' />

最佳React日期選擇器元件合集總結

React日期選擇器元件有哪些？最後，你對最好的 Vue 日期選擇器的追求似乎已經結束。在這些免費的 React.js 日期選擇器中進行選擇是一項具有挑戰性的挑戰。但是，如果你堅持自己的標準，你應該能夠快速縮小 3 到 4 個最適合你的專案的日期選擇器的範圍。因此，請徹底檢查這些日期選擇器元件並獲得積極的使用者體驗。感謝你與我們在一起，我們祝你一切順利。