static-cms/datetime.md at 3a5387346925cb7a579ef199c261d7c7de4a3423

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.

2020-05-13 11:44:01 +03:00

1.4 KiB

Raw Blame History

title	label
datetime	DateTime

The datetime widget translates a datetime picker to a datetime string.

Name: datetime
UI: datetime picker
Data type: Moment.js-formatted datetime string
Options:
- default: accepts a datetime string, or an empty string to accept blank input; otherwise defaults to current datetime
- format: sets storage format; accepts Moment.js tokens; defaults to raw Date object (if supported by output format)
- dateFormat: sets date display format in UI; boolean or Moment.js tokens. If true use default locale format.
- timeFormat: sets time display format in UI; boolean or Moment.js tokens. 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:

- label: "Start time"
  name: "start"
  widget: "datetime"
  default: ""
  dateFormat: "DD.MM.YYYY" # e.g. 24.12.2021
  timeFormat: "HH:mm" # e.g. 21:07
  format: "LLL"
  pickerUtc: false

1.4 KiB Raw Blame History

1.4 KiB

Raw Blame History