ReactJS - 日期選擇器

React 透過第三方 UI 元件庫提供表單元件。React 社群提供了大量的 UI/UX 元件，很難選擇滿足我們需求的正確庫。

Bootstrap UI 庫是開發人員的流行選擇之一，並且被廣泛使用。React Bootstrap (https://react-bootstrap.github.io/) 已將幾乎所有 Bootstrap UI 元件移植到 React 庫中，並且對日期選擇器元件也具有最佳支援。

讓我們在本節中學習如何使用react-bootstrap庫中的日期選擇器元件。

什麼是日期選擇器？

日期選擇器允許開發人員輕鬆選擇日期，而不是透過文字框輸入日期並正確格式化細節。HTML 輸入元素具有 type 屬性，用於引用要輸入到元素中的資料型別。其中一種型別是 date。在輸入元素中設定 type 將啟用日期選擇器。

<input type="date">

React Bootstrap 提供了Form.Control元件來建立各種輸入元素。開發人員可以使用它來建立日期選擇器控制元件。一些有用的Form.Control屬性如下：

ref (ReactRef) - 用於訪問底層 DOM 節點的 Ref 元素
as (elementType) - 啟用指定除*<input>*以外的元素
disabled (boolean) - 啟用/停用控制元件元素
htmlSize (number) - 底層控制元件元素的大小
id (string) - 控制元件元素的 ID。如果此處未指定，則使用父Form.Group元件的*controlId*。
isInValid (boolean) - 啟用/停用與無效資料關聯的樣式
isValid (boolean) - 啟用/停用與有效資料關聯的樣式
plaintext (boolean) - 啟用/停用輸入並將其呈現為純文字。與*readonly*屬性一起使用
readOnly (boolean) - 啟用/停用控制元件的只讀屬性
size (sm | lg) - 輸入元素的大小
type (string) - 要呈現的輸入元素的型別
value (string | arrayOf | number) - 底層控制元件的值。由*onChange*事件操作，初始值將預設為*defaultValue*屬性
bsPrefix (string) - 用於自定義底層 CSS 類的字首
onChange (boolean) - 當觸發*onChange*事件時要呼叫的回撥函式

一個簡單的日期控制元件元件可以使用如下所示：

<Form.Group className="mb-3" controlId="password">
   <Form.Label>Date of birth</Form.Label>
   <Form.Control type="date" />
</Form.Group>

應用日期選擇器元件

首先，建立一個新的 React 應用，並使用以下命令啟動它。

create-react-app myapp
cd myapp
npm start

接下來，使用以下命令安裝 Bootstrap 庫：

npm install --save bootstrap react-bootstrap

接下來，開啟App.css (src/App.css) 並刪除所有 CSS 類。

// remove css classes

接下來，建立一個簡單的日期元件，SimpleDatePicker (src/Components/SimpleDatePicker.js)，並呈現如下所示的表單：

import { Form, Button } from 'react-bootstrap';
function SimpleDatePicker() {
   return (
      <Form>
         <Form.Group className="mb-3" controlId="name">
            <Form.Label>Name</Form.Label>
            <Form.Control type="name" placeholder="Enter your name" />
         </Form.Group>
         <Form.Group className="mb-3" controlId="password">
            <Form.Label>Date of birth</Form.Label>
            <Form.Control type="date" />
         </Form.Group>
         <Button variant="primary" type="submit">
            Submit
         </Button>
      </Form>
   );
}
export default SimpleDatePicker;

這裡我們有：

使用Form.Control和 type 為 date 來建立日期選擇器控制元件。
使用Form 元件來建立一個基本的表單元件。
使用Form.Group來組合表單控制元件和標籤。

接下來，開啟App元件 (src/App.js)，匯入 Bootstrap css 並呈現日期選擇器，如下所示：

import './App.css'
import "bootstrap/dist/css/bootstrap.min.css";
import SimpleDatePicker from './Components/SimpleDatePicker'
function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <SimpleDatePicker />
            </div>
         </div>
      </div>
   );
}
export default App;

這裡：

使用import語句匯入了 Bootstrap 類。
渲染了新的SimpleDatePicker元件。
包含了 App.css 樣式。

最後，在瀏覽器中開啟應用程式並檢查最終結果。日期選擇器將呈現如下：

總結

React Bootstrap 日期選擇器元件提供了建立日期選擇器表單控制元件的必要選項。

列印頁面