zoukankan      html  css  js  c++  java
  • 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;
    

     实现图:

     

  • 相关阅读:
    202012-2 期末预测之最佳阈值
    [蓝桥杯][2017年第八届真题]k倍区间
    116. 飞行员兄弟
    P1985 [USACO07OPEN]翻转棋 Fliptile S
    P2882 [USACO07MAR]Face The Right Way G
    730. 机器人跳跃问题
    202012-1 期末预测之安全指数
    SpringMVC 的 JDBC 做 增删改查后 一些总结
    22. VUE 的 V-model 修饰符
    21. VUE 的 V-model 指令(双向绑定input)【主要绑定表单】
  • 原文地址:https://www.cnblogs.com/changyuqing/p/13749924.html
Copyright © 2011-2022 走看看