需求:实现开始和结束时间的选择,并且选择开始时间之后,结束时间不能小于开始时间,或者说先选择了结束时间,开始时间选择的时候只能小于结束时间,不能选择的日期禁用
import { Button, DatePicker } from 'antd'
class DatePickers extends React.Component {
constructor() {
super()
this.state = {
startValue: null,
endValue: null,
endOpen: false,
}
}
render() {
return (
<Datapickerbox className="data-pickerbox">
<DatePicker
//是否显示今天
showToday={false}
//设置开始日期
disabledDate={this.disabledStartDate}
//格式化时间的
format="YYYY-MM-DD HH:mm:ss"
//state中申明一个默认的开始时间为null
value={this.state.startValue}
placeholder='开始日期'
onChange={this.onStartChange}
onOpenChange={this.handleStartOpenChange}
/>
</Datapickerbox>
<Datapickerbox className="data-pickerbox">
<DatePicker
//是否显示今天
showToday={false}
//设置结束不能选择的时间
disabledDate={this.disabledEndDate}
//格式化时间的
format="YYYY-MM-DD HH:mm:ss"
//state中申明一个默认的结束时间为null
value={this.state.endValue}
placeholder='结束日期'
onChange={this.onEndChange}
open={this.state.endOpen}
onOpenChange={this.handleEndOpenChange}
/>
</Datapickerbox>
<Button
onClick={this.getAllValue}
id="btn-search"
type="primary"
size="small">查询
</Button>
)
}
//设置开始日期不能选择的时间
disabledStartDate = startValue => {
const { endValue } = this.state
if (!startValue || !endValue) {
return false
}
return startValue.valueOf() > endValue.valueOf()
}
//设置结束不能选择的时间
disabledEndDate = endValue => {
const { startValue } = this.state
if (!endValue || !startValue) {
return false
}
return endValue.valueOf() <= startValue.valueOf()
}
//触发组件改变默认value
onChange = (field, value) => {
this.setState({
[field]: value,
})
}
onStartChange = value => {
this.onChange('startValue', value)
}
onEndChange = value => {
this.onChange('endValue', value)
}
handleStartOpenChange = open => {
//设置开始的弹出框
if (!open) {
this.setState({ endOpen: true })
}
}
handleEndOpenChange = open => {
//结束的弹出框
this.setState({ endOpen: open })
}
//最后就可以打印到获取的时间了
getAllValue=()=>{
console.log(this.state.startValue, this.state.endValue)
// 如果想转时间戳可以
this.state.startValue._d.getTime()
}
}
export default DatePickers
以上就是完整代码,希望能帮到需要的朋友