我看不到在 React 应用程序中格式化 Material UI 日期选择器??
当用户选择一个日期时,我希望它的格式为 MM/DD/YYYY。我查了几个答案,但不清楚更改格式的功能应该去哪里???由于某种原因,它没有明确的功能/位置在线>>
日期选择器组件
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}
/>
最佳答案
您需要使用 formatDate
在日期选择器中格式化日期和时间的函数
formatDate --> This function is called to format the date displayed in the input field, and should return a string. By default if no locale and DateTimeFormat is provided date objects are formatted to ISO 8601 YYYY-MM-DD.
<DatePicker
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
关于datepicker - Material UI 日期选择器 日期格式 React,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50322171/