Material-Ui DatePickerが文字列に変更されます

Question

StringでMaterial-UI DatePickerの値をDate Objectにしない方法はありますか？私はちょうど日付の値のYYYY - MM - DDを持っている。今私がやっているのは、サーバーに送る前に編集していることです。

Answer 1

Date Javascriptのオブジェクトには、日付を文字列に変更するプロトタイプ関数があります。

var date = new Date(); 
var abc = date.toString(); 

console.log(abc); // Returns "Thu Feb 16 2017 12:01:19 GMT-0800 (PST)" 

あなたは、あなたがDatePickerからdateObjectを抽出した後 moment(dateObject, 'YYYY-MM-DD')のような機能を使用しているmoment.js を使用することができ、前のサーバへのへの送信に特定の形式に日付を変更する方法を参照している場合。これは私が今までに見つけた最高の素材のUIの日付ピッカーで http://jsfiddle.net/fjz56wgg/

Answer 2

：ここ

は、アクションの書式瞬間を示し、迅速フィドルです。ユーザーは日付を入力して選択することができ、文字列値も入力値として使用することができます。それが役に立てば幸い！私は実際に今やっているものだ

import React, { PropTypes } from 'react'; 
 
import TextField from 'material-ui/TextField'; 
 
import DatePicker from 'material-ui/DatePicker'; 
 
import Clear from 'material-ui/svg-icons/content/clear'; 
 
import DateIcon from 'material-ui/svg-icons/action/date-range'; 
 
import FontIcon from 'material-ui/FontIcon'; 
 
import format from 'date-fns/format'; 
 
import compose from 'recompose/compose'; 
 
import withHandlers from 'recompose/withHandlers'; 
 
import withState from 'recompose/withState'; 
 
import moment from 'moment'; 
 

 
const convertDateToYyyyMmDd = (date) => { 
 
    if (!date) return ''; 
 
    return moment(date, 'DD/MM/YYYY').format('YYYY-MM-DD'); 
 
}; 
 

 
const enhance = compose(
 
    withState('stringValue', 'changeStringValue', props => { 
 
    const { value } = props; 
 
    if (value) return format(props.value, 'DD/MM/YYYY'); 
 
    return ''; 
 
    }), 
 
    withState('valueOnFocus', 'changeValueOnFocus', ''), 
 
    withHandlers({ 
 
    onChangeDatePicker: props => (event, val) => { 
 
     props.input.onChange(
 
     format(val, 'YYYY-MM-DD') 
 
    ); 
 
     props.changeStringValue(format(val, 'DD/MM/YYYY')); 
 
    }, 
 
    onChange: props => (event, val) => props.changeStringValue(val), 
 
    onBlur: props => event => { 
 
     const { value } = event.target; 
 
     if (value != props.valueOnFocus) { 
 
     if (!value) { 
 
      props.input.onChange(null); 
 
      props.changeStringValue(''); 
 
     } else { 
 
      const date = new Date(convertDateToYyyyMmDd(value)); 
 
      props.input.onChange(date); 
 
      props.changeStringValue(format(date, 'DD/MM/YYYY')); 
 
     } 
 
     } 
 
    }, 
 
    onFocus: props =>() => props.changeValueOnFocus(props.value), 
 
    clearDate: props =>() => { 
 
     props.input.onChange(null), 
 
     props.changeStringValue(''); 
 
    } 
 
    }), 
 
); 
 

 
class MyDatePicker extends React.Component { 
 

 
    static propTypes = { 
 
    input: PropTypes.object, 
 
    mode: PropTypes.string, 
 
    floatingLabelText: PropTypes.string, 
 
    textFieldStyle: PropTypes.object, 
 
    tree: PropTypes.Object, 
 
    fieldName: PropTypes.string, 
 
    value: PropTypes.string | PropTypes.number, 
 
    stringValue: PropTypes.string | PropTypes.number, 
 
    errorText: PropTypes.string, 
 
    disabled: PropTypes.boolean, 
 
    onChangeDatePicker: PropTypes.func, 
 
    onChange: PropTypes.func, 
 
    clearDate: PropTypes.func, 
 
    onBlur: PropTypes.func, 
 
    onFocus: PropTypes.func, 
 
    } 
 

 
    static defaultProps = { 
 
    value: null, 
 
    stringValue: '', 
 
    errorText: '', 
 
    disabled: false, 
 
    } 
 

 
    render() { 
 
    const { 
 
     errorText, 
 
     disabled, 
 
     onChangeDatePicker, 
 
     onChange, 
 
     onBlur, 
 
     onFocus, 
 
     clearDate, 
 
     input, 
 
     mode, 
 
     floatingLabelText, 
 
     textFieldStyle } = this.props; 
 

 
    const stringValue = this.props.stringValue ? this.props.stringValue : input.value ? format(input.value, 'DD/MM/YYYY') : ''; 
 
    const valueDate = input.value ? new Date(input.value) : {}; 
 

 
    return (
 
     <div className="P-date-field"> 
 
     <TextField 
 
      floatingLabelText={floatingLabelText} 
 
      type="text" 
 
      value={stringValue || ''} 
 
      errorText={errorText} 
 
      disabled={disabled} 
 
      fullWidth 
 
      onChange={onChange} 
 
      style={textFieldStyle} 
 
      ref="datePicker" 
 
      onBlur={onBlur} 
 
      onFocus={onFocus} 
 
     /> 
 
     <FontIcon 
 
      id="iconCalendar" 
 
      className="material-icons" 
 
      title="Open calendar" 
 
      onClick={!disabled ?() => this.datePicker.focus() : null} 
 
     > 
 
      <DateIcon /> 
 
     </FontIcon> 
 
     <FontIcon 
 
      style={disabled ? {display: 'none'} : ''} 
 
      id="iconClear" 
 
      className="material-icons" 
 
      title="Clear date" 
 
      onClick={clearDate} 
 
     > 
 
      <Clear /> 
 
     </FontIcon> 
 
     <div className="datePicker-hidden"> 
 
      <DatePicker 
 
      id="dataPicker" 
 
      name={input.name} 
 
      floatingLabelText={''} 
 
      value={valueDate} 
 
      errorText={errorText} 
 
      disabled={disabled} 
 
      DateTimeFormat={window.Intl.DateTimeFormat} 
 
      locale="de-CH-1996" 
 
      formatDate={v => format(v, 'DD/MM/YYYY')} 
 
      mode={mode} 
 
      autoOk={true} 
 
      fullWidth 
 
      cancelLabel="Cancel" 
 
      onChange={onChangeDatePicker} 
 
      ref={c => (this.datePicker = c)} 
 
      /> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default enhance(MyDatePicker);