From ef5ff031dab99f73468c32835e2d94311967e09c Mon Sep 17 00:00:00 2001
From: Nick Holden <nick.r.holden@gmail.com>
Date: Wed, 13 May 2020 01:44:01 -0700
Subject: [PATCH] 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.
---
 .../netlify-cms-widget-datetime/src/DateTimeControl.js    | 8 ++++++++
 website/content/docs/widgets/datetime.md                  | 2 ++
 2 files changed, 10 insertions(+)

diff --git a/packages/netlify-cms-widget-datetime/src/DateTimeControl.js b/packages/netlify-cms-widget-datetime/src/DateTimeControl.js
index 0b8ffebb..a06f83f9 100644
--- a/packages/netlify-cms-widget-datetime/src/DateTimeControl.js
+++ b/packages/netlify-cms-widget-datetime/src/DateTimeControl.js
@@ -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`
diff --git a/website/content/docs/widgets/datetime.md b/website/content/docs/widgets/datetime.md
index 8077a3a9..d14ffa57 100644
--- a/website/content/docs/widgets/datetime.md
+++ b/website/content/docs/widgets/datetime.md
@@ -13,6 +13,7 @@ The datetime widget translates a datetime picker to a datetime string.
   - `format`: sets storage format; accepts Moment.js [tokens](https://momentjs.com/docs/#/parsing/string-format/); defaults to raw Date object (if supported by output format)
   - `dateFormat`: sets date display format in UI; boolean or Moment.js [tokens](https://momentjs.com/docs/#/parsing/string-format/). If `true` use default locale format.
   - `timeFormat`: sets time display format in UI; boolean or Moment.js [tokens](https://momentjs.com/docs/#/parsing/string-format/). If `true` use default locale format, `false` hides time-picker.
+  - `pickerUtc`: _(default: `false`)_ when set to `true`, the datetime picker will display times in UTC. When `false`, the datetime picker will display times in the user's local timezone. When using date-only formats, it can be helpful to set this to `true` so users in all timezones will see the same date in the datetime picker.
 - **Example:**
     ```yaml
     - label: "Start time"
@@ -22,4 +23,5 @@ The datetime widget translates a datetime picker to a datetime string.
       dateFormat: "DD.MM.YYYY" # e.g. 24.12.2021
       timeFormat: "HH:mm" # e.g. 21:07
       format: "LLL"
+      pickerUtc: false
     ```