Redux 形式的 DatePicker [英] DatePicker in Redux Form

问题描述

我想使用 DatePicker 使用 redux 表单选择日期.我创建了这个:

从'react'导入React；从'react-datepicker'导入DatePicker；导入 'react-datepicker/dist/react-datepicker.css';导出默认字段 =>(<div><日期选择器onChange={field.value}选择={field.value}isClearable={真}>{field.children}</DatePicker>{field.meta.touched &&field.meta.error &&<span className="error">{field.meta.error}</span>}

);<div className="form-group"><div className="col-xs-12 col-sm-3 "><div className="label" htmlFor="date-to">DATE TO</div>{' '}<字段id="日期到"名称=日期到"组件={日期输入}/>

但它不返回任何值并且不显示字段中的日期我该怎么办?

解决方案

您想将 DatePicker 元素包装起来，使其可以用作Field"上的组件，如下所示:

const renderDatePicker = ({input, placeholder, defaultValue, meta: {touched, error} }) =>(<div><DatePicker {...input} dateForm="MM/DD/YYYY" selected={input.value ?时刻(输入值):空}/>{感动&&错误&&<span>{错误}</span>}

);导出默认的 renderDatePicker

有关更多信息，请参阅此 GitHub 问题:https://github.com/Hacker0x01/react-datepicker/issues/543

i'd like to use DatePicker for selecting date using redux form. I create this:

import React from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

export default field => (
  <div>
    <DatePicker
      onChange={field.value}
      selected={field.value}
      isClearable={true}
    >
      {field.children}
    </DatePicker>
    {field.meta.touched && field.meta.error &&
    <span className="error">{field.meta.error}</span>}
  </div>
);
<div className="form-group">
        <div className="col-xs-12 col-sm-3 ">
          <div className="label" htmlFor="date-to">DATE TO</div>{' '}
          <Field
            id="date-to"
            name="date-to"
            component={DateInput}
          />
        </div>
  </div>

But it does not return any values and the does not show the date in the field What should i do?

解决方案

You want to wrap the DatePicker element that it can be used as a component on "Field" like this:

const renderDatePicker = ({input, placeholder, defaultValue, meta: {touched, error} }) => (
  <div>
        <DatePicker {...input} dateForm="MM/DD/YYYY" selected={input.value ? moment(input.value) : null} />
        {touched && error && <span>{error}</span>}
  </div>
);

export default renderDatePicker

Refer to this GitHub issue for more information: https://github.com/Hacker0x01/react-datepicker/issues/543

这篇关于Redux 形式的 DatePicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！