在React中使用datepicker組件可以采用第三方庫如Material-UI或React-datepicker。下面是一個使用React-datepicker的示例:
npm install react-datepicker
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;
在上面的示例中,我們創建了一個名為MyDatePicker的函數組件,使用useState來管理選定的日期。在組件中使用DatePicker組件,并傳遞selected和onChange屬性來管理選擇的日期和處理日期改變的函數。
最后,將MyDatePicker組件添加到您的應用程序中的任何需要datepicker的地方:
import React from 'react';
import MyDatePicker from './MyDatePicker';
const App = () => {
return (
<div>
<h1>My App</h1>
<MyDatePicker />
</div>
);
};
export default App;
這樣就可以在React中使用datepicker組件了。您可以根據需要自定義樣式和功能。