Change Timeline from UTC to Local Time

CesiumJS
1

This has been asked several times before however I haven’t seen an answer for this.

Is there a way to view the Timeline in local time format not UTC?

3

This was answered here: How to fix cesium timezone？. You can override the timeFormatter or dateFormatter functions which take a date/time and return a string that appears in the clock widget.

To handle displaying the timezone correctly you’ll probably want to use another library to take care of that formatting. Here is a JSFiddle that uses the Luxon library to set the time to the user’s local timezone, and you can use this to set the time to a specific timezone as well:

4

Thank you!

I found something similar however it wasn’t working.

This will assist greatly. Cheers

1 Like
5

@omar,

Can the same thing be done for the Timeline bar?

I can see this mentioned in a few spots however I don’t believe makeLabel exists anymore?

_viewer.timeline.makeLabel = function(date) {
var gregorianDate = Cesium.JulianDate.toGregorianDate(date);
return gregorianDate.year;
};

6

All,

For timeline bar updates see here:-

My final solution was very basic. In TypeScript it looks like the following if anyone is interested.

       this.viewer.animation.viewModel.dateFormatter = (date, viewModel) => {

          const gregorianDT = JulianDate.toGregorianDate(date);

          const objDate = new Date(gregorianDT.year, gregorianDT.month - 1, gregorianDT.day);

          return gregorianDT.day + ' ' + objDate.toLocaleString('en-us', { month: 'short' }) + ' ' + gregorianDT.year;

        };

        this.viewer.animation.viewModel.timeFormatter = (date, viewModel) => {

          const localDate = JulianDate.toDate(date);

          return localDate.toLocaleTimeString();

        };
1 Like
7

this.viewer.animation.viewModel just updates the clock widget but not the labels in the timeline.

The makeLabel method seems to still be there:

It is just marked as private and therefore Typescript does not allow overriding it. However forcing it (with as any) works.