antd日期选择器禁止选择当天之前的时间操作


Posted in Javascript onOctober 29, 2020

使用disabledDate属性(不可选择的日期)

<a-date-picker @change="dateChange" :disabledDate="disabledDate" v-decorator="['endDate']"/>

在js中定义函数并返回

//限制当天之前的日期不可选
  disabledDate(current) {
   return current && current <moment().subtract(1, "days"); //当天之前的不可选,不包括当天
  //return current && current < moment().endOf(‘day');当天之前的不可选,包括当天
  }

补充知识:antd DatePicker RangePicker限制时间范围,其中结束时间限制时分秒不可选

需求:选择时间区间,且只能选择当前时刻之前的时间,且时分秒也要做限制。(比如现在是2019-11-13 10:29:31,那就只能选择此刻以前的,尚未发生的时间不可选。)

期望图如下:

antd日期选择器禁止选择当天之前的时间操作

antd日期选择器禁止选择当天之前的时间操作

实现:

1. 首先在页面引入时间控件与moment插件

import { DatePicker } from 'antd';
import moment from 'moment';
const { RangePicker } = DatePicker;

2. 在render中使用时间控件。

限制日期不可选是disabledDate,限制时间不可选是disabledTime(我是与form表单一起使用,可根据情况自行选择)

<FormItem label="回溯时间区间" {...formItemLayout}>
    {getFieldDecorator("time",{
      rules: [{
       required: true,
       message: "请选择回溯区间"
      }],
     })(
     <RangePicker
      disabledDate={this.disabledDate} // 限制日期不可选
      disabledTime={this.disabledDateTime} // 限制时间不可选
      format="YYYY-MM-DD HH:mm:ss" // 时间格式
      placeholder={['开始时间', '结束时间']}
      showTime // 增加时间选择按钮
     />
     )}
    </FormItem>

3. 用函数做具体的逻辑判断。

disabledDate=(current)=>{
  return current && current >= moment().endOf('day'); // 选择时间要大于等于当前天。若今天不能被选择,去掉等号即可。
 }
 range = (start, end) => {
  const result = [];
  for (let i = start; i <= end; i++) {
   result.push(i);
  }
  return result;
 };
 disabledDateTime = (dates,partial) => {
  let hours = moment().hours();//0~23
  let minutes = moment().minutes();//0~59
  let seconds = moment().seconds();//0~59
  //当日只能选择当前时间之后的时间点
  if (dates&&moment(dates[1]).date() === moment().date()&&partial=='end') {
   return {
    disabledHours: () => this.range(hours+1,23),
    disabledMinutes: () => this.range(minutes+1,59),
    disabledSeconds: () => this.range(seconds+1,59),
   };
  }
 }

以上这篇antd日期选择器禁止选择当天之前的时间操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.location.hash 属性使用说明
Mar 20 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
js清理Word格式示例代码
Feb 13 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
代码整洁之道(重构)
Oct 25 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 Javascript
vue制作toast组件npm包示例代码
Oct 29 #Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 #Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 #Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 #Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 #Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 #Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 #Javascript
You might like
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
探究python中open函数的使用
2016/03/01 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
Python日志syslog使用原理详解
2020/02/18 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
python程序需要编译吗
2020/06/19 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
python如何构建mock接口服务
2021/01/28 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
中国旅游网站:同程旅游
2016/09/11 全球购物
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
常见的软件开发流程有哪些
2015/11/14 面试题
《画杨桃》教学反思
2014/04/13 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书