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

 更新时间:2020年10月29日 11:38:53   作者:GuanJdoJ  
这篇文章主要介绍了Antd中单个DatePicker限定时间输入范围操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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限定时间输入范围

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

...
//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');
 }
...

更详细的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限定时间输入范围操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解vue-cli中的ESlint配置文件eslintrc.js

    详解vue-cli中的ESlint配置文件eslintrc.js

    本篇文章主要介绍了vue-cli中的ESlint配置文件eslintrc.js详解 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue如何实现列表自动滚动、向上滚动的效果(vue-seamless-scroll)

    vue如何实现列表自动滚动、向上滚动的效果(vue-seamless-scroll)

    这篇文章主要介绍了vue如何实现列表自动滚动、向上滚动的效果(vue-seamless-scroll),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 一文详解怎么安装离线vue环境

    一文详解怎么安装离线vue环境

    这篇文章主要给大家介绍了关于怎么安装离线vue环境的相关资料,由于公司要求在内网开发项目,而内网不能连接外网,因此只能离线安装vue环境,需要的朋友可以参考下
    2023-12-12
  • vue深拷贝的3种实现方式小结

    vue深拷贝的3种实现方式小结

    当使用同一个对象产生冲突时,可以使用lodash包,对该对象进行深拷贝,从而使操作的对象为不同的对象,这篇文章主要给大家介绍了关于vue深拷贝的3种实现方式,需要的朋友可以参考下
    2023-02-02
  • vue 点击删除常用方式小结

    vue 点击删除常用方式小结

    这篇文章主要介绍了vue 点击删除常用方式小结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue 换肤的示例实践

    Vue 换肤的示例实践

    本篇文章主要介绍了Vue 换肤的示例实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue利用vue-baidu-map实现获取经纬度和搜索地址

    Vue利用vue-baidu-map实现获取经纬度和搜索地址

    在开发项目的时候,发现需要获取经纬度,由于这个项目是用vue写的,最后决定使用vue-baidu-map来快速获取经纬度,感兴趣的可以了解一下
    2022-09-09
  • vue 中使用 watch 出现了如下的报错的原因分析

    vue 中使用 watch 出现了如下的报错的原因分析

    这篇文章主要介绍了vue 中使用 watch 出现了如下的报错信息的原因分析及解决方法,本文附有代码解决方案,非常不错,需要的朋友可以参考下
    2019-05-05
  • electron打包vue项目的方法 步骤

    electron打包vue项目的方法 步骤

    本文主要介绍了electron打包vue项目,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue 实现复制内容到粘贴板clipboard的方法

    vue 实现复制内容到粘贴板clipboard的方法

    下面小编就为大家分享一篇vue 实现复制内容到粘贴板clipboard的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03

最新评论