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的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
redux-saga 初识和使用
Mar 10 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
vue中实现图片压缩 file文件的方法
May 28 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生成月历代码
2007/06/14 PHP
php 设计模式之 单例模式
2008/12/19 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
Python基于PycURL实现POST的方法
2015/07/25 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
分享6个隐藏的python功能
2017/12/07 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
Random 在 Python 中的使用方法
2018/08/09 Python
Python单元测试与测试用例简析
2019/11/09 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
python搜索算法原理及实例讲解
2020/11/18 Python
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
企业治理工作自我评价
2013/09/26 职场文书
销售文员岗位职责
2013/11/29 职场文书
社区学习十八大感想
2014/01/22 职场文书
一般纳税人申请报告
2015/05/18 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
Redis RDB技术底层原理详解
2021/09/04 Redis