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) ;
          
                                    return current < moment().startOf('day');
		// 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限制日期的选择的更多相关文章

  1. 日期时间范围选择插件:daterangepicker使用总结

    分享说明: 项目中要使用日期时间范围选择对数据进行筛选;精确到年月日 时分秒;起初,使用了layui的时间日期选择插件;但是在IIE8第一次点击会报设置格式错误;研究了很久没解决,但能确定不是layu ...

  2. 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 ...

  3. easyui扩展-日期范围选择.

    参考: http://www.5imvc.com/Rep https://github.com/dangrossman/bootstrap-daterangepicker * 特性: * (1)基本功 ...

  4. IOS 设置ios中DatePicker的日期为中文格式

    设置ios中DatePicker的日期为中文格式 1.在模拟器中的“设置”-“通用”-“多语言环境”-“语言”设置为“简体中文”, 2.“区域格式”设置为“中国”.

  5. vue知识点----element UI+vue关于日期范围选择的操作,picker-options属性的使用

    需求场景如下: 指定起止日期,后选的将会受到先选的限制 不同的日期选择器,不过也存在关联关系 实现方法不难,利用了 change 事件,动态改变 picker-options 中的 disableDa ...

  6. element UI+vue关于日期范围选择的操作,picker-options属性的使用

    一般 <el-date-picker />使用会出现起始日期和结束日期,结束日期不能早与起始日期,选择了其实日期后,结束日期大于起始日期的不可选,置灰,同理先选结束日期后再选起始日期,那么 ...

  7. datepicker 日期连续选择(需要改源码)

    先上效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  8. element-ui日期组件DatePicker设置日期选择范围Picker Options

    element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期 ...

  9. Element DatePicker日期范围选择

    前7天后7天 <el-date-picker v-model="value1" type="date" :picker-options="pic ...

  10. WPF之DatePicker使其只能选择日期,不能输入日期

    <DatePicker.Resources>  <Style TargetType="DatePickerTextBox">           <S ...

随机推荐

  1. Mac下MySQL下载及安装

    ​ 1在浏览器当中输入地址: https://downloads.mysql.com/archives/community/​ 1. 1.1,选择mysql版本,它会自动对应某个版本macOS,1.2 ...

  2. ubuntu配置phpmyadmin

    之前已经把LNMP环境搭建好了 安装: sudo apt-get install phpmyadmin 安装必要依赖 sudo apt-get install php-mbstring sudo ap ...

  3. linux 源码安装 xrdp

    前言xrdp可以做两件事,第一件事就是可以使得linux支持RDP协议,使得linux桌面能够通过mstsc连接,第二件事就是RDP代理,我们能通过xrdp连接到其他人的RDP资源 前者,需要编译xr ...

  4. Delphi播放铃声

    两种方式: 一.简单直接 uses MMSystem; procedure TFmSound.playBtnClick(Sender: TObject); begin PlaySound(PChar( ...

  5. openGL 学习笔记 (二) 使用GL API 绘制出属于自己的矩形

    在OpenGL中所有的事物都是在3D空间中,但是我们所看到的屏幕成像却是2D的像素数组.这导致OpenGL的大部分工作就是把得到的3D坐标转换为适应屏幕的2D图像.转换的整个处理过程是由OpenGL的 ...

  6. notepad++解决粘贴复制代码行数问题

    一.打开 Notepad++,按住 Alt,鼠标点击拖出选择框,这个是列选方法.如图: 然后删除即可 二. 1.将带行数的代码粘贴复制到notepad++中: 2.按ctrl+f,选中替换,选中正则表 ...

  7. Flutter tab切换保持页面状态的两种方法

    当通过底部tabBar将页面在"首页"和"分类"之间进行切换的时候,每一次进入页面的时候该页面的数据都会重新加载.那么如何让页面保持原来的状态,而不是每次都要重 ...

  8. 004. html篇之《标签分类和嵌套规则》

    html篇之<标签分类和嵌套规则> 一.常用标签 (1) <div></div> 一个区块容器标记,可以包含图片.表格.段落等各种html元素 (2) <sp ...

  9. 分布式锁 -- redis

    原理 redis设置一个key和value,如果存在则获取锁失败,不存在则获取锁成功处理业务,业务处理完成后删除这条数据,可以带个失效时间. 代码 public void handleInvoice( ...

  10. Wahahahehehe 随笔归档

    [连载教程类] <RISC-V MCU 原理与应用> 1. 计算机理论模型--图灵机 2. 从图灵机到计算机 3. MCU构成及其运行原理 <RISC-V MCU 开发那些事> ...