antdv3中使用DatePicker控件

# 给datepicker赋值

  • 可以输出赋值,datepicker赋值需要moment格式的数据,如果赋值了string类型的会报错 需要进行moment格式化moment(dateString)
  • 给DatePicker赋值需要moment格式的数据,直接给DatePicker赋值String类型会报错,需要moment(dateString)后,再赋值给DatePicker组件。

# 给普通字符串赋值

  • 如果赋值了moment类型的数据 可以通过moment(date).format(XXX)来解决,如果还不行的话可以使用date&& moment(date).lacale(‘en’).format(XXX)
import { formatDate, STR_FORMAT_1, momentT as moment } from '@autorun/utils/time';
static getDerivedStateFromProps(nextProps, preState) {
  const {
    viewType,
    selectedRow,
    form: { setFieldsValue },
  } = nextProps;
  const { viewType: viewTypeO, selectedRow: selectedRowO } = preState;
  if (viewType !== viewTypeO && JSON.stringify(selectedRow) !== JSON.stringify(selectedRowO)) {
    setFieldsValue({
      ...selectedRow,
      beginDate: (selectedRow.beginDate && moment(selectedRow.beginDate)) || undefined,
    });
    return {
      viewType,
      selectedRow,
    };
  }
  return null;
}
<Col span={24}>
  <Form.Item
    label={formatMessage({
      id: 'taskMgt.beginDate',
      defaultMessage: '开始运行时间',
    })}
    >
    {getFieldDecorator('beginDate', {
      rules: [
        {
          required: true,
          message: getPlaceholder(),
        },
      ],
    })(
      <DatePicker
        format={STR_FORMAT_1}
        allowClear
        showTime
        style={{ width: '100%' }}
        />
    )}
  </Form.Item>
</Col>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

比如 几月几号之前。

那么在表单赋值的时候,原先写的是:

initialValue: ['', moment().endOf('month')],
1

但是这样会导致清除时报错:

value.locale is not a function

而只要改成:

initialValue: [undefined, moment().endOf('month')],
1

就可以了。

出现value.locale is not a function问题解决办法

上次更新: 2022/04/15, 05:41:29
×