reactjs - 如何在 DateField redux-form 上设置初始值？

Question

我在我的应用程序上使用 redux-form 并尝试使用 DatePicker 组件。

当我发送数据时，一切看起来都很好。我的后端正确接收数据。但是当我尝试更新组件时，我的 DatePicker 没有正确获取初始值。

这是我的表格：

import AvatarImageField from 'rmw-shell/lib/components/ReduxFormFields/AvatarImageField'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { Field, reduxForm, formValueSelector } from 'redux-form'
import  ImageCropDialog  from '../../containers/ImageCropDialog'
import { TextField, DatePicker } from 'redux-form-material-ui'
import { connect } from 'react-redux'
import { injectIntl, intlShape } from 'react-intl'
import { setDialogIsOpen } from 'rmw-shell/lib/store/dialogs/actions'
import { withRouter } from 'react-router-dom'
import { withTheme } from '@material-ui/core/styles'

import { MuiPickersUtilsProvider } from 'material-ui-pickers'
import { TimePicker } from 'material-ui-pickers'
import { DateTimePicker } from 'material-ui-pickers'



import config from '../../config'
const data = {
  // used to populate "account" reducer when "Load" is clicked
  destination: 'From Data',
}

class Form extends Component {


  render() {
    const {
      intl,
      setDialogIsOpen,
      dialogs,
      match,
      values,
      handleSubmit,
      load,
      mySubmit
    } = this.props

    const uid = match.params.uid

    const initialized = true

    return (
      <form onSubmit={handleSubmit} style={{
        height: '100%',
        alignItems: 'strech',
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'center'
      }}>
        <button type='submit' style={{ display: 'none' }} />

        <div style={{ margin: 15, display: 'flex', flexDirection: 'column' }}>

          <div>
            <Field
              name='destination'
              disabled={!initialized}
              component={TextField}
              placeholder={intl.formatMessage({ id: 'destination_hint' })}
              label={intl.formatMessage({ id: 'destination_label' })}
              ref='destination'
              withRef
            />
          </div>


          <div>

            <Field
              name='start_date'
              value = 'start_date'
              disabled={!initialized}
              placeholder={intl.formatMessage({ id: 'start_date_hint' })}
              label={intl.formatMessage({ id: 'start_date_label' })}
              ref='start_date'
              withRef
              type="date"
              component={TextField} 

            />
          </div>

          <div>
            <Field
              name='end_date'
              disabled={!initialized}
              component={TextField}
              placeholder={intl.formatMessage({ id: 'end_date_hint' })}
              label={intl.formatMessage({ id: 'end_date_label' })}
              ref='end_date'
              withRef
              type="date"
            />
          </div>

          <div>
            <Field
              name='comment'
              disabled={!initialized}
              component={TextField}
              multiline
              rows={2}
              placeholder={intl.formatMessage({ id: 'comment_hint' })}
              label={intl.formatMessage({ id: 'comment_label' })}
              ref='comment'
              withRef
            />
          </div>
        </div>

      </form>
    )
  }
}

Form.propTypes = {
  intl: intlShape.isRequired,
  initialized: PropTypes.bool.isRequired,
  setDialogIsOpen: PropTypes.func.isRequired,
  dialogs: PropTypes.object.isRequired,
  match: PropTypes.object.isRequired
}

Form = reduxForm({ form: 'trip', enableReinitialize : true })(Form)

const selector = formValueSelector('trip')

const mapStateToProps = (state, ownProps) => {
  const { intl, vehicleTypes, users, dialogs, trip } = state

  return {
    intl,
    vehicleTypes,
    users,
    dialogs,
    initialValues: ownProps.initValues

  }
}

export default connect(
  mapStateToProps, { setDialogIsOpen }
)(injectIntl(withRouter(withTheme()(Form))))

我的 initialValues 非常适用于其他非日期字段。我调试了代码，并且“ownProps.initValues”从后端和状态正确地传来。

也许一个问题是因为我的数据采用完整的日期时间格式？(2019-02-17 15:46:48 UTC)

无论如何，如何使用 type=date 填充 Redux-Form 上的字段中的 initialValue？

谢谢

标签： reactjsredux-form

Answer 1

传递的日期字段值initialValues应采用以下格式：YYYY-MM-DD，根据输入类型日期文档。

这是使用 moment.js 格式化它的方法：

const date = '2019-02-17 15:46:48 UTC'
const formatted = moment(date).format('YYYY-MM-DD')

console.log(formatted)

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min.js"></script>