import React, { Component } from 'react'
|
import { is, fromJS } from 'immutable'
|
import { DatePicker } from 'antd'
|
import moment from 'moment'
|
|
import MKEmitter from '@/utils/events.js'
|
|
const { MonthPicker } = DatePicker
|
|
/**
|
* @description 自定义时间选择器
|
*/
|
class MkDatePicker extends Component {
|
constructor(props) {
|
super(props)
|
|
const config = props.config
|
|
let mode = 'date'
|
let format = 'YYYY-MM-DD'
|
|
if (config.type === 'datemonth') {
|
mode = 'month'
|
format = 'YYYY-MM'
|
} else if (config.precision === 'day') {
|
format = 'YYYY-MM-DD'
|
} else if (config.precision === 'hour') {
|
format = 'YYYY-MM-DD HH'
|
} else if (config.precision === 'minute') {
|
format = 'YYYY-MM-DD HH:mm'
|
} else if (config.precision === 'second') {
|
format = 'YYYY-MM-DD HH:mm:ss'
|
}
|
|
let value = config.initval || null
|
if (value) {
|
value = moment(value, 'YYYY-MM-DD HH:mm:ss')
|
}
|
|
this.state = {
|
value,
|
minDate: config.minDate ? moment(config.minDate).startOf('day') : '',
|
maxDate: config.maxDate ? moment(config.maxDate).endOf('day') : '',
|
mode,
|
format
|
}
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
onChange = (val) => {
|
const { config } = this.props
|
const { format, mode } = this.state
|
let _val = val ? moment(val).format(format) : ''
|
|
if (mode === 'date' && _val) {
|
if (config.precision === 'hour') {
|
_val = _val + ':00:00'
|
} else if (config.precision === 'minute') {
|
_val = _val + ':00'
|
}
|
}
|
|
this.props.onChange(_val)
|
|
if (!config.enter || config.enter === 'false') return
|
|
setTimeout(() => {
|
if (config.enter === 'tab') {
|
MKEmitter.emit('mkFC', 'focus', config.tabUuid)
|
} else if (config.enter === 'sub') {
|
config.tabUuid && MKEmitter.emit('mkFC', 'focus', config.tabUuid)
|
this.props.onSubmit(config.tabUuid, config.errTabUuid)
|
}
|
}, 50)
|
}
|
|
disabledDate = (current) => {
|
const { minDate, maxDate } = this.state
|
|
if (!current || (!maxDate && !minDate)) {
|
return false
|
}
|
|
if (!maxDate) {
|
return current < minDate
|
} else if (!minDate) {
|
return current > maxDate
|
} else {
|
return current < minDate || current > maxDate
|
}
|
}
|
|
render() {
|
const { config } = this.props
|
const { value, mode, format } = this.state
|
|
if (mode === 'date') {
|
return <DatePicker dropdownClassName={'mk-date-picker ' + config.precision} showTime={format !== 'YYYY-MM-DD'} format={format} defaultValue={value} disabledDate={this.disabledDate} disabled={config.readonly} onChange={this.onChange}/>
|
} else if (mode === 'month') {
|
return <MonthPicker defaultValue={value} disabled={config.readonly} onChange={this.onChange}/>
|
}
|
}
|
}
|
|
export default MkDatePicker
|
