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 (
      
24}> "最近关联时间" labelLength={4}> {getFieldDecorator('time')( <DatePicker style={{ marginRight: 19, width: 235 }} ranges={{}} onChange={this.onTimeChange} onCalendarChange={this.onTimeCalendarChange} onOpenChange={this.onOpenChange} placeholder="请选择时间" showTime /> )} 1}}>
'flex', justifyContent: 'space-between' }}>
); } } 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);