| | |
| | | const config = props.config |
| | | |
| | | let mode = 'date' |
| | | let format = 'YYYY-MM-DD' |
| | | let format = config.format || 'YYYY-MM-DD' |
| | | |
| | | if (config.type === 'datemonth') { |
| | | mode = 'month' |
| | | format = 'YYYY-MM' |
| | | } else if (config.type === 'week') { |
| | | mode = 'week' |
| | | format = 'YYYY-MM-DD' |
| | | } else if (config.type === 'daterange') { |
| | | mode = 'daterange' |
| | | format = 'YYYY-MM-DD' |
| | | } |
| | | |
| | | let value = config.initval || null |
| | | |
| | | if (mode === 'daterange') { |
| | |
| | | value = moment(value, format) |
| | | } |
| | | |
| | | let presets = null |
| | | if (mode === 'daterange' && format === 'YYYY-MM-DD' && sessionStorage.getItem('lang') === 'zh-CN') { |
| | | presets = { |
| | | '今天': [moment(), moment()], |
| | | '当月': [moment().startOf('month'), moment().endOf('month')], |
| | | '上月': [moment().subtract(1, 'months').startOf('month'), moment().subtract(1, 'months').endOf('month')], |
| | | } |
| | | } |
| | | |
| | | this.state = { |
| | | value, |
| | | mode, |
| | | format |
| | | precision: config.precision || 'day', |
| | | format, |
| | | presets |
| | | } |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | UNSAFE_componentWillReceiveProps (nextProps) { |
| | | const { config } = this.props |
| | | |
| | | if (config.checkShift && nextProps.config.initval && nextProps.config.initval !== config.initval) { |
| | | let value = nextProps.config.initval || null |
| | | |
| | | if (this.state.mode === 'daterange') { |
| | | if (value) { |
| | | let val = value.split(',') |
| | | value = [moment(val[0], this.state.format), moment(val[1], this.state.format)] |
| | | } else { |
| | | value = [null, null] |
| | | } |
| | | } else if (value) { |
| | | value = moment(value, this.state.format) |
| | | } |
| | | |
| | | this.setState({ |
| | | value: value |
| | | }) |
| | | |
| | | this.props.onChange(nextProps.config.initval, true) |
| | | } |
| | | } |
| | | |
| | | componentWillUnmount () { |
| | |
| | | if (_val && !_val[0]) { |
| | | _val = '' |
| | | } |
| | | this.props.onChange(_val ? `${moment(_val[0]).format(format)},${moment(_val[1]).format(format)}` : '') |
| | | this.props.onChange(_val ? `${moment(_val[0]).format(format)},${moment(_val[1]).format(format)}` : '', false) |
| | | } else { |
| | | this.props.onChange(val ? moment(val).format(format) : '') |
| | | this.props.onChange(val ? moment(val).format(format) : '', false) |
| | | } |
| | | } |
| | | |
| | | render() { |
| | | const { value, mode } = this.state |
| | | const { value, mode, format, precision, presets } = this.state |
| | | |
| | | if (mode === 'date') { |
| | | return <DatePicker value={value} onChange={this.onChange}/> |
| | | return <DatePicker dropdownClassName={'mk-date-picker ' + precision} value={value} showTime={format !== 'YYYY-MM-DD'} format={format} onChange={this.onChange}/> |
| | | } else if (mode === 'month') { |
| | | return <MonthPicker value={value} onChange={this.onChange}/> |
| | | } else if (mode === 'week') { |
| | | return <WeekPicker value={value} onChange={this.onChange}/> |
| | | } else if (mode === 'daterange') { |
| | | return <RangePicker placeholder={['开始日期', '结束日期']} value={value} onChange={this.onChange}/> |
| | | return <RangePicker ranges={presets} dropdownClassName={'mk-date-picker ' + precision} showTime={format !== 'YYYY-MM-DD'} format={format} value={value} onChange={this.onChange}/> |
| | | } |
| | | } |
| | | } |