feat: add pickerUtc option to datetime widget (#3721)

I have a field that I would like to contain just a date (with no specific
time). When I configure the datetime widget with sensible options for
a date-only field, dates are stored properly in the saved markdown,
but when I load those dates in the UI, I see the date before.

This is happening because the DateTime component from the
react-datetime library uses local timezones. It loads the date as the
start of day UTC and then converts to the local timezone, which is
going to be the previous day in any timezone with a negative UTC offset,
including all of the Americas.

This change adds a pickerUtc option to the datetime widget so that users
can specify when they would like the datetime picker to display times in
UTC rather than in the local timezone. By setting this new option to
true on date-only fields, users can ensure that everyone sees the same
date in the picker regardless of local timezones.
This commit is contained in:
Nick Holden
2020-05-13 01:44:01 -07:00
committed by GitHub
parent 3d7d5d2e67
commit ef5ff031da
2 changed files with 10 additions and 0 deletions

View File

@ -44,8 +44,15 @@ export default class DateTimeControl extends React.Component {
return defaultValue;
}
getPickerUtc() {
const { field } = this.props;
const pickerUtc = field.get('pickerUtc');
return pickerUtc;
}
formats = this.getFormats();
defaultValue = this.getDefaultValue();
pickerUtc = this.getPickerUtc();
componentDidMount() {
const { value } = this.props;
@ -125,6 +132,7 @@ export default class DateTimeControl extends React.Component {
onFocus={setActiveStyle}
onBlur={this.onBlur}
inputProps={{ className: classNameWrapper, id: forID }}
utc={this.pickerUtc}
/>
<div
css={css`