使用 React-Bootstrap 庫構建日期選擇器

1. React 中 react-bootstrap 庫中的日期選擇器元件
2. 在 React 中使用 <Form> 元件作為日期選擇器

React 是用於構建單頁應用程式的最流行的庫之一。React 開發人員可以構建具有任何外觀和功能的元件。

儘管如此，僅僅因為你可以從頭開始構建任何東西並不意味著你應該這樣做。

從頭開始構建每個元件可能非常耗時。對於具有複雜功能的元件尤其如此，例如日期（或日期範圍）選擇器。

像 MUI 和 react-bootstrap 這樣的 UI 元件庫帶有具有通用功能和預期特性的自定義元件。

React 中 react-bootstrap 庫中的日期選擇器元件

如果沒有日期選擇器，某些 Web 應用程式將無法執行。例如，如果沒有日期選擇器，預訂平臺或任何其他選擇日期的應用程式都無法工作。

由於許多專案都需要日期選擇器，因此諸如 react-bootstrap 之類的 UI 元件庫包含它們並允許你訪問 API 以自定義它們的行為。這樣，React 開發人員就不需要從頭開始構建不必要的日期選擇器。

在 React 中使用 <Form> 元件作為日期選擇器

我們提到 react-bootstrap 庫包含一個自定義日期選擇器元件。從技術上講，這不是真的，但是有一個簡單的解決方案可以從 <Form> 元件中獲得類似的功能。

它的內建 API 允許我們為元件提供日期選擇功能。你可以檢視官方文件以瞭解有關 <Form> 元件以及擴充套件其功能的可能性的更多資訊。

<Form> 元件上的 type 屬性特別重要。它允許我們以一種或另一種方式投射整個表格。

要建立日期選擇器，你可以將 type 設定為 date。

import Form from "react-bootstrap/Form";
export default function App() {
  return (
    <div className="App">
      <Form.Control type="date"></Form.Control>
    </div>
  );
}

你必須從 react-bootstrap/form 目錄匯入預設元件並使用 <Form.Control> 來呼叫該元件。這樣做可以節省你自己構建元件、對其進行樣式設定和配置其功能的許多工作。

這個自定義元件開箱即用看起來不錯。你可以在 CodeSandbox 上檢視演示。