Есть ли способ сделать значение Material-UI DatePicker равным String
, а не Date Object
? Я просто хочу иметь YYYY-MM-DD для значения даты. Сейчас я делаю редактирование, прежде чем отправлять его на сервер.Материал-Ui DatePicker change to string
0
A
ответ
0
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')
после извлечения dateObject
из DatePicker
.
Вот быстрая скрипка, который показывает момент форматирования в действии: http://jsfiddle.net/fjz56wgg/
0
Это лучший материал щий 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);
Это то, что я на самом деле делать прямо сейчас. Я просто ищу способ изменить его на стороне компонента, а не перед отправкой. – mateeyow
Есть ли причина, по которой вам нужно, чтобы значение было строкой вместо объекта даты в самом компоненте? Если вы посмотрите на источник компонента DatePicker на github, в компонент добавляется несколько функций, для которых свойство 'value' является объектом даты, например функцией' formatDate'. Было бы намного легче массировать значение после его извлечения из компонента, чем любые изменения этого значения в виде строки. https://github.com/callemall/material-ui/blob/master/src/DatePicker/DatePicker.js –
Функция 'formatDate' меняет внешний вид объекта даты. Он по-прежнему будет объектом даты, когда вы отправите его на сервер. Для базы данных требуется тип данных даты с форматом YYYY-MM-DD – mateeyow