Manage Date object time zones

How to manage timezones in UI Bakery Date and Date Time picker and viewer components

There is a number of components that allow you to display and enter date and time values. By default, these components use the browser time zone - the local time zone of the user to display and operate with the date and time values.

Let's review some additional options that allow you to manage time zones in your app.

Displaying date and time in a specific time zone

Date, DateTime, and Time components can display the date and time in a specific time zone. To do this, you need to set the Time zone property to the desired time zone. The timezone can be specified as a UTC offset:

// Timezone is any valid UTC offset
'+01', '+01:00', '+0100', '-01', '-01:00', '-0100'

Or as an IANA time zone name:

// IANA format timezone
'America/Los_Angeles', 'America/New_York', 'Europe/Berlin'

Here is an example of the Date picker component that accepts the date in the user +2 hours time zone and displays it in the America/New_York timezone:

Note, the time zone settings only affect the display of the date and time, under the hood the Date object is always stored in the browser time zone.

Using default value when no date is selected

There is a number of use cases when you want to use the default value when no date is selected. For example, you might want to use the current date as the default value, or the date of the next week, or the date of the next month.

Here's an example of the Date picker component that uses the current date as the default value:

const today = moment();
const startDate = {{ui.form.value.startDate}} || today;

Alternatively, it can also be set to the start of the current day:

const today = moment().startOf('day');
const startDate = {{ui.form.value.startDate}} || today;

Sending Date as is with no time zone conversion (database data sources)

By default, when you use Create Row or Update Row actions, the Date object is converted to the UTC timezone before sending it to the database server. That means, that the user value entered by the user in the browser may be different from the value sent to the database. Here you can see an example that even though the user entered the 8th of March, the value sent to the database is the 7th of March (because of the time shift due to conversion to UTC):

To prevent this behavior, you can set the Send original timezone data source setting. This will send the Date object as it is, without any time zone conversion, just like it is displayed in the browser.

After this setting is appied, you can see that the Date is sent with no conversion:

Sending Date as is with no time zone conversion (HTTP and other data sources)

If you are using the HTTP data source and action, you can also send the time component of the Date object as it is, but this will require some additional steps. Here's how you can do it:

When sending the date, use the following snippet to convert the Date object to the ISO format with no time zone offset conversion:

{
  createdAt: {{moment(ui.datePicker2.value).utcOffset(0, true).toISOString()}}
}

This will result in the time being sent as it is displayed in the browser.

Alternatively, you can set the UTC time zone offset to the input component. In this case, additional timezone conversion is not required:

Note, setting +00 timezone on a component and using .utcOffset(0, true) will result in an additional negative timezone offset.