与自定义格式

的DatePicker日期输入我想stote使用Redux的形式在我的状态日期。我使用react-datepicker。为了使日期选择器与我的终极版形式兼容我写：与自定义格式

import React, { PropTypes } from 'react'; 
import DatePicker from 'react-datepicker'; 
import moment from 'moment'; 
import 'react-datepicker/dist/react-datepicker.css'; 

    const MyDatePicker = ({ input, meta: { touched, error } }) => (
     <div> 
     <DatePicker 
      {...input} dateFormat="YYYY-MM-DD" 
      selected={input.value ? moment(input.value) : null} 
     /> 
     { 
      touched && error && 
      <span className="error"> 
      {error} 
      </span> 
     } 
     </div> 
    ); 

    MyDatePicker.propTypes = { 
     input: PropTypes.shape().isRequired, 
     meta: PropTypes.shape().isRequired 
    }; 

    export default MyDatePicker;

的问题是，当我选择日期，我想它显示为DD-MM-YYYY，但我想要的日期将被保存在我的状态使用YYYY-MM-DD HH：MM：SS格式。这个怎么做？我用的是瞬间的格式的功能，但它似乎没有工作

来源

2017-03-08 user7334203

你是什么意思它似乎没有工作？你得到什么错误或得到什么结果？ – MGA

您应该使用the value lifecycle methods是redux-form提供了这一点。

使用parse来格式化来自react-datepicker的存储值，并且format将来自存储的值解析为react-datepicker以呈现它。例如：

function formatDateForInput(storedDate) { 
    // the returned value will be available as `input.value` 
    return moment(pickedDate).format('right format for your input') 
} 

function parseDateForStore(pickedDate) { 
    // the returned value will be stored in the redux store 
    return moment(storedDate).format('desired format for storage') 
} 

<Field 
    component={ MyDatePicker } 
    format={ formatDateForInput } 
    parse={ parseDateForStore } 
/>

如果这不适合你的工作，我会建议您检查，如果你需要把由redux-form提供的DatePicker和input道具之间的自定义onChange处理程序。因为它可能是价值DatePicker使用调用onChange是那些redux-form不理解。像这样：

const MyDatePicker = ({ input, meta: { touched, error } }) => { 

    const onChange = event => { 
    const pickedDate = event.path.to.value; 
    input.onChange(pickedDate); 
    } 

    return (
    <div> 
     <DatePicker 
     dateFormat="YYYY-MM-DD" 
     selected={input.value ? moment(input.value) : null} 
     onChange={ onChange } 
     /> 
     { 
     touched && error && 
     <span className="error"> 
      {error} 
     </span> 
     } 
    </div> 
); 
} 

MyDatePicker.propTypes = { 
    input: PropTypes.shape().isRequired, 
    meta: PropTypes.shape().isRequired 
}; 

export default MyDatePicker;

希望这有助于！

来源

2017-03-10 19:14:16 jakee

如果我理解正确的，你只需要对用户界面和其他保存同一天一个2种不同的格式？ moment(date).format('DD-MM-YYYY')和moment(date).format('YYYY-MM-DD HH:MM:SS')会给你两种格式的日期。

来源

2017-03-08 11:50:53 MGA

与自定义格式

回答

相关问题