自定義 年-月-日 組件

code

import { useState } from 'react'
function Year_Month_Date() {const [yearList, setYearList] = useState([])const [monthList, setMonthList] = useState([])const [dateList, setDateList] = useState([])const [currentYear, setCurrentYear] = useState((new Date()).getFullYear())const [currentMonth, setCurrentMonth] = useState((new Date()).getMonth() + 1)const [currentDate, setCurrentDate] = useState((new Date()).getDate())const computedTime = new Date(`${currentYear}-${currentMonth}-${currentDate}`)useEffect(() => {// 時間console.log(computedTime)}, [currentYear, currentMonth, currentDate])// 年const renderYearList = () => {const _currentYear = (new Date()).getFullYear()const years = []for(let i = _currentYear - 80; i <= _currentYear + 20; i++) {years.push(i)}setYearList(years)}// 月const renderMonthList = () => {const months = []for(let i = 1; i < 13; i++) {months.push(i)}setMonthList(months)}// 日const renderDateList = (year, month) => {const dates = []const currentMonthDateCount = (new Date(year, month, 0)).getDate()for(let i = 1; i <= currentMonthDateCount; i++) {dates.push(i)}setDateList(dates)}// 年月固定useEffect(() => {renderYearList()renderMonthList()}, [])// 每個月多少天根據選擇的年月計算useEffect(() => {renderDateList(currentYear, currentMonth)}, [currentYear, currentMonth])return (<><Flex>{/*年*/}<SelectFieldlabel="Year"labelHiddenvalue={currentYear}onChange={(e) => {setCurrentYear(e.target.value)}}>{yearList.map(item => <option key={item} value={item}>{item} {intl.get("YEAR")}</option>)}</SelectField>{/*月*/}<SelectFieldlabel="month"labelHiddenvalue={currentMonth}onChange={(e) => {setCurrentMonth(e.target.value)}}>{monthList.map(item => <option key={item} value={item}>{item} {intl.get("_MONTH")}</option>)}</SelectField>{/*日*/}<SelectFieldlabel="date"labelHiddenvalue={currentDate}onChange={(e) => {setCurrentDate(e.target.value)}}>{dateList.map(item => <option key={item} value={item}>{item} {intl.get("_DATE")}</option>)}</SelectField></Flex></>)
}

如圖：