一、 设置禁用日期和时间
disabledDate = ( current) => {
return current && current < moment ( ) . startOf ( 'day' ) ;
}
range = ( start, end) => {
const result = [ ] ;
for ( let i = start; i <= end; i++ ) {
result. push ( i) ;
}
return result;
} ;
disabledHours = ( date, type) => {
let hour = moment ( ) . hour ( ) ;
let disabledHours = [ ] ;
const chosedDate = type == "date" ? moment ( date) . date ( ) : moment ( date[ 0 ] ) . date ( ) ;
if ( moment ( ) . date ( ) == chosedDate) {
disabledHours = this . range ( 0 , 24 ) . splice ( 0 , hour) ;
} ;
return disabledHours;
} ;
disabledMinutes = ( date, type) => {
let minute = moment ( ) . minute ( ) ;
let disabledMinutes = [ ] ;
const chosedDate = type == "date" ? moment ( date) . date ( ) : moment ( date[ 0 ] ) . date ( ) ;
if ( moment ( ) . date ( ) == chosedDate) {
disabledMinutes = this . range ( 0 , 60 ) . splice ( 0 , minute+ 1 ) ;
} ;
return disabledMinutes;
} ;
disabledDateTime = ( date) => {
return {
disabledHours: ( ) => disabledHours ( date, 'date' ) ,
disabledMinutes: ( ) => disabledMinutes ( date, 'date' ) ,
disabledSeconds: ( ) => [ ]
} ;
}
disabledRangeTime = ( date, type) => {
if ( type === "start" ) {
return {
disabledHours: ( ) => this . disabledHours ( date, 'range' ) ,
disabledMinutes: ( ) => this . disabledMinutes ( date, 'range' ) ,
disabledSeconds: ( ) => [ ]
} ;
}
}
二、引用禁用函数
import React, { Component } from 'react' ;
import { Form, message, DatePicker } from 'antd' ;
import moment from 'moment' ;
const { RangePicker } = DatePicker;
export default class SetDisabledTime extends Component {
constructor ( props) {
super ( props)
this . state = {
startTime: '' ,
endTime: ''
}
}
render ( ) {
const { startTime, endTime } = this . state;
const formItemLayout = {
labelCol: {
xs: { span: 3 } ,
sm: { span: 3 } ,
} ,
wrapperCol: {
xs: { span: 11 } ,
sm: { span: 11 } ,
} ,
} ;
return (
< >
< Form { ... formItemLayout} >
< Form. Item label= "活动时间:" >
{ getFieldDecorator ( "activityTime" , {
rules: [ { required: true , message: "请选择时间" } ] ,
initialValue: [ moment ( startTime) , moment ( endTime) ]
} ) (
< RangePicker
disabledDate= { this . disabledDate}
disabledTime= { this . disabledRangeTime}
showTime= { { hideDisabledOptions: true } }
/ >
) }
< / Form. Item>
< / Form>
< / >
)
}
}