Add & use a global blog timezone #6406

ErisDS · 2016-01-27T18:45:23Z

It's time 🕙 for us to finally add proper timezone support to Ghost. The original main issue for this (with a great deal of discussion) is here: #1265.

Other related issues which may or may not be helpful:

Add timezone dropdown to settings Add timezone dropdown to settings #2360
Determine the best list of time zones for use in Ghost Determine the best list of time zones for use in Ghost #2359
An ancient PR added timezone to general settings #2387

The timezone problem:

The problem we face with timezones revolves almost entirely around published dates.

Take the following scenario:

A user in UTC-8 (San Fran) opens their post settings menu, and sets the published at date to be 8pm on Dec 31st 2015.
Ghost correctly stores that as 4am Jan 1st 2016 UTC.
The blog is set to use Casper, which doesn't have localisation in the theme.
They share their post straight away and all the readers see it marked as published in the future!

This gets more confusing when post scheduling comes into play. Take the example of a San Fran startup blog. They like to publish posts at lunchtime for their readership which is mostly also in San Fran. They hire a writer in Singapore, who is in UTC+8.

The writer creates their post, and sets the published at date to be 12:30pm (lunchtime) on Feb 1st 2016 (a date that is in the future).
Ghost correctly stores that as 4:30am Feb 1st 2016 UTC.
The scheduler will publish the post at 4:30am Feb 1st 2016 UTC which lunchtime in Singapore, but for the San Fran readership, that's 8:30pm on the previous day.
Meanwhile the post itself will output on the frontend saying it was posted at 4:30am.

There are two underlying problems here:

