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

news2024/10/7 6:44:03

自定义 年-月-日 组件

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>
        {/*
          年
        */}
        <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>
    </>
  )
}

如图:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1898396.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【C++】 解决 C++ 语言报错:Invalid Cast

文章目录 引言 无效类型转换&#xff08;Invalid Cast&#xff09;是 C 编程中常见且严重的错误之一。当程序试图进行不合法或不安全的类型转换时&#xff0c;就会发生无效类型转换错误。这种错误不仅会导致程序崩溃&#xff0c;还可能引发不可预测的行为。本文将深入探讨无效…

PLL和CDR的内部结构及其区别

比较PLL和CDR的内部结构及其区别&#xff1a; 基本结构&#xff1a; PLL&#xff08;相位锁定环&#xff09;&#xff1a; 相位检测器环路滤波器压控振荡器&#xff08;VCO&#xff09;分频器&#xff08;可选&#xff0c;用于频率合成&#xff09; CDR&#xff08;时钟数据恢复…

jmeter-beanshell学习2-beanshell断言

继续写&#xff0c;之前写了获取变量&#xff0c;设置变量&#xff0c;今天先写个简单点的断言。 一般情况用响应断言&#xff0c;就挺好使&#xff0c;但是自动化还要生成报告&#xff0c;如果断言失败了&#xff0c;要保存结果&#xff0c;只能用beanshell处理&#xff0c;顺…

昇思25天学习打卡营第17天(+1)|Diffusion扩散模型

1. 学习内容复盘 本文基于Hugging Face&#xff1a;The Annotated Diffusion Model一文翻译迁移而来&#xff0c;同时参考了由浅入深了解Diffusion Model一文。 本教程在Jupyter Notebook上成功运行。如您下载本文档为Python文件&#xff0c;执行Python文件时&#xff0c;请确…

LLM - 神经网络的训练过程

1. 对于回归问题&#xff0c;用损失函数来计算预测值和真实值的差异&#xff0c;一种常用的公式是如下图所示(Mean Square Error)&#xff0c;如果损失函数的值越小说明神经网络学习越准确&#xff0c;所以神经网络训练目标是减小损失函数的值&#xff0c; 2. 对于分类问题&…

MaxKB开源知识库问答系统发布v1.3.0版本,新增强大的工作流引擎

2024年4月12日&#xff0c;1Panel开源项目组正式发布官方开源子项目——MaxKB开源知识库问答系统&#xff08;github.com/1Panel-dev/MaxKB&#xff09;。MaxKB开源项目发布后迅速获得了社区用户的认可&#xff0c;成功登顶GitHub Trending趋势榜主榜。 截至2024年7月4日&…

相关技术 太阳能热水器循环水泵制作技术

网盘 https://pan.baidu.com/s/1oAKwUEGkKnEgxE-F4znKow?pwdidxd 双温区蓄能供热型太阳能热水系统及其工作方法.pdf 双罐叠压节能恒温型太阳能热水机组.pdf 基于傅科电流的循环式风能热水器.pdf 基于太阳能利用的建筑冷热电联产系统及工作方法.pdf 基于太阳能和热泵的双蓄式热…

计算机网络之以太网

上文内容&#xff1a;总线局域网以及冲突的解决方法 1.以太网的起源 1.1起源 60年代末期&#xff0c;夏威夷大学Norman Abramson等研制ALOHA无线网络系统,实现Oahu岛上的主机和其它岛及船上的读卡机和终端通信&#xff1b; 出境信道地址&#xff1a;主机到终端&#xff1…

5款文案自动生成器,快速创作高质量文案

随着科技的发展&#xff0c;市面上出现了许多文案自动生成器&#xff0c;为我们的创作过程提供了极大的便利。无论是为了社交媒体内容创作&#xff0c;还是产品的文案的宣传&#xff0c;文案自动生成器就能为我们快速且高效地生成高质量的文案。以下将为大家分享5款备受赞誉的文…

Zabbix 配置SNMP监控

