index.js 1.27 KB
Newer Older
田翔's avatar
田翔 committed
1
// 自定义时间组件
田翔's avatar
田翔 committed
2 3 4 5
import React, { useState, useEffect, useMemo } from 'react'
import { DatePicker, Input } from 'antd'
import moment from 'moment'
import locale from 'antd/lib/date-picker/locale/zh_CN'
田翔's avatar
田翔 committed
6

田翔's avatar
田翔 committed
7
const DateTime = (props) => {
田翔's avatar
田翔 committed
8

田翔's avatar
田翔 committed
9
  const { value, onChange, schema } = props
10
  const { disabled, format, presetValue, placeholder, currentDate, defaultCurrent } = schema
田翔's avatar
田翔 committed
11 12

  const valueShow = useMemo(() => {
13 14 15
    if (defaultCurrent) {
      return (value || new Date()) ? moment(value || new Date()) : null
    }
田翔's avatar
田翔 committed
16
    return (value || presetValue) ? moment(value || presetValue) : null
17
  }, [presetValue, defaultCurrent, value])
田翔's avatar
田翔 committed
18 19

  const disabledDate = (current) => {
20 21
    if (currentDate) {
      return current && current > moment()
田翔's avatar
田翔 committed
22 23 24
    } else {
      return false
    }
田翔's avatar
田翔 committed
25
  }
田翔's avatar
田翔 committed
26 27

  const dateChange = (date, dateStr) => {
28 29 30 31 32
    if (date && date._d) {
      onChange(moment(date._d).format('YYYY-MM-DD HH:ss:mm'))
    } else {
      onChange(null)
    }
田翔's avatar
田翔 committed
33 34 35 36
  }

  return (
    <DatePicker
37
      disabledDate={disabledDate}
田翔's avatar
田翔 committed
38
      picker={format}
田翔's avatar
田翔 committed
39 40 41 42
      disabled={disabled}
      placeholder={placeholder}
      value={valueShow}
      onChange={dateChange}
田翔's avatar
田翔 committed
43
      showNow
田翔's avatar
田翔 committed
44
      showTime={format === 'dateTime'}
田翔's avatar
田翔 committed
45
      style={{ width: '100%' }}
田翔's avatar
田翔 committed
46 47 48 49 50 51 52
      locale={locale}
    />
  );

};

export default DateTime