以下是原文翻译成繁體中文的Markdown格式：

ReactJS - Date Picker

# ReactJS - 日期選擇器：初學者指南

Hello, 有志的開發者們！今天，我們將踏上一段令人興奮的旅程，進入ReactJS日期選擇器的世界。別擔心你以前從未編過程序——我將成為你的友好導遊，一步一步地解釋一切。在本教程結束時，你將能夠在你的React應用程序中添加一個便捷的日期選擇器。讓我們一起來看看！

## 什麼是日期選擇器？

在我們開始編程之前，讓我們先了解什麼是日期選擇器。想像一下你在線上訂購飛機票。你需要選擇你的旅行日期，對吧？那個彈出的日曆，讓你選擇日期？那就是日期選擇器！它是一個用戶界面元素，讓選擇日期變得簡單直觀。

## 為什麼在React中使用日期選擇器？

React主要是關於創建互動用戶界面，而日期選擇器就是這個概念的一個完美例子。它通過提供視覺日曆來選擇日期，減少錯誤，並使用戶界面更加友好。

## 在React中開始使用日期選擇器

要在React中使用日期選擇器，我們將使用一個叫做`react-datepicker`的流行庫。這個庫提供了一個可定制的組件，我們可以輕鬆地集成到我們的React應用程序中。

### 步驟1：設定你的React專案

首先，讓我們創建一個新的React專案。如果你已經有一個，你可以跳過這一步。

```bash
npx create-react-app my-datepicker-app
cd my-datepicker-app

這個命令創建了一個名為"my-datepicker-app"的新React應用程序，並將你移動到專案目錄中。

步驟2：安裝日期選擇器庫

現在，讓我們安裝react-datepicker庫：

npm install react-datepicker

這個命令將日期選擇器庫添加到你的專案中。

在應用程序中應用日期選擇器組件

現在來到了有趣的部分——在我們的應用程序中真正使用日期選擇器！

步驟1：導入必要的模塊

打開你的src/App.js文件，在頂部添加以下導入語句：

import React, { useState } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

這裡的每一行是幹什麼的：

我們從React導入useState來管理我們組件的狀態。
我們從我們安裝的庫中導入DatePicker組件。
我們導入CSS文件來風格化我們的日期選擇器。

步驟2：創建一個功能性組件

讓我們創建一個使用我們日期選擇器的功能性組件：

function App() {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <div className="App">
      <h1>我的超酷日期選擇器</h1>
      <DatePicker
        selected={selectedDate}
        onChange={date => setSelectedDate(date)}
        dateFormat="dd/MM/yyyy"
        placeholderText="選擇一個日期"
      />
      <p>選擇的日期：{selectedDate ? selectedDate.toDateString() : "未選擇日期"}</p>
    </div>
  );
}

讓我們分解一下：

我們使用useState創建一個狀態變量selectedDate和一個函數setSelectedDate來更新它。
我們渲染一個DatePicker組件，並帶有幾個屬性：
- selected：當前選中的日期
- onChange：當選擇新日期時調用的函數
- dateFormat：我們想要日期如何顯示
- placeholderText：當沒有選擇日期時要顯示的內容
我們在選擇器下方顯示選擇的日期，或者如果沒有選擇日期，則顯示一條消息。

步驟3：自定義日期選擇器

react-datepicker的一個很棒的特性就是它的可定制性。讓我們看看我們可以如何修改我們的日期選擇器：

function App() {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <div className="App">
      <h1>我的自定義日期選擇器</h1>
      <DatePicker
        selected={selectedDate}
        onChange={date => setSelectedDate(date)}
        dateFormat="dd/MM/yyyy"
        minDate={new Date()}
        filterDate={date => date.getDay() !== 6 && date.getDay() !== 0}
        showYearDropdown
        scrollableYearDropdown
      />
    </div>
  );
}

在這個例子中：

minDate={new Date()}確保過去的日期不能被選擇。
filterDate用於禁用週末（星期六和星期日）。
showYearDropdown和scrollableYearDropdown添加了一個下拉菜單，以便快速更改年份。

日期選擇器方法

react-datepicker庫提供了一些有用的方法。下面是一個表格，總結了一些：

方法	描述
`setOpen(boolean)`	手動設定日曆的打開狀態。
`setFocus()`	手動將焦點設置在輸入框上。
`handleCalendarClose()`	手動關閉日曆。
`handleCalendarOpen()`	手動打開日曆。

你可以通過創建一個對DatePicker組件的引用來使用這些方法：

const datePickerRef = useRef(null);

// 之後在你的JSX中
<DatePicker ref={datePickerRef} />

// 使用一個方法
datePickerRef.current.setOpen(true);

結論

恭喜你！你剛剛學會了如何在React中實現和定制日期選擇器。這個強大的工具將使用戶在你的應用程序中選擇日期變得非常方便。

記住，掌握React（或任何編程概念）的關鍵是練習。試著在你的專案中添加日期選擇器，嘗試不同的屬性，並不要害怕深入文檔以了解更先進的功能。

快樂編程，並願你的日期總是選擇得恰到好處！?️?‍?

Credits: Image by storyset