與自定義格式

的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

與自定義格式

回答

相關問題