import React, { Component } from 'react'
import { DatePicker, Button } from 'antd';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
export default class TimelineCom extends Component {
state = {
startValue: null,
endValue: null,
endOpen: false,
}
//设置开始日期不能选择的时间
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()
}
render() {
return (
<div>
<DatePicker
//是否显示今天
showToday={false}
//设置开始日期
disabledDate={this.disabledStartDate}
//格式化时间的
// format="YYYY-MM-DD HH:mm:ss"
format="YYYY-MM-DD"
//state中申明一个默认的开始时间为null
value={this.state.startValue}
placeholder='开始日期'
onChange={this.onStartChange}
onOpenChange={this.handleStartOpenChange}
locale={locale}
/>
<DatePicker
//是否显示今天
showToday={false}
//设置结束不能选择的时间
disabledDate={this.disabledEndDate}
//格式化时间的
// format="YYYY-MM-DD HH:mm:ss"
format="YYYY-MM-DD"
//state中申明一个默认的结束时间为null
value={this.state.endValue}
placeholder='结束日期'
onChange={this.onEndChange}
open={this.state.endOpen}
onOpenChange={this.handleEndOpenChange}
locale={locale}
/>
<Button
onClick={this.getAllValue}
id="btn-search"
type="primary"
size="small">查询
</Button>
</div>
)
}
}