zoukankan      html  css  js  c++  java
  • Ant Design中日期选择器的disabledDate用法

    ant design 组件库中  经常 用到了DatePicker日期组件,其中在遇到有具体条件日期范围的时候,需要注意几点,以下是几个例子:

    1、前端自己规定日期

    <DatePicker disabledDate={disabledDate} />



    const disabledDate = (current) => {
    return current && current < moment().endOf(‘day’);  // 当天之前的不可选,包括当天

    return current < moment().subtract(29, 'days') || current > moment(); //  当天之前30天内可选。其他不可选 当天也可选  
    return current < moment().subtract(30, 'day') || current &&current.endOf('day') > moment();      // 当天之前30天可选,其他不可选,当天也不能选
     };
    2、接口传过来指定日期能选择,其余禁止
    cronDateList为接口传递过来的日期数组
    <DatePicker  size="large"  style={{'100%'}}  disabledDate={(current)=>disabledDate(current,cronDateList)} placeholder="请选择时间" />

    const disabledDate = (current,arr) =>{
    let ff = false;
    ff =  !arr.some((son,index,arr) => {
    return  current.isSame(son,'day')
    })
    return ff;
    };
    
    
    
    
  • 相关阅读:
    Celery
    mysql 8.0.12 创建并授权出现的问题
    request对象
    Haystack搜索框架
    Django的缓存机制
    跨域问题
    解析器
    url控制器与响应器
    学期总结
    C语言I博客作业09
  • 原文地址:https://www.cnblogs.com/aloneindefeat/p/12021992.html
Copyright © 2011-2022 走看看