有沒有辦法使Material-UI DatePicker的值爲String
而不是Date Object
?我只想要YYYY-MM-DD作爲日期值。現在我正在做的是在將它發送到服務器之前進行編輯。Material-Ui DatePicker更改爲字符串
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')
一個功能,您從DatePicker
提取dateObject
後。
這裏是一個快速小提琴,顯示時刻在行動格式: http://jsfiddle.net/fjz56wgg/
0
這是最好的材料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);
相關問題
- 1. 更改WPF DatePicker的字符串格式
- 2. 字符串更改爲空
- 3. 更改爲字符串
- 4. 字符串鍵更改爲數字鍵?
- 5. 更改字符串
- 6. UWP DatePicker自定義字符串爲月
- 7. 將datepicker轉換爲字符串
- 8. 將字符串類型日期更改爲日期字符串
- 9. 更改字符串編碼WIN1250爲utf8
- 10. C#將字符串更改爲新值
- 11. 試圖將字符串更改爲altcase
- 12. 將字符串更改爲int
- 13. 號碼自動更改爲字符串
- 14. 將PDO :: FECH_ASSOC更改爲字符串
- 15. 將列表更改爲字符串
- 16. 更改時間字符串爲雙
- 17. Chomp將字符串更改爲1
- 18. 將1.000更改爲1000字符串
- 19. 將sysout更改爲字符串
- 20. 從ObjectId更改爲字符串
- 21. 如何將字符串更改爲Uri
- 22. 將unicode字符串更改爲列表?
- 23. 如何將jquery datepicker更改爲US datepicker
- 24. 更改字符串值
- 25. 更改連接字符串
- 26. NSDateFormatter更改字符串
- 27. 更改網址字符串
- 28. 更改連接字符串
- 29. 更改字符串值。 C#
- 30. javascript將字符串視爲字符數組 - 如何更改該字符串?
這就是我實際上做的現在。我正在尋找一種方法,讓它在提交之前在組件一側進行更改。 – mateeyow
是否有一個原因,你需要的值是一個字符串,而不是組件本身的日期對象?如果你看看github上DatePicker組件的來源,那麼組件中就有一些函數需要'value'屬性作爲日期對象,例如'formatDate'函數。一旦從組件中檢索值,將該值更容易處理,而不是對該值進行任何修改作爲字符串。 https://github.com/callemall/material-ui/blob/master/src/DatePicker/DatePicker.js –
'formatDate'函數只改變日期對象的外觀。當你將它發送到服務器時它仍然是日期對象。數據庫需要使用YYYY-MM-DD格式的日期數據類型 – mateeyow