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 相关文章推荐
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
javascript实现的HashMap类代码
Jun 27 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
JS监听滚动和id自动定位滚动
Dec 18 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 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
星际争霸任务指南——神族
2020/03/04 星际争霸
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
php 购物车完整实现代码
2014/06/05 PHP
php实现socket推送技术的示例
2017/12/20 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
JQuery live函数
2010/12/24 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
python超简单解决约瑟夫环问题
2015/05/12 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
python fabric实现远程部署
2017/01/05 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
Python操作mongodb的9个步骤
2018/06/04 Python
Python requests库用法实例详解
2018/08/14 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
Java中compareTo和compare的区别
2016/04/12 面试题
护理专科毕业推荐信
2013/11/10 职场文书
幼儿园中班新学期寄语
2014/01/18 职场文书
行政前台岗位职责
2015/04/16 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
会计专业自荐信范文
2019/05/22 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书