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;

 實現圖:

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM