qm-ui/src/QMDatePicker.js

千米公有云管理端UI基础组件库

/**
 * @author gcy[of1518]
 * @date 17/02/15
 * @description
 */
import React, { Component } from 'react'
import { DatePicker } from 'antd'
import moment from 'moment'
const { MonthPicker, RangePicker } = DatePicker

const noop = () => undefined

export default class QMDatePicker extends Component {
  static defaultProps = {
    type: 'data', //类型:date||month||range
    sync: false, //同步
    onChange: noop,
  }

  constructor(props) {
    super(props)
    let { format, type } = props
    const formatType = {
      date: 'YYYY-MM-DD',
      month: 'YYYY-MM',
      range: 'YYYY-MM-DD HH:mm:ss',
    }
    this.state = {
      format: format || formatType[type],
    }
  }

  render() {
    let { type, value, index } = this.props
    let { format } = this.state
    let Picker = DatePicker
    switch (type) {
      case 'month':
        Picker = MonthPicker
        break
      case 'range':
        Picker = RangePicker
        break
    }

    let formatMoment = value
    if (type == 'range') {
      formatMoment = value
        ? [
            value[0] && typeof value[0] === 'string' ? moment(value[0], format) : value[0],
            value[1] && typeof value[1] === 'string' ? moment(value[1], format) : value[1],
          ]
        : []
      //如果value为object型的参数
      if (index && index.includes(';') && typeof value === 'object') {
        let arr = []
        index.split(';').map(v => {
          arr.push(moment(value[v], format))
        })
        formatMoment = arr
      }
    } else {
      formatMoment = value && typeof value === 'string' ? moment(value, format) : value
    }
    return (
      <Picker
        {...this.props}
        value={formatMoment}
        onChange={(m, str) => this.props.onChange(str)}
      />
    )
  }
}