There's no way to tell Ghost what timezone to use when outputting a date in your theme (other than using localisation in the theme), or anywhere else that a date might be output.
When you set a date in the PSM, there's no way to know whether that's using your timezone, the server's timezone, or the blog's timezone (which doesn't exist yet). It actually uses your own timezone, but then stores UTC, which makes things work sort of correctly, but is confusing.

We're going to solve this the same way that Twitter, Tumblr, WP, Slack etc all do. Add a setting to the general settings, and use this to output all dates everywhere, including when setting the published at date.

The Timezone Setting

The timezone setting itself will take the form of a dropdown list, exactly the same as you see in Tumblr or Slack.

Tumblr:

The setting should exist under general settings in the Ghost admin
This setting should be a dropdown list
The format should be (UTC<offset>) List, Of, Cities just like Tumblr
The list should contain exactly the same entries as Tumblr
The default should be GMT London (the closest real TZ to UTC and the middle of the list)
The text under the dropdown should read "The local time here is currently HH:mm am/pm" - the time should reflect the TZ selected, and should ideally tick over each minute (like on Buffer)

The Post Settings Menu

In the post settings menu, the date picker needs to be updated to use the new global blog timezone instead of the user's timezone.

That means, if I'm in UTC+2, and I login to my blog which is set to GMT, when I create a new draft the PSM should show me the time in GMT, not in UTC+2. Equally if I set a post to publish at 2pm, this should be 2pm GMT not 2pm UTC+2 i.e.12pm GMT.

The Date Helper

There are actually 2 date helpers in Ghost:

/core/server/helpers/date.js -> used in themes
/core/client/app/helpers/gh-format-timeago.js -> used in the admin panel

Both of the Date helpers need to be updated to take the timezone into account. As a result, the date output should always be correct according to the blog's timezone.

The text was updated successfully, but these errors were encountered:

nuclearpengy · 2016-01-27T18:59:53Z

this is going to be rad.

refs TryGhost#6406 - endpoint configuration/timezones refers to timezones.json file in data - added route for endpoint in api.js to use method read in configuration.js

issue TryGhost#6406 - adding timeZone Service to get the offset overall available - new publishedAtOffset date as CP using timeZone service to calculate offset - using timezone-obj transform to work with an array in ember and string in backend - hardcoded timezones in controller to choose from and save in settings - adding a moment-utc transform to only work with utc times in backend - when switching the timezone in the select box, the user will be shown the local time of the selected timezone - default timezone is '(GMT) Greenwich Mean Time : Dublin, Edinburgh, London' - if no timezone is saved in the settings yet, the default value will be used - showing local time in 'Publish Date' when it's a draft and no actual publishedAt value exists - Showing the time for this [WIP] in the format 'DD MMM YY @ HH:mm (UTC Z)' which resolves to '01 Jan 16 @ 14:00 (UTC +02:00)'

szelpe · 2016-02-28T22:44:57Z

Hi @AileenCGN, @ErisDS!

This is a really great improvement, as a longtime Ghost user from Hungary I'm looking forward to finally set my blog to my local timezone.

May I point to a possible shortcoming of your current implementation? I've checked the commit (7d20553), and if I'm not mistaken, utcOffset is used to calculate the local time, which, I understand, is incorrect.

The thing is that the UTC offset is not fixed, but affected by the daylight saving time, e.g. currently in the UK the offset is 0, but after 27th of March it will be 60.

To make things worse, the start of daylight saving time depends on the Country/region, e.g. in the US it starts on 10th March, or if I'm correct there is no daylight saving time in Egypt at all.

The best thing to do in my opinion is to use moment-timezone, which can handle this.

Here is an example:

var m = moment('2016-03-20T10:22');
console.log(m.utcOffset(-300).isDST());      // false
console.log(m.tz("US/Eastern").isDST());     // true
console.log(m.tz("Europe/Dublin").isDST());  // false

Not handling the DST properly can lead to several issues, including misleading information for the users and incorrect post scheduling.

Not to mention the sort of an edge case, when a user from the UK sets the publishedAt property to March 27th 2:30, which is kind of non-existing because at 2:00 the time is shifted to 3:00, will the post be published or not?

ErisDS · 2016-02-29T10:37:37Z

Hey @szelpe, this kind of constructive feedback is incredibly helpful, thanks for taking the time, much appreciated 👍

issue TryGhost#6406 - adding timeZone Service to get the offset (=timezone reg. moment-timezone) overall available - new publishedAtOffset date as CP using timeZone service and moment-timezone to calculate offset incl. DST - removing timezone-obj transform as it became obsolete with moment-timezone - reading timezones from configuration/timezones api endpoint - adding a moment-utc transform to only work with utc times in backend - when switching the timezone in the select box, the user will be shown the local time of the selected timezone - default timezone is '(GMT) Greenwich Mean Time : Dublin, Edinburgh, London' - if no timezone is saved in the settings yet, the default value will be used - showing local time in 'Publish Date' when it's a draft and no actual publishedAt value exists - Showing the time for this [WIP] in the format 'DD MMM YY @ HH:mm (UTC Z)' which resolves to '01 Jan 16 @ 14:00 (UTC +02:00)' - Changing the date.js helper in core/server for moment-timezone

issues TryGhost#6406 TryGhost#6399 - all dates are stored as UTC with this commit - use moment.tz.setDefault('UTC') - add migration file to recalculate local datetimes to UTC - store all dates in same format into our three supported databases - add option to remeber migrations inside settings (core) - support DST offset for migration - ensure we force UTC in test env - run whole migration as transaction - extend: Settings.findOne function

closes TryGhost/Ghost#6406 follow-up PR of TryGhost#2 - adds a `timeZone` Service to provide the offset (=timezone reg. moment-timezone) of the users blog settings - `gh-datetime-input` will read the offset of the timezone now and adjust the `publishedAt` date with it. This is the date which will be shown in the PSM 'Publish Date' field. When the user writes a new date/time, the offset is considered and will be deducted again before saving it to the model. This way, we always work with a UTC publish date except for this input field. - gets `availableTimezones` from `configuration/timezones` API endpoint - adds a `moment-utc` transform on all `createdAt`, `updatedAt` and `publishedAt` date properties to only work with UTC times on serverside - when switching the timezone in the select box, the user will be shown the local time of the selected timezone - `createdAt`-property in `gh-user-invited` returns now `moment(createdAt).fromNow()` as `createdAt` is a moment date already - added clock service to show actual time ticking below select box - default timezone is '(GMT) Greenwich Mean Time : Dublin, Edinburgh, London' - if no timezone is saved in the settings yet, the default value will be used - shows the local time in 'Publish Date' in PSM by default, until user overwrites it - adds dependency `moment-timezone 0.5.4` to `bower.json` --------- **Tests:** - sets except for clock service in test env - adds fixtures to mirage - adds `service.ajax` and `service:ghostPaths` to navigation-test.js - adds unit test for `gh-format-timeago` helper - updates acceptance test `general-setting` - adds acceptance test for `editor` --------- **Todos:** - [ ] Integration tests: ~~`services/config`~~, `services/time-zone`, `components/gh-datetime-input` - [x] Acceptance test: `editor` - [ ] Unit tests: `utils/date-formatting` - [ ] write issue for renaming date properties (e. g. `createdAt` to `createdAtUTC`) and translate those for server side with serializers + use `moment-utc` transform in scheduler model

closes TryGhost/Ghost#6406 follow-up PR of TryGhost#2 - adds a `timeZone` Service to provide the offset (=timezone reg. moment-timezone) of the users blog settings - `gh-datetime-input` will read the offset of the timezone now and adjust the `publishedAt` date with it. This is the date which will be shown in the PSM 'Publish Date' field. When the user writes a new date/time, the offset is considered and will be deducted again before saving it to the model. This way, we always work with a UTC publish date except for this input field. - gets `availableTimezones` from `configuration/timezones` API endpoint - adds a `moment-utc` transform on all date attr (`createdAt`, `updatedAt`, `publishedAt`, `unsubscribedAt` and `lastLogin`) to only work with UTC times on serverside - when switching the timezone in the select box, the user will be shown the local time of the selected timezone - `createdAt`-property in `gh-user-invited` returns now `moment(createdAt).fromNow()` as `createdAt` is a moment date already - added clock service to show actual time ticking below select box - default timezone is '(GMT) Greenwich Mean Time : Dublin, Edinburgh, London' - if no timezone is saved in the settings yet, the default value will be used - shows the local time in 'Publish Date' in PSM by default, until user overwrites it - adds dependency `moment-timezone 0.5.4` to `bower.json` --------- **Tests:** - sets except for clock service in test env - adds fixtures to mirage - adds `service.ajax` and `service:ghostPaths` to navigation-test.js - adds unit test for `gh-format-timeago` helper - updates acceptance test `general-setting` - adds acceptance test for `editor` --------- **Todos:** - [ ] Integration tests: ~~`services/config`~~, `services/time-zone`, `components/gh-datetime-input` - [x] Acceptance test: `editor` - [ ] Unit tests: `utils/date-formatting` - [ ] write issue for renaming date properties (e. g. `createdAt` to `createdAtUTC`) and translate those for server side with serializers + use `moment-utc` transform in scheduler model changes subscriber date attr to `moment-utc`

closes TryGhost/Ghost#6406 follow-up PR of TryGhost#2 - adds a `timeZone` Service to provide the offset (=timezone reg. moment-timezone) of the users blog settings - `gh-datetime-input` will read the offset of the timezone now and adjust the `publishedAt` date with it. This is the date which will be shown in the PSM 'Publish Date' field. When the user writes a new date/time, the offset is considered and will be deducted again before saving it to the model. This way, we always work with a UTC publish date except for this input field. - gets `availableTimezones` from `configuration/timezones` API endpoint - adds a `moment-utc` transform on all date attr (`createdAt`, `updatedAt`, `publishedAt`, `unsubscribedAt` and `lastLogin`) to only work with UTC times on serverside - when switching the timezone in the select box, the user will be shown the local time of the selected timezone - `createdAt`-property in `gh-user-invited` returns now `moment(createdAt).fromNow()` as `createdAt` is a moment date already - added clock service to show actual time ticking below select box - default timezone is '(GMT) Greenwich Mean Time : Dublin, Edinburgh, London' - if no timezone is saved in the settings yet, the default value will be used - shows the local time in 'Publish Date' in PSM by default, until user overwrites it - adds dependency `moment-timezone 0.5.4` to `bower.json` --------- **Tests:** - sets except for clock service in test env - adds fixtures to mirage - adds `service.ajax` and `service:ghostPaths` to navigation-test.js - adds unit test for `gh-format-timeago` helper - updates acceptance test `general-setting` - adds acceptance test for `editor` --------- **Todos:** - [ ] Integration tests: ~~`services/config`~~, `services/time-zone`, `components/gh-datetime-input` - [x] Acceptance test: `editor` - [ ] Unit tests: `utils/date-formatting` - [ ] write issue for renaming date properties (e. g. `createdAt` to `createdAtUTC`) and translate those for server side with serializers

closes TryGhost/Ghost#6406 follow-up PR of TryGhost#2 - adds a `timeZone` Service to provide the offset (=timezone reg. moment-timezone) of the users blog settings - `gh-datetime-input` will read the offset of the timezone now and adjust the `publishedAt` date with it. This is the date which will be shown in the PSM 'Publish Date' field. When the user writes a new date/time, the offset is considered and will be deducted again before saving it to the model. This way, we always work with a UTC publish date except for this input field. - gets `availableTimezones` from `configuration/timezones` API endpoint - adds a `moment-utc` transform on all date attr (`createdAt`, `updatedAt`, `publishedAt`, `unsubscribedAt` and `lastLogin`) to only work with UTC times on serverside - when switching the timezone in the select box, the user will be shown the local time of the selected timezone - `createdAt`-property in `gh-user-invited` returns now `moment(createdAt).fromNow()` as `createdAt` is a moment date already - added clock service to show actual time ticking below select box - default timezone is '(GMT) Greenwich Mean Time : Dublin, Edinburgh, London' - if no timezone is saved in the settings yet, the default value will be used - shows the local time in 'Publish Date' in PSM by default, until user overwrites it - adds dependency `moment-timezone 0.5.4` to `bower.json` --------- **Tests:** - sets except for clock service in test env - adds fixtures to mirage - adds `service.ajax` and `service:ghostPaths` to navigation-test.js - adds unit test for `gh-format-timeago` helper - updates acceptance test `general-setting` - adds acceptance test for `editor` - adds integration tests for `services/config` and `services/time-zone` --------- **Todos:** - [ ] Integration tests: ~~`services/config`~~, ~~`services/time-zone`~~, `components/gh-datetime-input` - [x] Acceptance test: `editor` - [ ] Unit tests: `utils/date-formatting` - [ ] write issue for renaming date properties (e. g. `createdAt` to `createdAtUTC`) and translate those for server side with serializers

issues TryGhost#6406 TryGhost#6399 - all dates are stored as UTC with this commit - use moment.tz.setDefault('UTC') - add migration file to recalculate local datetimes to UTC - store all dates in same format into our three supported databases - add option to remeber migrations inside settings (core) - support DST offset for migration - ensure we force UTC in test env - run whole migration as transaction - extend: Settings.findOne function

closes TryGhost/Ghost#6406 follow-up PR of TryGhost#2 - adds a `timeZone` Service to provide the offset (=timezone reg. moment-timezone) of the users blog settings - `gh-datetime-input` will read the offset of the timezone now and adjust the `publishedAt` date with it. This is the date which will be shown in the PSM 'Publish Date' field. When the user writes a new date/time, the offset is considered and will be deducted again before saving it to the model. This way, we always work with a UTC publish date except for this input field. - gets `availableTimezones` from `configuration/timezones` API endpoint - adds a `moment-utc` transform on all date attr (`createdAt`, `updatedAt`, `publishedAt`, `unsubscribedAt` and `lastLogin`) to only work with UTC times on serverside - when switching the timezone in the select box, the user will be shown the local time of the selected timezone - `createdAt`-property in `gh-user-invited` returns now `moment(createdAt).fromNow()` as `createdAt` is a moment date already - added clock service to show actual time ticking below select box - default timezone is '(GMT) Greenwich Mean Time : Dublin, Edinburgh, London' - if no timezone is saved in the settings yet, the default value will be used - shows the local time in 'Publish Date' in PSM by default, until user overwrites it - adds dependency `moment-timezone 0.5.4` to `bower.json` --------- **Tests:** - sets except for clock service in test env - adds fixtures to mirage - adds `service.ajax` and `service:ghostPaths` to navigation-test.js - adds unit test for `gh-format-timeago` helper - updates acceptance test `general-setting` - adds acceptance test for `editor` - adds integration tests for `services/config` and `services/time-zone` --------- **Todos:** - [ ] Integration tests: ~~`services/config`~~, ~~`services/time-zone`~~, `components/gh-datetime-input` - [x] Acceptance test: `editor` - [ ] Unit tests: `utils/date-formatting` - [ ] write issue for renaming date properties (e. g. `createdAt` to `createdAtUTC`) and translate those for server side with serializers

closes TryGhost#6406 - created listeners.js connector - merged listeners.js with events.js (in models/base) - set a post to draft when published_at would be in the past - reschedule a post when published_at would be in the future

closes TryGhost#6406 - adding timeZone Service to get the offset (=timezone reg. moment-timezone) overall available - new publishedAtOffset date as CP using timeZone service and moment-timezone to calculate offset incl. DST - removing timezone-obj transform as it became obsolete with moment-timezone - reading timezones from configuration/timezones api endpoint - adding a moment-utc transform to only work with utc times in backend - when switching the timezone in the select box, the user will be shown the local time of the selected timezone - added clock service to show actual time ticking below select box - default timezone is '(GMT) Greenwich Mean Time : Dublin, Edinburgh, London' - if no timezone is saved in the settings yet, the default value will be used - showing local time in 'Publish Date' when it's a draft and no actual publishedAt value exists - Removed the format 'DD MMM YY @ HH:mm (UTC Z)' which resolves to '01 Jan 16 @ 14:00 (UTC +02:00)' - Changing the date.js helper in core/server for moment-timezone - Fix timezone select: updates `selectedTimezone` to return the matching object from `availableTimezones` - Including timezones in test for date-helper - update to moment-timezone 0.5.1 - moving form-group of 'selectTimezone' further up so - Tests: - Set except for clock service in test env - adding fixtures to mirage - adding 'service.ajax' to navigation-test.js - adding 'service:ghostPaths' to navigation-test.js - Code improvements - Changing clockservice to ES6

issue TryGhost#6406 - redirect date permalink if timezone changed - create permalinks based on blog TZ - post-lookup fn is now more generic

issues TryGhost#6406 TryGhost#6399 - all dates are stored as UTC with this commit - use moment.tz.setDefault('UTC') - add migration file to recalculate local datetimes to UTC - store all dates in same format into our three supported databases - add option to remeber migrations inside settings (core) - support DST offset for migration - ensure we force UTC in test env - run whole migration as transaction - extend: Settings.findOne function

closes TryGhost#6406 - created listeners.js connector - merged listeners.js with events.js (in models/base) - set a post to draft when published_at would be in the past - reschedule a post when published_at would be in the future

ErisDS added settings server / core Issues relating to the server or core of Ghost labels Jan 27, 2016

ErisDS assigned aileen Jan 27, 2016

This was referenced Jan 27, 2016

Feature: Post Scheduling #6399

Closed

Sprint Epic 26th Jan - 9th Feb #6401

Closed

ErisDS mentioned this issue Feb 9, 2016

Sprint Epic 9th - 23th February #6470

Closed

14 tasks

dbalders mentioned this issue Feb 23, 2016

Sprint Epic 23th February - 7th March #6560

Closed

13 tasks

aileen mentioned this issue Feb 24, 2016

Including timezones API in configuration endpoint #6525

Merged

aileen mentioned this issue Feb 24, 2016

[Hold] Use Timezones in Blog Settings #6421

Closed

15 tasks

kirrg001 mentioned this issue Jun 10, 2016

feature: when timezone changes, reschedule all posts #6962

Merged

geekhuyang pushed a commit to geekhuyang/Ghost that referenced this issue Nov 20, 2016

timezones: support permalinks based on current timezone

b8d5d8a

issue TryGhost#6406 - redirect date permalink if timezone changed - create permalinks based on blog TZ - post-lookup fn is now more generic

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add & use a global blog timezone #6406

Add & use a global blog timezone #6406

ErisDS commented Jan 27, 2016

nuclearpengy commented Jan 27, 2016

szelpe commented Feb 28, 2016

ErisDS commented Feb 29, 2016

Add & use a global blog timezone #6406

Add & use a global blog timezone #6406

Comments

ErisDS commented Jan 27, 2016

The timezone problem:

The Timezone Setting

The Post Settings Menu

The Date Helper

nuclearpengy commented Jan 27, 2016

szelpe commented Feb 28, 2016

ErisDS commented Feb 29, 2016