Antd中单个DatePicker限定时间输入范围操作


Posted in Javascript onOctober 29, 2020

1、某个时间段

import React from 'react'; 
import moment from 'moment';
 
class DateDemo extends React.Component{
 disabledDate = (current) => {
  return current < moment().startOf('day') || current > moment().add(6, 'day') ;
 };
 
 datePickerChange = (date) => {
  console.log(date,'date即为DatePicker选中的时间');
 }
 
 render(){
  return(
   <div>
    <DatePicker 
     disabledDate={this.disabledDate}
     onChange={this.datePickerChange}
    />
   </div>
  )
 }
}

在线查看:单个DatePicker限定时间输入范围

Antd中单个DatePicker限定时间输入范围操作

这样就只能选择从当天算起到七天后的日期,但是时间的时分秒是你选择的时候系统时间的时分秒,这个有需要的话要额外处理,比如设置为当天起始值:

...
//setHours(hours,min,sec,ms)
let day = date ? new Date(date).setHours(0, 0, 0, 0): 0;
...

disabledDate方法中时间相关api是配合JS的日期处理类库:Moment.js使用的,moment().startOf('day') 代表今天,moment().add(6, 'day')代表今天加后6天共七天。其他用法可以去官网查看:http://momentjs.cn/

2、向前或向后时间范围

...
 disabledDate = (current) => {
   return current && current < moment().endOf('day');
 }
...

Antd中单个DatePicker限定时间输入范围操作

更详细的API可以去Antd官网看:https://ant.design/components/date-picker-cn/

补充知识:antd中的disabledDate不可选择时间的处理

我就废话不多说了,大家还是直接看代码吧~

handleData(time){
if(!time){
return false
}else{
// 大于当前日期不能选 time > moment()
// 小于当前日期不能选 time < moment().subtract(1, “days”)
// 只能选前7后7 time < moment().subtract(7, “days”) || time > moment().add(7, ‘d')
return time < moment().subtract(7, “days”) || time > moment().add(7, ‘d')
}
}*

disabledDate = (current) => {
// Can not select days before today and today
//return current && current < moment().endOf(‘day');!!!!!当天之前的不可选,包括当天
return current < moment().subtract(1, ‘day') !!!!!当天之前的不可选,不包括当天
}

以上这篇Antd中单个DatePicker限定时间输入范围操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript实现网络监测的方法
Jul 31 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
微信小程序 教程之模板
Oct 18 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
javascript递归函数定义和用法示例分析
Jul 22 Javascript
微信小程序实现可长按移动控件
Nov 01 #Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 #Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 #Javascript
vue制作toast组件npm包示例代码
Oct 29 #Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 #Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 #Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 #Javascript
You might like
在php MYSQL中插入当前时间
2008/04/06 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
python创建文本文件的简单方法
2020/08/30 Python
python如何将图片转换素描画
2020/09/08 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
财务人员求职自荐书范文
2014/02/10 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
英语故事演讲稿
2014/04/29 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
经验交流材料格式
2014/12/30 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python