Anzeigen von Datumsangaben in der Zeitzone des Benutzers

Anzeigen von Daten in der Zeitzone des Benutzers

1. Überblick

In dieser Rate vonthe Reddit app case study werden wir die bescheduling post’s according to the user’s timezone hinzufügen.

Der Umgang mit Zeitzonen ist notorisch schwierig und die technischen Möglichkeiten sind weitreichend. Unser erstes Anliegen ist, dass wir dem Benutzer Daten entsprechend ihrer eigenen (konfigurierbaren) Zeitzone anzeigen müssen. Wir müssen auchwhat format the date will be saved as, in the database entscheiden.

2. Eine neue Benutzereinstellung -timezone

Zunächst fügen wir unseren bereits vorhandenen Einstellungen ein neues Feld hinzu -timezone:

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

Wir dann einfachmake the timezone configurable in the user Preferences Page - nutzen eine einfache, aber sehr nützliche JQueryplugin:

Beachten Sie, dass die Standardzeitzone die Serverzeitzone ist -which runs on UTC.

3. Der Controller

Nun zum spaßigen Teil. Wir müssen Daten vonuser’s timezone inserver’s timezone konvertieren:

@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);
    }
}

Die Konvertierung ist recht unkompliziert. Beachten Sie jedoch, dass sie nur bei Schreibvorgängen ausgeführt wird. Der Server gibt weiterhin UTC für Lesevorgänge zurück.

Das ist für unseren Kunden vollkommen in Ordnung, da wir die Konvertierung in JS durchführen - aber es lohnt sich zu verstehen, dassfor read operations, the server still returns UTC dates.

4. Das Frontend

Lassen Sie uns nun sehen, wie Sie die Zeitzone des Benutzers im Front-End verwenden:

4.1. Zeigen Sie die Beiträge an

Wir müssen diesubmissionDatedes Posts anhand der Zeitzone des Benutzers anzeigen:


Post title
Submission Date
  (UTC)

Und hier ist unsere FunktionloadPage():

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);
}

Moment.js hilft hier bei der Zeitzonenumrechnung.

4.2. Planen Sie einen neuen Beitrag

Wir müssen auch unsereschedulePostForm.html ändern:

Submission Date (UTC)

Schließlich müssen wir auch unsereeditPostForm.html ändern, um den alten Wert vonsubmissonDatezu lokalisieren:

$(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. Fazit

In diesem einfachen Artikel haben wir ein einfaches, aber äußerst nützliches Feature in die Reddit-App aufgenommen - die Möglichkeit, alles gemäß Ihrer eigenen Zeitzone anzuzeigen.

Dies warone of the main pain points as I was using the app - die Tatsache, dass alles in UTC war. Jetzt - alle Daten werden korrekt in der Zeitzone des Benutzers angezeigt, so wie sie sein sollten.

TOC