Как установить начальные значения в редукс-форме DateField? - PullRequest
Новая
       6

Как установить начальные значения в редукс-форме DateField?

0 голосов
/ 17 февраля 2019

Я использую избыточную форму в своем приложении и пытаюсь использовать компонент 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", что он правильно поступил из бэкэнда и состояния.

Может быть, одна проблема заключается в том, что мои данные поступают в полном формате Datetime?(2019-02-17 15:46:48 UTC)

В любом случае, как я могу заполнить initialValue в поле Redux-Form с помощью type = date?

Спасибо

1 Ответ

0 голосов
/ 19 февраля 2019

Значения полей даты, передаваемые как 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>
...