Zabbix SNMP监控介绍 Zabbix提供了强大的SNMP监控功能&#xff0c;可以用于监控网络设备、服务器和其他支持SNMP协议的设备。SNMP&#xff08;Simple Network Management Protocol&#xff0c;简单网络管理协议&#xff09;是一种广泛用于网络管理的协议。它用于监控网络设备&…

IDEA导入依赖+Maven配置

Maven安装及配置 安装 安装链接&#xff1a;https://archive.apache.org/dist/maven/maven-3/3.6.3/binaries/ 注&#xff1a;建议不要直接安装最新版本&#xff0c;选用常用、稳定的版本安装即可&#xff0c;比如&#xff1a;3.6.3 配置 1> 配置bash_profile文件 终端输…

如何在 SwiftUI 中熟练使用 sensoryFeedback 修饰符

文章目录 前言背景介绍平台支持仅支持watchOS支持watchOS和iOS 基本用法预定义样式根据触发器值选择样式使用场景当值更改时触发使用条件闭包触发使用反馈闭包触发 可以运行 Demo总结 前言 SwiftUI 引入了新的 sensoryFeedback 视图修饰符&#xff0c;使我们能够在所有 Apple …

设计模式探索:单例模式

1. 什么是单例模式? 定义: 单例模式是一种创建型设计模式,它确保一个类只有一个实例,并提供一种全局访问点以访问该实例。常见的场景包括身份证号码、政府等需要唯一实例的情况。 单例模式通常用于那些需要在应用程序中仅存在一个实例的情况,例如配置管理器、线程池、数据…

单位立方体各个面上的法向量,向量场以及每个面上的通量

单位立方体各个面上的法向量&#xff0c;向量场 F ( x , y , z ) \mathbf{F} (x, y, z) F(x,y,z) 以及每个面上的通量 flyfish 假设我们有一个单位立方体&#xff0c;向量场 F ( x , y , z ) \mathbf{F} (x, y, z) F(x,y,z) 在该立方体上。 法向量 &#xff1a;单位立方…

谷粒商城笔记-04-项目微服务架构图简介

文章目录 一&#xff0c;网络二&#xff0c;网关1&#xff0c;网关选型2&#xff0c;认证鉴权3&#xff0c;动态路由4&#xff0c;限流5&#xff0c;负载均衡6&#xff0c;熔断降级 三&#xff0c;微服务四&#xff0c;存储层五&#xff0c;服务治理六&#xff0c;日志系统七&a…

STM32和DHT11使用显示温湿度度(代码理解)+单总线协议

基于STM32CT&#xff0c;利用DHT11采集温湿度数据&#xff0c;在OLED上显示。一定要阅读DHT11数据手册。 1、 DHT11温湿度传感器 引脚说明 1、VDD 供电3.3&#xff5e;5.5V DC 2、DATA 串行数据&#xff0c;单总线 3、NC 空脚 4、GND 接地&#xff0c;电源负极 硬件电路 微…

Git错误分析

错误案例1&#xff1a; 原因&#xff1a;TortoiseGit多次安装导致&#xff0c;会记录首次安装路径&#xff0c;若安装路径改变&#xff0c;需要配置最后安装的路径。

gitLab使用流程

标题1.配置账户 git config --global user.name git config --global user.email mygitlabmali.cn 标题2.生成秘匙 ssh-keygen -t rsa -C “mygitlabmail.cn” 。 //输入命令后一直回车 &#xff0c;输入命令后一直回车&#xff08;密码可以不填&#xff09;&#xff0c;至…

重载赋值运算符

c编译器可能会给类添加四个函数 1默认构造函数 2默认析构函数 3默认拷贝构造函数&#xff0c;对成员变量进行浅拷贝。 4默认赋值函数&#xff0c;队成员变量进行浅拷贝。 #include<iostream> using namespace std; class CGirl { public:int m_bh;string m_name;voi…

推荐3款Windows系统的神级软件,免费、轻量、绝对好用!

DiskView DiskView是一款用于管理和查看磁盘空间的工具&#xff0c;它集成了于微软的Windows操作系统资源管理器中&#xff0c;以显示直观的磁盘空间使用情况。该软件通过生成图形化地图&#xff0c;帮助用户组织和管理大量文件和文件夹&#xff0c;从而高效地管理磁盘空间。用…