feat(widget-date): add input display formatting (#1739)

This commit is contained in:
Björn Rixman
2018-11-22 02:13:32 +01:00
committed by Shawn Erquhart
parent 9706b3cac7
commit 855efd848e
4 changed files with 36 additions and 9 deletions

View File

@ -20,7 +20,27 @@ export default class DateControl extends React.Component {
includeTime: PropTypes.bool,
};
format = this.props.field.get('format');
getFormats() {
const { field, includeTime } = this.props;
const format = field.get('format');
// dateFormat and timeFormat are strictly for modifying
// input field with the date/time pickers
const dateFormat = field.get('dateFormat');
// show time-picker? false hides it, true shows it using default format
let timeFormat = field.get('timeFormat');
if (typeof timeFormat === 'undefined') {
timeFormat = !!includeTime;
}
return {
format,
dateFormat,
timeFormat,
};
}
formats = this.getFormats();
componentDidMount() {
const { value } = this.props;
@ -42,8 +62,6 @@ export default class DateControl extends React.Component {
moment.isMoment(datetime) || datetime instanceof Date || datetime === '';
handleChange = datetime => {
const { onChange } = this.props;
/**
* Set the date only if it is valid.
*/
@ -51,12 +69,15 @@ export default class DateControl extends React.Component {
return;
}
const { onChange } = this.props;
const { format } = this.formats;
/**
* Produce a formatted string only if a format is set in the config.
* Otherwise produce a date object.
*/
if (this.format) {
const formattedValue = moment(datetime).format(this.format);
if (format) {
const formattedValue = moment(datetime).format(format);
onChange(formattedValue);
} else {
const value = moment.isMoment(datetime) ? datetime.toDate() : datetime;
@ -81,11 +102,13 @@ export default class DateControl extends React.Component {
};
render() {
const { includeTime, value, classNameWrapper, setActiveStyle } = this.props;
const { value, classNameWrapper, setActiveStyle } = this.props;
const { format, dateFormat, timeFormat } = this.formats;
return (
<DateTime
timeFormat={!!includeTime}
value={moment(value, this.format)}
dateFormat={dateFormat}
timeFormat={timeFormat}
value={moment(value, format)}
onChange={this.handleChange}
onFocus={setActiveStyle}
onBlur={this.onBlur}