react 自定义 年-月-日 组件,单独选择年、月、日,并且产生联动

自定义 年-月-日 组件

code

js 复制代码
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>
        {/*
          年
        */}
        <SelectField
          label="Year"
          labelHidden
          value={currentYear}
          onChange={(e) => {setCurrentYear(e.target.value)}}
        >
          {
            yearList.map(item => <option key={item} value={item}>{item} {intl.get("YEAR")}</option>)
          }
        </SelectField>
        {/*
          月
        */}
        <SelectField
          label="month"
          labelHidden
          value={currentMonth}
          onChange={(e) => {setCurrentMonth(e.target.value)}}
        >
          {
            monthList.map(item => <option key={item} value={item}>{item} {intl.get("_MONTH")}</option>)
          }
        </SelectField>
        {/*
          日
        */}
        <SelectField
          label="date"
          labelHidden
          value={currentDate}
          onChange={(e) => {setCurrentDate(e.target.value)}}
        >
          {
            dateList.map(item => <option key={item} value={item}>{item} {intl.get("_DATE")}</option>)
          }
        </SelectField>
      </Flex>
    </>
  )
}

如图:

相关推荐
中微子18 分钟前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina21 分钟前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路1 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_1 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码1 小时前
1.
react.js·node.js·angular.js
伍哥的传说2 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409192 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding2 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜2 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD2 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js