Отображение дат в timezone пользователя

1. Обзор

В этом выпуске пример приложения Reddit , мы будем добавлять быть планирование поста в соответствии с тем, что пользователь имеет .

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

2. Новое предпочтение пользователя – часовой пояс

Во-первых, мы добавим новое поле – тайм- – к нашим уже существующим предпочтениям:

@Entity
public class Preference {
    ...
    private String timezone;
}

Затем мы просто сделать настраиваемый такс-пояс в странице предпочтений пользователя – используя простой, но очень полезный J-Кери плагин :

Обратите внимание, что тайм-пояс по умолчанию является серверным тайм- который работает на UTC .

3. Контроллер

Теперь, для самое интересное. Нам нужно конвертировать даты из время в в тайм-пояс сервера :

@Controller
@RequestMapping(value = "/api/scheduledPosts")
public class ScheduledPostRestController {
    private static final SimpleDateFormat dateFormat = 
      new SimpleDateFormat("yyyy-MM-dd HH:mm");
     
    @RequestMapping(method = RequestMethod.POST)
    @ResponseStatus(HttpStatus.OK)
    public void schedule(
      @RequestBody Post post, 
      @RequestParam(value = "date") String date) throws ParseException 
    {
        post.setSubmissionDate(
          calculateSubmissionDate(date, getCurrentUser().getPreference().getTimezone()));
        ...
    }
     
    @RequestMapping(value = "/{id}", method = RequestMethod.PUT)
    @ResponseStatus(HttpStatus.OK)
    public void updatePost(
      @RequestBody Post post, 
      @RequestParam(value = "date") String date) throws ParseException 
    {
        post.setSubmissionDate(
          calculateSubmissionDate(date, getCurrentUser().getPreference().getTimezone()));
        ...
    }
    
    private synchronized Date calculateSubmissionDate(String dateString, String userTimeZone) 
      throws ParseException {
        dateFormat.setTimeZone(TimeZone.getTimeZone(userTimeZone));
        return dateFormat.parse(dateString);
    }
}

Преобразование довольно просто, но обратите внимание, что это происходит только на записи операций – сервер по-прежнему возвращает UTC для чтения.

Это прекрасно для нашего клиента, потому что мы сделаем преобразование в JS – но это стоит понимать, что, для операций чтения сервер по-прежнему возвращает даты UTC .

4. Фронт-Энд

Теперь — давайте посмотрим, как использовать тайм-пояс пользователя в интерфейсе:

4.1. Отображение сообщений

Нам нужно будет отобразить данные поста представлениеDate с помощью тайм-пояса пользователя:


Post title
Submission Date 
  (UTC)

И вот наша функция loadPage () :

function loadPage(page){
    ...
    $('.table').append(''+post.title+''+
      convertDate(post.submissionDate)+'');
    ...
}
function convertDate(date){
    var serverTimezone = [[${#dates.format(#calendars.createToday(), 'z')}]];
    var serverDate = moment.tz(date, serverTimezone);
    var clientDate = serverDate.clone().tz($("#timezone").html());
    var myformat = "YYYY-MM-DD HH:mm";
    return clientDate.format(myformat);
}

Момент.js помогает здесь с преобразованием часового пояса.

4.2. Расписание нового поста

Мы также должны изменить наши расписаниеПостФорма.html :

Submission Date (UTC)

Наконец – мы также должны изменить наши editPostForm.html локализовать покорныйdate старое значение:

$(function() {
    var serverTimezone = [[${#dates.format(#calendars.createToday(), 'z')}]];
    var serverDate = moment.tz($("#date").val(), serverTimezone);
    var clientDate = serverDate.clone().tz($("#timezone").html());
    var myformat = "YYYY-MM-DD HH:mm";
    $("#date").val(clientDate.format(myformat));
});

5. Заключение

В этой простой статье мы ввели простую, но очень полезную функцию в приложение Reddit – возможность видеть все в соответствии с вашим собственным часовым поясом.

Это было один из главных болевые точки, как я использовал приложение – то, что все было в UTC. Теперь – все даты должным образом отображаются в часовом поясе пользователя, как и должно быть.