У вас когда-нибудь была возможность увидеть свое приложение из другого часового пояса? Вы думали о том, чтобы настроить ваше приложение так, чтобы оно выглядело одинаково из любой точки мира? Или, может быть, вы действительно хотите, чтобы он выглядел по-разному в разных часовых поясах?

Что ж, если ваше приложение имеет дело с датами, вам, вероятно, потребуется выполнить некоторые корректировки часового пояса. В противном случае вы столкнетесь с поврежденным пользовательским интерфейсом и приложением-зомби.

Итак, в этой статье я поделюсь своими знаниями о том, как реализовать настройку часового пояса в вашем приложении, чтобы оно выглядело одинаково в любом часовом поясе мира. Я использую библиотеку Moment.js, облегченную библиотеку данных JavaScript для разбора, проверки, манипулирования и форматирования дат, реализованную в приложении Javascript.

Какое время начала в этом году?

Допустим, вы разрабатываете приложение с коллегой, который не находится в том же часовом поясе, что и вы. И вы просматриваете одно и то же приложение учетной записи пользователя. Вы оба просите API отправить вам данные, начиная с даты «2020 01 01 00:00».

С Moment.js вы можете получить это с помощью:

const startTime = moment().startOf('year').valueOf()

Теперь, например, в часовом поясе Израиля это приведет к отметке времени startTime = 1577829600000, но по восточному времени (США и Канада) это приведет к отметке времени startTime = 1577854800000. Таким образом, каждый из вас будет получать данные из разных часовых поясов, что означает, что вы оба отправляете на сервер разные карты времени. Теперь, если на сервере не реализован какой-либо механизм часового пояса и он расположен, например, по восточному времени (США и Канада), вы получите

moment(1577829600000).format(‘YYYY MM DD HH:mm’)

для Израиля и

moment(1577854800000).format('YYYY MM DD HH:mm')

по восточному времени.

что означает «2019 12 31 17:00» для Израиля и «2020 01 01 00:00» для восточного времени соответственно. Это приведет к неправильным датам для нелокального пользователя учетной записи.

Возможное решение

Чтобы решить эту проблему, мы должны представить приложение в заданном часовом поясе пользователя. Это означает, что любой пользователь установит часовой пояс приложения в параметрах настроек. При этом часовой пояс останется неизменным независимо от того, в каком часовом поясе вы открываете приложение.

Итак, если я разрабатываю приложение календаря, например, и устанавливаю часовой пояс, например, Европа/Амстердам, он останется в этом часовом поясе во всем мире. То есть, если я открою свой календарь, например, в Нью-Йорке или в Израиле, я увижу точно такой же календарь.

А для приведенного выше примера с Moment.js это довольно просто. Вам просто нужно получить правильную метку времени с установленной строкой часового пояса:

const startTime = moment().tz('Europe/Amsterdam').startOf('year').valueOf()

Это даст отметку времени 1577833200000 независимо от того, где используется приложение.

Поэтому везде, где у меня есть дата в моем приложении, я всегда буду использовать

moment(time).tz(timezoneString).format(momentForamt)

Важно отметить

При работе с объектами Date, такими как, например, «новая дата (2020, 0, 1)», мы должны учитывать, что это даст нам время по местному времени UTC. Таким образом, реализуя

moment(new Date(2020, 0, 1)).tz('Europe/Amsterdam').format('YYYY MM DD HH:mm')

например, это приведет к «2019 12 31 23:00» по часовому поясу Израиля, а не к «2020 01 01 00:00», как ожидалось. Таким образом, работа с временными метками, а не с объектами Date, может решить эту проблему.

Ссылки по теме

Контакты

Надеюсь, это помогло вам реализовать обработку часовых поясов в вашем приложении.

Спасибо за чтение,

Зои Кац,

Разработчик интерфейса