feat(widget-date): add input display formatting (#1739)
This commit is contained in:
committed by
Shawn Erquhart
parent
9706b3cac7
commit
855efd848e
@ -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}
|
||||
|
Reference in New Issue
Block a user