Material-Ui DatePicker更改为字符串

Question

有没有办法使Material-UI DatePicker的值为String而不是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)" 

如果你指的是如何将日期更改为特定格式发送给服务器之前，你可以使用moment.js 是使用像 moment(dateObject, 'YYYY-MM-DD')一个功能，您从DatePicker提取dateObject后。

这里是一个快速小提琴，显示时刻在行动格式： http://jsfiddle.net/fjz56wgg/

Answer 2

这是最好的材料UI日期选择器，我发现至今。它允许用户输入和选择一个日期，并显示一个字符串值（也可以用作输入值）。希望能帮助到你！

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);