Material-Ui DatePicker 更改为字符串

Question

有没有办法让 Material-UI DatePicker 的值为String 而不是Date Object？我只想为日期值设置 YYYY-MM-DD。现在我正在做的是在将其发送到服务器之前对其进行编辑。

Answer 1

这是迄今为止我发现的最好的材料 ui datepicker。它允许用户键入和选择日期，还可以显示字符串值（也可以用作输入值）。希望对您有所帮助！

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

Answer 2

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/