antd-react日期组件disabledDate不可选择的日期 (置灰)属性

embedded/2025/2/12 23:56:24/

需求:原定结项时间表单里回显为2025-02-06,延期时间的选择范围要设置从2025-02-07开始选择包括2.7号的; 2.7号之前的置灰,不可选择

 PC端部分代码:

javascript">// react的函数组件写法
const disabledDate = function (current) {console.log(current, 'current')const times = pro.proLimted ? pro.proLimted : '' // 从pro这恶对象里取出proLimted参数,即原定结项时间字段:2025-02-06 17:00:00console.log(pro.proLimted, 'pro.proLimted')// moment()里不能为空,否则报错,所以取值times的时候做下判断const proTIME = moment(times).format('YYYY-MM-DD') // 转化下时间格式, 类似为2025-02-06console.log(proTIME , 'proTIME')const d = new Date(proTIME ) //console.log(d, 'd')d.setDate(d.getDate() + 1)console.log(d.getDate(), 'd.getDate()')return current && current.valueOf() < d.getDate()
}<FormItem {...formItemLayout} label='延期结项时间'>{getFieldDecorator('csTime', {rules: [{require: true, message: '时间不能为空'}],initialValue: moment('csTime', 'YYYY-MM-DD')})(<DatePickerformat='YYYY-MM-DD'disabledDate={disabledDate}placeholder='请选择延期结项时间'/>)}
</FormItem>

  移动端端部分代码:

javascript">import { List, Flex, DatePicker } from 'antd-mobile'const minDateFun = () => {const proLimit = contents && contents[0] && contents[0].proLimitif(proLimit && proLimit !== undefined && proLimit !== null && proLimit !== ''){const d = moment().set({year: new Date(proLimit).getFullYear(),month: new Date(proLimit).getMonth(),date: new Date(proLimit).getDate() +1})return new Date(d)}
}const changeDatePick = (data) => {const proId = idsaveLimitedTime({ // 这块调接口proId, proLimited: moment(data).format(YYYY-MM-DD 17:00:00)})
}<div><Flex align='baseline'><Flex.Item style={{ flex: 2.8 }}><div>原定结项时间</div></Flex.Item><Flex.Item style={{ flex: 7.2 }}><div><DatePicker mode='date'title='请选择时间'extra='请选择结项时间'format='YYYY-MM-DD'minDate={new Date()}maxDate={new Date(moment().set({ yaer: new Date().getFullYear()+1, data: new Date().getDate() }))}onChange={data => changeDatePick(data)}><list.Item arrow='horizontal'>{projrctTime || '请选择结项时间'}</list.Item>   </DatePicker></div></Flex.Item></Flex>
</div><div><Flex align='baseline'><Flex.Item style={{ flex: 2.8 }}><div>延期结项时间</div></Flex.Item><Flex.Item style={{ flex: 7.2 }}><div><DatePicker mode='date'title='请选择时间'extra='&emsp'format='YYYY-MM-DD 17:00:00'minDate={minDateFun()}onChange={onChange}><list.Item arrow='horizontal'>{projrctTime || '请选择结项时间'}</list.Item>   </DatePicker></div></Flex.Item></Flex>
</div>


http://www.ppmy.cn/embedded/161718.html

相关文章

CSS 小技巧 —— CSS 实现 Tooltip 功能-鼠标 hover 之后出现弹层

CSS 小技巧 —— CSS 实现 Tooltip 功能-鼠标 hover 之后出现弹层 1. 两个元素实现 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>纯 CSS 实现 Tooltip 功能-鼠标 hover 之后出现弹层</titl…

npm运行Vue项目报错 error:0308010c:digital envelope routines::unsupported

大家好&#xff0c;我是 程序员码递夫。 问题 VSCode 运行Vue项目&#xff0c;提示错误&#xff1a; building 2/2 modules 0 activeError: error:0308010c:digital envelope routines::unsupported 解决方法 原因是 npm 高版本(大于17)&#xff0c;对ssl的处理做了改进&…

Windows命令行学习(和Linux命令比对记忆

本文侧重于记忆Windows简单命令&#xff0c;所以相关Linux命令演示较少&#xff0c;学习Linux命令详见Linux系统专栏&#xff1b;本文示例版本为Windows 10与Linux 7。 目录 一、文件与目录操作 1、列出当前目录下文件及子目录信息 Windows&#xff1a;dir Linux&#xff1…

SpringBoot单机模式,能否支持一万用户请求并发?

Spring Boot 单机模式能否支持一万用户请求并发&#xff0c;取决于多个因素&#xff1a; 硬件配置&#xff1a;CPU、内存、磁盘I/O和网络带宽是关键。高性能硬件能显著提升并发处理能力。 应用复杂度&#xff1a;业务逻辑复杂度和数据库操作频率会影响性能。复杂的业务逻辑和高…

Docker使用指南与Dockerfile文件详解:从入门到实战

Docker使用指南与Dockerfile文件详解:从入门到实战 文章目录 **Docker使用指南与Dockerfile文件详解:从入门到实战****引言****第一部分:Docker 核心概念速览****1. Docker 基础架构****2. Docker 核心命令****第二部分:Dockerfile 文件深度解析****1. Dockerfile 是什么?…

<论文>DeepSeek-R1:通过强化学习激励大语言模型的推理能力(深度思考)

一、摘要 本文跟大家来一起阅读DeepSeek团队发表于2025年1月的一篇论文《DeepSeek-R1: Incentivizing Reasoning Capability in LLMs via Reinforcement Learning | Papers With Code》&#xff0c;新鲜的DeepSeek-R1推理模型&#xff0c;作者规模属实庞大。如果你正在使用Deep…

运用 LangChain 编排任务处理流水线,实现多轮对话场景

在LangChain中&#xff0c;任务处理流水线和多轮对话的场景可以通过LangChain的链式结构&#xff08;Chain&#xff09;和会话记忆&#xff08;Conversation Memory&#xff09;来实现。LangChain框架旨在简化与大语言模型&#xff08;如 GPT-3&#xff09;进行交互的流程&…

Python----Python高级(网络编程:网络基础:发展历程,IP地址,MAC地址,域名,端口,子网掩码,网关,URL,DHCP,交换机)

一、网络 早期的计算机程序都是在本机上运行的&#xff0c;数据存储和处理都在同一台机器上完成。随着技术的发展&#xff0c;人 们开始有了让计算机之间相互通信的需求。例如安装在个人计算机上的计算器或记事本应用&#xff0c;其运行环 境仅限于个人计算机内部。这种设置虽然…