antd DatePicker限制日期的选择
import React from 'react';
import ReactDOM from 'react-dom';
import {Input,DatePicker,Form,Col,Button,Select,TimePicker} from 'antd';
import 'antd/dist/antd.css';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import 'moment/locale/zh-cn';
import moment from 'moment';
import ChildrenCom from './children-com.js';
moment.locale('zh-cn');
const { RangePicker } = DatePicker;
const { Option } = Select; class FormItem extends React.Component{
constructor(props){
super(props);
}
dateChange = (date,dateString)=>{
this.setState({
endTime:dateString
})
};
// 日期限制
disabledDate=(current)=>{
let dateTime = new Date(+new Date() +8*3600*1000).toISOString();
let timeArray =dateTime.split("T")[0].split("-");
let newDate = timeArray[0]+"-"+timeArray[1]+"-"+timeArray[2] ;//当前年月日
let nexDate = timeArray[0]+"-"+(Number(timeArray[1])+1) ;//下个月
// 1、限制只能选择当前月份的日期并且今天之前的日期不可选择
// return (current && current< moment(newDate)) || (current && current > moment(nexDate));
// 2、限制今天之前的日期不能选择
//return current && current< moment(newDate) ;
// 3、限制只能选择当天的时间
// return current < moment(new Date()) || current > moment().endOf('day'); } render(){
// console.log(this.props);
// const { getFieldDecorator } = this.props.form;
return(
<div>
<DatePicker
showTime
disabledDate = {this.disabledDate}
value={
this.state.endTime?moment(this.state.endTime,"YYYY-MM-DD HH:mm:ss"):moment()
}
onChange={this.dateChange}
format="YYYY-MM-DD HH:mm:ss"
/>
</div>
)
}
}
export default FormItem;
实现图:

antd DatePicker限制日期的选择的更多相关文章
- 日期时间范围选择插件:daterangepicker使用总结
分享说明: 项目中要使用日期时间范围选择对数据进行筛选;精确到年月日 时分秒;起初,使用了layui的时间日期选择插件;但是在IIE8第一次点击会报设置格式错误;研究了很久没解决,但能确定不是layu ...
- Jquery UI的日历控件datepicker限制日期(转)
网上找到这篇文章:http://www.jssay.com/blog/index.php/2010/04/27/%E5%A6%82%E4%BD%95%E7%A6%81%E7%94%A8datepick ...
- easyui扩展-日期范围选择.
参考: http://www.5imvc.com/Rep https://github.com/dangrossman/bootstrap-daterangepicker * 特性: * (1)基本功 ...
- IOS 设置ios中DatePicker的日期为中文格式
设置ios中DatePicker的日期为中文格式 1.在模拟器中的“设置”-“通用”-“多语言环境”-“语言”设置为“简体中文”, 2.“区域格式”设置为“中国”.
- vue知识点----element UI+vue关于日期范围选择的操作,picker-options属性的使用
需求场景如下: 指定起止日期,后选的将会受到先选的限制 不同的日期选择器,不过也存在关联关系 实现方法不难,利用了 change 事件,动态改变 picker-options 中的 disableDa ...
- element UI+vue关于日期范围选择的操作,picker-options属性的使用
一般 <el-date-picker />使用会出现起始日期和结束日期,结束日期不能早与起始日期,选择了其实日期后,结束日期大于起始日期的不可选,置灰,同理先选结束日期后再选起始日期,那么 ...
- datepicker 日期连续选择(需要改源码)
先上效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- element-ui日期组件DatePicker设置日期选择范围Picker Options
element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期 ...
- Element DatePicker日期范围选择
前7天后7天 <el-date-picker v-model="value1" type="date" :picker-options="pic ...
- WPF之DatePicker使其只能选择日期,不能输入日期
<DatePicker.Resources> <Style TargetType="DatePickerTextBox"> <S ...
随机推荐
- 【vite+pinia】
vite 轻量快速热重载,开发环境中不需要打包操作,可以快速冷启动 按需编译,不需要等待整个应用编译完成 pinia 支持vue2和vue3,是vue专属的状态管理库,允许跨组件或者页面 共享状态 与 ...
- 【Linux】Linux网络编程
socket 默认开启的socket是阻塞的,想要设置非阻塞的话,可以用 fcntl设置为 nonblock:或者使用setsockopt进行更多设置: 一般使用推荐 设成nonblock,然后epo ...
- 利用Word文档的宏命令,仿信纸写文件报告
一,首先写好稿件内容. 二,选择合适字体,然后设置信纸下划线格式. 三,启用宏命令.文件-选项-信任中心-信任中心设置-启用所有宏. 四,创建宏命令.视图-宏-创建一个宏 Sub 字体修改()'' 字 ...
- 容器 之搭建 jenkins ci 平台
1 部署 gitlab docker run -d \ --name gitlab \ -p 8443:443 \ -p 80:80 \ -p 9998:22 \ -v $PWD/config:/et ...
- js中各种导出和导入
exports和module exports的区别: exports是module exports的地址引用 export和export default的区别: export和export d ...
- jemter 分布式压测
1.测试机搭建 首选 压力机A,压力机B,压力机C, 压力机A作为控制台 压力机B,压力机C作为分布式的测试机 压力机Aip:172.16.23.69, 压力机Bip:192.168.184.128 ...
- Java面向对象编程导论
面向对象编程简介 JAVA是一门面向对象的编程语言.面向对象编程范式与面向过程编程范式同属于命令式编程范式,与函数式编程范式相区别.在面向对象编程范式中,我们将我们要处理的系统的业务逻辑表现为对象之间 ...
- ElasticSearch入门学习笔记
ElasticSearch入门笔记 分页查询 from: 开始位置 size: 查多少条 GET /credit_enterprise_info/_search { "query" ...
- Eclipse设置背景色等
1.设置背景色 a.Window->Preferences->General->Editors->Text Editors b.选择Background color选择自定义颜 ...
- python36
无限循环 如果条件判断语句永远为 true,循环将会无限的执行下去,如下实例: 实例 #!/usr/bin/python # -*- coding: UTF-8 -*- var = 1 while v ...