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>
    </>
  )
}

如图:

相关推荐
前端开发爱好者21 小时前
Vite 移动端调试利器!开发效率飙升 300%!
前端·javascript·vue.js
BillKu1 天前
容器元素的滚动条回到顶部
前端·javascript·vue.js
weixin_423391931 天前
React 19 全面解析:颠覆性的新特性与实战指南
前端·javascript·react.js
weixin_423391931 天前
React Hooks 钩子
前端·javascript·react.js
CUGGZ1 天前
第三代 React,怎么玩?
前端·javascript·react.js
星哥说事1 天前
狂揽82.7k的star,这款开源可视化神器,轻松创建流程图和图表
前端
硅基宙宇AIGC1 天前
阿里Qoder重磅登场:AI编程平台新王者,程序员的饭碗要换了吗?
前端
影i1 天前
跨域登录 / Token 共享 踩坑记录
前端
小爱同学_1 天前
从前端模块化历史到大厂面试题
前端·javascript·面试
雪中何以赠君别1 天前
AMD、CMD 和 ES6 Module 的区别与演进
前端·javascript