react如何獲取日期控件的值
獲取日期控件值的方法
在React中，獲取日期控件的值取決於使用的庫或原生HTML元素。以下是常見的實現方式：
使用原生HTML5 <input type="date">
import { useState } from 'react';
function DatePicker() {
const [date, setDate] = useState('');
const handleChange = (e) => {
setDate(e.target.value); // 直接獲取輸入框的值
console.log('Selected date:', e.target.value); // 格式為YYYY-MM-DD
};
return <input type="date" value={date} onChange={handleChange} />;
}使用第三方庫（如react-datepicker）
安裝庫：
npm install react-datepicker示例代碼：
import { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
function CustomDatePicker() {
const [selectedDate, setSelectedDate] = useState(null);
const handleDateChange = (date) => {
setSelectedDate(date); // date是JavaScript的Date對象
console.log('Formatted date:', date.toISOString().split('T')[0]);
};
return (
<DatePicker
selected={selectedDate}
onChange={handleDateChange}
dateFormat="yyyy-MM-dd"
/>
);
}處理日期格式轉換
如果需要特定格式的字符串，可使用toLocaleDateString或第三方庫（如date-fns）：
import { format } from 'date-fns';
const formattedDate = selectedDate ? format(selectedDate, 'yyyy/MM/dd') : '';注意事項
- 原生HTML5日期輸入的返回值是字符串（
YYYY-MM-DD格式），而第三方庫通常返回Date對象。 - 時區問題需注意，尤其是後端處理時建議使用UTC或ISO格式。
- 表單提交時，若需字符串格式，需提前轉換
Date對象。
