鍦≧eact涓娇鐢╠atepicker缁勪欢鍙互閲囩敤绗笁鏂瑰簱濡侻aterial-UI鎴朢eact-datepicker銆備笅闈㈡槸涓€涓娇鐢≧eact-datepicker鐨勭ず渚嬶細

1. 棣栧厛瀹夎React-datepicker渚濊禆锛?/li>

npm install react-datepicker

2. 鐒跺悗鍦ㄧ粍浠朵腑瀵煎叆React-datepicker锛?/li>

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

const MyDatePicker = () => {
  const [selectedDate, setSelectedDate] = useState(null);

  const handleDateChange = date => {
    setSelectedDate(date);
  };

  return (
    <div>
      <h2>Select a Date:</h2>
      <DatePicker
        selected={selectedDate}
        onChange={handleDateChange}
        dateFormat="dd/MM/yyyy"
      />
    </div>
  );
};

export default MyDatePicker;

3. 鍦ㄤ笂闈㈢殑绀轰緥涓紝鎴戜滑鍒涘缓浜嗕竴涓悕涓篗yDatePicker鐨勫嚱鏁扮粍浠讹紝浣跨敤useState鏉ョ鐞嗛€夊畾鐨勬棩鏈熴€傚湪缁勪欢涓娇鐢―atePicker缁勪欢锛屽苟浼犻€抯elected鍜宱nChange灞炴€ф潵绠＄悊閫夋嫨鐨勬棩鏈熷拰澶勭悊鏃ユ湡鏀瑰彉鐨勫嚱鏁般€?/p>

4. 鏈€鍚庯紝灏哅yDatePicker缁勪欢娣诲姞鍒版偍鐨勫簲鐢ㄧ▼搴忎腑鐨勪换浣曢渶瑕乨atepicker鐨勫湴鏂癸細

import React from 'react';
import MyDatePicker from './MyDatePicker';

const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <MyDatePicker />
    </div>
  );
};

export default App;

杩欐牱灏卞彲浠ュ湪React涓娇鐢╠atepicker缁勪欢浜嗐€傛偍鍙互鏍规嵁闇€瑕佽嚜瀹氫箟鏍峰紡鍜屽姛鑳姐€?/p>