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

news/2025/2/9 6:22:47 标签: react.js, javascript, 前端, 前端框架

需求:原定结项时间表单里回显为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:00
        console.log(pro.proLimted, 'pro.proLimted')
    // moment()里不能为空,否则报错,所以取值times的时候做下判断
    const proTIME = moment(times).format('YYYY-MM-DD') // 转化下时间格式, 类似为2025-02-06
        console.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')
    })(
        <DatePicker
            format='YYYY-MM-DD'
            disabledDate={disabledDate}
            placeholder='请选择延期结项时间'
        />
    )}
</FormItem>

  移动端端部分代码:

javascript">import { List, Flex, DatePicker } from 'antd-mobile'

const minDateFun = () => {
    const proLimit = contents && contents[0] && contents[0].proLimit
    if(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 = id
    saveLimitedTime({ // 这块调接口
        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.niftyadmin.cn/n/5845696.html

相关文章

neo4j-解决导入数据后出现:Database ‘xxxx‘ is unavailable. Run :sysinfo for more info.

目录 问题描述 解决方法 重新导入 问题描述 最近在linux上部署了neo4j&#xff0c;参照之前写的博客:neo4j-数据的导出和导入_neo4j数据导入导出-CSDN博客 进行了数据导出、导入操作。但是在进行导入后&#xff0c;重新登录网页版neo4j&#xff0c;发现对应的数据库状态变…

Scala 语法入门

Scala语法入门 1. 定义变量2. 定义方法3. 闭包4. 声明字符串5. 声明数组6. 声明集合7. 异常处理 1. 定义变量 &#xff08;变量的类型在变量名之后等号之前声明&#xff09; 不可变变量(val) 类似于 Java 中的 final 变量&#xff0c;即一旦赋值后&#xff0c;其值不能再被改…

C# OpenCV机器视觉:智能水果采摘

在一个风景如画的小镇边上&#xff0c;有一座阿强家祖传的果园。每到水果成熟的季节&#xff0c;果园里硕果累累&#xff0c;红彤彤的苹果、黄澄澄的梨子、紫莹莹的葡萄&#xff0c;散发着诱人的香气。然而&#xff0c;这丰收的喜悦却总被一件烦心事笼罩 —— 摘水果。 “哎呀…

5分钟了解回归测试

1. 什么是回归测试&#xff08;Regression Testing&#xff09; 回归测试是一个系统的质量控制过程&#xff0c;用于验证最近对软件的更改或更新是否无意中引入了新错误或对以前的功能方面产生了负面影响&#xff08;比如你在家中安装了新的空调系统&#xff0c;发现虽然新的空…

深入探究 C++17 std::is_invocable

文章目录 一、引言二、std::is_invocable 概述代码示例输出结果 三、std::is_invocable 的工作原理简化实现示例 四、std::is_invocable 的相关变体1. std::is_invocable_r2. std::is_nothrow_invocable 和 std::is_nothrow_invocable_r 五、使用场景1. 模板元编程2. 泛型算法 …

陶氏环面包络减速机:为工业视觉检测注入“精准动力”!

在工业4.0时代&#xff0c;视觉检测技术已成为智能制造的核心环节。无论是精密电子元件的检测&#xff0c;还是汽车零部件的质量把控&#xff0c;视觉检测系统都需要极高的精度、稳定性和响应速度。而这一切&#xff0c;离不开一颗强大的“心脏”——陶氏环面包络减速机。 一、…

linux安装oracle19c

安装 安装前检查配置&#xff1a; 挂载50g盘&#xff1a; vgcreate oravg /dev/sdb lvcreate -L 49.8G -n oralv oravg lvscan mkfs.xfs /dev/oravg/oralv 查看uuid blkid 复制分区表 cp /etc/fstab /etc/fstab.bakvi /etc/fstab内容为: /dev/oravg/oralv /u01 xfs defau…

Docker 容器 Elasticsearch 启动失败完整排查记录

背景 在服务器上运行 Docker 容器 es3&#xff0c;但 Elasticsearch 无法正常启动&#xff0c;运行 docker ps -a 发现 es3 处于 Exited (1) 状态&#xff0c;即进程异常退出。 本次排查从错误日志、容器挂载、权限问题、SELinux 影响、内核参数等多个方面入手&#xff0c;最…