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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
初学JavaScript第二章
Sep 30 Javascript
基于jquery的跨域调用文件
Nov 19 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
微信小程序实现漂亮的弹窗效果
May 26 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
基于VSCode调试网页JavaScript代码过程详解
Jul 20 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 Javascript
JavaScript实现登录窗体
Jun 22 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
php中实现记住密码自动登录的代码
2011/03/02 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
javascript 闭包疑问
2010/12/30 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
深入理解node.js http模块
2018/01/24 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
python中map()函数的使用方法示例
2017/09/29 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
苹果香港官方商城:Apple香港
2016/09/14 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
教育实践活动对照检查材料
2014/09/23 职场文书
简单租房协议书
2014/10/21 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
实习单位鉴定意见
2015/06/04 职场文书
好人好事新闻稿
2015/07/17 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript