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 DOM操作小结与实例
Jan 07 Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
js+css3实现炫酷时钟
Aug 18 Javascript
javascript遍历对象的五种方式实例代码
Oct 24 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
Symfony2 session用法实例分析
2016/02/04 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
js控制frameSet示例
2013/09/10 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
django 环境变量配置过程详解
2019/08/06 Python
利用python实现周期财务统计可视化
2019/08/25 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
Django如何批量创建Model
2020/09/01 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
香港零食网购:上仓胃子
2020/06/08 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
店长助理岗位职责
2013/12/13 职场文书
农民工讨薪标语
2014/06/26 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
Ruby处理YAML和json数据
2022/04/18 Ruby
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android