antd 日期时间选择_antd日期选择器禁止选择当天之前的时间操作
使用disabledDate属性(不可选择的日期)
在js中定义函数并返回
//限制当天之前的日期不可选
disabledDate(current) {
return current && current
//return current && current < moment().endOf(‘day');当天之前的不可选,包括当天
}
补充知识:antd DatePicker RangePicker限制时间范围,其中结束时间限制时分秒不可选
需求:选择时间区间,且只能选择当前时刻之前的时间,且时分秒也要做限制。(比如现在是2019-11-13 10:29:31,那就只能选择此刻以前的,尚未发生的时间不可选。)
期望图如下:
实现:
1. 首先在页面引入时间控件与moment插件
import { DatePicker } from 'antd';
import moment from 'moment';
const { RangePicker } = DatePicker;
2. 在render中使用时间控件。
限制日期不可选是disabledDate,限制时间不可选是disabledTime(我是与form表单一起使用,可根据情况自行选择)
{getFieldDecorator("time",{
rules: [{
required: true,
message: "请选择回溯区间"
}],
})(
disabledDate={this.disabledDate} // 限制日期不可选
disabledTime={this.disabledDateTime} // 限制时间不可选
format="YYYY-MM-DD HH:mm:ss" // 时间格式
placeholder={['开始时间', '结束时间']}
showTime // 增加时间选择按钮
/>
)}
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日期选择器禁止选择当天之前的时间操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
时间: 2020-10-28
antd 日期时间选择_antd日期选择器禁止选择当天之前的时间操作相关推荐
- antd 日期时间选择_AntD日期选择器组件DatePicker默认展示当前时间前一个周四
util中写个js方法 // 取当前时间的前一个周四 export const getThursday = () => { let now = new Date(); let nowTime = ...
- mx-date-picker Uni-app日期时间选择插件,支持更多选择方式(日期范围,日期时间范围)
Uni-app日期时间选择插件,支持更多选择方式(日期范围,日期时间范围) 日期时间选择器 DatePicker 介绍 一款高颜值.多场景的日期时间选择器,提供自定义颜色/格式/文案等. 该插件采用s ...
- vue2 + elementui 日期时间选择器 禁止选择当前时间之前的日期及时间,并添加相应校验规则
项目里有这样一个需求:文章设置的预发布时间不得早于当前时间(包括日期和时分秒时间). 具体实现如下: 1.在日期时间选择其中设置禁止选中(包括日期和时间) (1)在html(template)中, 通 ...
- element-plus DateTimePicker 日期时间选择器禁止选择当日之前的日期
vue3使用element-plus的DateTimePicker 日期时间选择器组件时,禁止选择当日之前的日期. 在el-date-picker使用disabled-date: <el-dat ...
- vue项目中elementUI的日期时间选择器的默认修改以及能选择当天的未来时间24点
在elementUI的el-date-picker中默认为选中的0点到第二个选中的0点 相应代码: <el-date-picker size="mini" v-model=& ...
- element 时间选择器禁止选择以前或以后的时间
<el-date-picker v-model="certificatetime" value-format="yyyy-MM-dd" :picker-o ...
- Ant Design Vue日期选择器,禁止选择当前之前的时间
a-date-picker时间选择器 Ant Desugn Vue的时间选择器,也遇到了一些问题,就想记录一下,自认为水平不是很高,欢迎批评指正 //标签 <a-date-picker:show ...
- DatePicker 日期控件,禁止选择当前之前(之后)时间
一.直接上代码 <el-date-pickerv-model="form.endDate"type="date"value-format="yy ...
- iview+时间选择器+禁止选择事件
前言: iview的时间框禁止事件 使用它自身的options:bbyfOptionsbbyfOptions:{//我这里限制是当前时间之后和两年前都不能选择disabledDate (date) { ...
最新文章
- spark rdd Transformation和Action 剖析
- 一个地址或二维码自动识别设备,并跳转到各自相应的下载地址,兼容微信
- 【Linux】11.将ubuntu电脑设置为一台可远程ssh或sftp访问的服务器
- 说说 XSRF 防范
- 调集群,我的姿势不对,好累!
- 动态时间规整_动态规划-数组系列(10%)
- 好男人必看!女生的30条隐私……
- 学计算机的心理300字,心理的作文300字7篇
- NumPy Cookbook 带注释源码 六、NumPy 特殊数组与通用函数
- uml+oopc嵌入式c语言开发精讲_新的程序开发模式出现,传统的嵌入式C语言程序员快要灭绝了?...
- php zrem,Redis Zrem 命令
- NestedScrollView、ScrollView 加载完自动滑动至底部问题的解决方案
- c语言 队列方法的编写
- 干货满满!!!盘点交互式甘特图控件VARCHART XGantt用户手册、视频教程!
- Qt自定义实现的日历控件
- java cad polyline,为AUTOCAD编写系列批量处理程序
- 使用Layui搭建后台管理界面
- 【洛谷P2123】皇后游戏
- python startswith正则表达式_Python 正则表达式
- 线性丢番图方程的C++实现