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 相关文章推荐
简单常用的幻灯片播放实现代码
Sep 25 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
详解小程序用户登录状态检查与更新实例
May 15 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
js new Date()实例测试
Oct 31 Javascript
微信小程序获取当前位置和城市名
Nov 13 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
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个人网站架设连环讲(四)
2006/10/09 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
JavaScript自定义事件介绍
2013/08/29 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
Python的标准模块包json详解
2017/03/13 Python
python版简单工厂模式
2017/10/16 Python
机器学习python实战之决策树
2017/11/01 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
python绘制动态曲线教程
2020/02/24 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
自荐信格式
2013/12/01 职场文书
园林毕业生自我鉴定范文
2013/12/29 职场文书
出纳担保书范文
2014/04/02 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
教代会开幕词
2015/01/28 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
Python Parser的用法
2021/05/12 Python
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python
vue实现在data里引入相对路径
2022/06/05 Vue.js