Change time format of the clock and timeline

CesiumJS
1

Hi!
I need help. I would like to format the dates and times of the timeline and the clock in Zulu format. I can’t change the clock. For the others, here is what I did. I find this strange and a little dirty if you have other suggestions I am interested

  configureTimeline(fromDate: Date, toDate: Date, speedMultiplier: number = 1): void {
    if (!this.viewer) {
      console.error('Cesium Viewer is not initialized. Call initializeViewer() first.');
      return;
    }

    const startDate = Cesium.JulianDate.fromDate(fromDate);
    const endDate = Cesium.JulianDate.fromDate(toDate);

    this.viewer.clock.startTime = startDate;
    this.viewer.clock.stopTime = endDate;
    this.viewer.clock.currentTime = startDate;
    this.viewer.clock.multiplier = speedMultiplier;
    this.viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;// Loop the timeline

    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('fr', { month: 'short' }) + ' ' + gregorianDT.year;

    };


    // Update timeline labels in FR
    (this.viewer.timeline as any).makeLabel = (time: Cesium.JulianDate): string => {
      const date = Cesium.JulianDate.toDate(time);

      return format(date, "dd MM yyyy HH:mm:ss 'Z'")
    }

}

Thanks you !

2

Hi @Kentin_RDG ,

Thanks for your post and welcome to the Cesium community.

This previous post here Change Timeline from UTC to Local Time - #3 by omar shows how you can override the timeFormatter or dateFormatter functions which take a date/time and return a string that appears in the clock widget. Can you use that as a template to get the date format you are looking for.

Please let us know and we are happy to try to help more if needed.
Best,
Luke