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

如图:

相关推荐
群联云防护小杜15 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB2428 分钟前
html复习
javascript·microsoft·html
汉得数字平台33 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹40 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦7 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows