我无法在React app中格式化Material UI日期选择器?
当用户选择日期时,我希望它格式化为MM / DD / YYYY。我查了几个答案,但不清楚改变格式的功能应该去哪里?出于某种原因,它没有明确的上线位置>>
DatePicker组件
import React from 'react';
import DatePicker from 'material-ui/DatePicker';
/**
* `DatePicker` can be implemented as a controlled input,
* where `value` is handled by state in the parent component.
*/
export default class DateSelect extends React.Component {
constructor(props) {
super(props);
this.state = {
controlledDate: null,
openSnackbar: false,
snackbarText: {
dateconf: 'Date has been entered!'
}
};
}
formatDate(date){
return (date.getMonth() + 1) + "/" + date.getFullYear() + "/" + date.getDate();
}
handleChange = (event, date) => {
console.log('we are in a handle change in date select', event, date)
this.setState({
controlledDate: date,
});
// this.setState({
// openSnackbar: true
// })
};
render() {
console.log('state and props in date select', this.state, this.props)
return (
<DatePicker formatDate={this.formatDate}
hintText="Date of purchase"
hintStyle={{color:'whitesmoke'}}
inputStyle={{ color:'whitesmoke'}}
value={this.state.controlledDate}
onChange={this.props.onChange}
/>
);
}
}
///THE PARENT COMPONENT
handleDatePicker = (name, date) => {
console.log('handling date change', name, date)
this.setState(prevState => ({
currentRow: {
...prevState.currentRow,
purchase_date: date
},
purchase_date: date,
actionType: 'date'
}))
this.setState({
openSnackbar: true
})
}
<DateSelect
hintText="Purchase date"
value = {this.state.purchase_date}
onChange={this.handleDatePicker}
/>
答案 0 :(得分:3)
您需要使用formatDate
功能格式化日期选择器中的日期和时间
formatDate - &gt;调用此函数以格式化输入字段中显示的日期,并应返回一个字符串。默认情况下 如果没有提供语言环境和DateTimeFormat,则会格式化日期对象 至ISO 8601 YYYY-MM-DD。
<DatePicker formatDate={this.formatDate}
hintText="Date of purchase"
hintStyle={{color:'whitesmoke'}}
inputStyle={{ color:'whitesmoke'}}
value={this.state.controlledDate}
onChange={this.props.onChange}
formatDate={(date) => moment(new Date()).format('MM-DD-YYYY')}
/>
如果你没有在日期传递任何格式,那么最小和最大日期似乎不起作用。
有关详细信息material-ui/DatePicker
答案 1 :(得分:1)
formatDate
在V4中对我不起作用。 documention建议inputFormat
并正常工作。我找到了用法示例here