antd: value.locale is not a function問題解決辦法

/**
 * moment 對象 ===>>> 時間戳/格式化字符串
 *
 * use case:
 *    momentToFormatDate(moment)    // 格式化為日期
 *    momentToFormatDate(moment, true)  // 格式化為時間
 *
 * @param moments Moment or Moment[]
 * @param format
 * @returns {*}
 */
export const momentToFormatDate = (moments, isTime, formatter) => {
  if (!moments) return '';
  if (isString(isTime)) {
    formatter = isTime;
  }
  let format = isTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
  if (formatter) format = formatter; // 特殊的格式處理
  if (Array.isArray(moments) && moments.length) {
    return moments.map(item => (
      (item && item.format) ? item.format(format) : ''
    ));
  }
  return moments.format ? moments.format(format) : '';
};

/**
 * 日期 ===>>> Moment 對象
 *
 * use case:
 *    formatDateToMoment('2017-12-10')  // 轉換字符串日期
 *    formatDateToMoment(['2017-12-1', '2017-12-10']) // 轉換日期范圍
 *    formatDateToMoment('2017-12-10 12:10:13', true) // 轉換字符串時間
 *    formatDateToMoment([1512991237009, 1512991977009]) // 轉換日期范圍(時間戳類型)
 *
 * @param dates Number or String or Array
 * @param isTime  Boolean
 * @param formatter  String
 * @returns {*}
 */
export const formatDateToMoment = (dates, isTime, formatter) => {
  if (!dates) return null;
  if (isString(isTime)) {
    formatter = isTime;
  }
  let format = isTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
  if (formatter) format = formatter; // 特殊的格式處理
  if (Array.isArray(dates) && dates.length) {
    return dates.filter(item => item && (isNumber(item) || isString(item))).map(item => (
      isNumber(item) ? moment(item) : moment(item, format)
    ));
  }
  return moment(dates, format); // 時間戳轉換
};

/**
 * 創建表單域，適用於 Filter 組件的 mapPropsToFields 中
 * @param {Object} form 表單對象
 */
export const createFilterField = form => {
  return Object.keys(form).reduce((pre, next) => {
    return {
      ...pre,
      [next]: Form.createFormField({ value: form[next] }),
    };
  }, {});
};

調用：

import React from 'react';
import PropTypes from 'prop-types';
import { Form, Row, Col, Input, Button, Select, Icon, DatePicker, message, } from 'antd';
import moment from 'moment';
import FilterItem from '../../../components/filter-item';
import { createFilterField, formatDateToMoment, momentToFormatDate } from '../../../utils';
import styles from '../index.less';
import allExportIcon from '../../../images/allExportIcon.png';

const FormItem = Form.Item;
const { Option } = Select;

class Filter extends React.PureComponent {
  state = {};

  // 預警時間
  disabledDate = (current) => {
    return current && current > moment().endOf('day')
      || current < moment().subtract(30, 'days');
  };

  onTimeChange = (dates) => {
    if (dates.length === 0) {
      this.setState({
        startDate: null,
      });
    }
  };

  onTimeCalendarChange = (dates) => {
    if (dates.length === 1) {
      this.setState({
        startDate: dates[0],
      });
    }
  };

  onOpenChange = (status) => {
    if (status) {
      this.setState({
        startDate: null,
      });
    }
  };

  render() {
    const {
      form: {
        getFieldDecorator,
        getFieldValue,
        getFieldsValue,
      },
      onFilterChange,
      onReset,
      onExport,
      exportLoading,
      dataLoading,
    } = this.props;
    const { type } = this.state;

    const handleFileds = (fields) => { const { time, ...remainFields } = fields; if (time) { const lastRelateTime = momentToFormatDate(time, true); return { ...remainFields, lastRelateTime }; } return fields; }; const onSearch = () => {
      let fields = getFieldsValue();
      fields.accountType = fields.sourceType;
      delete fields.sourceType;
      fields = handleFileds(fields);
      onFilterChange(fields);
    };

    const handleExport = () => {
      let fields = getFieldsValue();
      onExport(fields);
    }

    return (
      <div className={styles.filterBox}>
        <Row gutter={24}>
          <Col>
            <FilterItem label="最近關聯時間" labelLength={4}>
              {getFieldDecorator('time')(
                <DatePicker 
                  style={{ marginRight: 19, width: 235 }}
                  ranges={{}}
                  onChange={this.onTimeChange}
                  onCalendarChange={this.onTimeCalendarChange}
                  onOpenChange={this.onOpenChange}
                  placeholder="請選擇時間"
                  showTime
                />
              )}
            </FilterItem>
          </Col>
          <Col style={{flex: 1}}>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <div>
                <Button type="primary" className="margin-right" disabled={dataLoading} onClick={onSearch}>
                  查詢
                </Button>
                <Button className="margin-right" disabled={dataLoading} onClick={onReset}>
                  取消
                </Button>
              </div>
              <div className={styles.exportBtn}>
                <Button type="primary" disabled={dataLoading} loading={exportLoading} onClick={handleExport}>
                  <img src={allExportIcon} />
                  批量導出
                </Button>
              </div>
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}

Filter.propTypes = {
  form: PropTypes.object.isRequired,
  filter: PropTypes.object.isRequired,
  onFilterChange: PropTypes.func.isRequired,
  onReset: PropTypes.func.isRequired,
  onExport: PropTypes.func.isRequired,
  exportLoading: PropTypes.bool,
  dataLoading: PropTypes.bool,
};

Filter.defaultProps = {
  filter: {},
  dataLoading: false,
  exportLoading: false,
};

export default Form.create({
  mapPropsToFields({ filter = {} }) {
    const {
      lastRelateTime,
    } = filter;
    return createFilterField({
　　　　time: formatDateToMoment(lastRelateTime, true) ? formatDateToMoment(lastRelateTime, true) : null,
　　});
　　},
})(Filter);