Widget date/time internationalization/localization

While the Cesium animation widget allows user-programmable localization of date/time formats, the timeline widget does not formally expose this functionality. There is also a focus on showing microsecond resolution, which can clutter the display when the natural timescale is higher-level. Interestingly, the widgets unnecessarily also maintain separate static arrays for standard three-letter month name abbreviations.

I found a way around this that may have broader interest, and could hopefully inspire to a more general solution in an upcoming Cesium version. While the timeline.makeLabel is formally defined as a private method, it is actually possible to override it, allowing easy generalization and harmonization of widget time/date formatting.

Specifically, I add:

viewer.animation.viewModel.dateFormatter = localeDateTimeFormatter;
viewer.animation.viewModel.timeFormatter = localeTimeFormatter;
viewer.timeline.makeLabel = function(time) { return localeDateTimeFormatter(time); }

The implementation uses one key datetime formatting function, localeDateTimeFormatter(), with a JavaScript standard method for selecting locale language. The function and a helper wrapper for time display only are listed below.

The solution is not a full internationalization, but has elements that make it easy to tailor display to preferences. It also gets rid of clutter, while still allowing millisecond display when relevant.

Kjell

// Date formatting to a global form
function localeDateTimeFormatter(datetime, viewModel, ignoredate) {
var gregorianDT = Cesium.JulianDate.toGregorianDate(datetime), objDT;
if(ignoredate)
objDT = '';
else {
objDT = new Date(gregorianDT.year, gregorianDT.month-1, gregorianDT.day);
objDT = gregorianDT.day + ' ' + objDT.toLocaleString("en-us", { month: "short" }) + ' ' + gregorianDT.year;
if(viewModel || gregorianDT.hour+gregorianDT.minute === 0)
return objDT;
objDT += ' ';
}
return objDT + Cesium.sprintf("%02d:%02d UTC", gregorianDT.hour, gregorianDT.minute);
}
function localeTimeFormatter(time, viewModel) {
return localeDateTimeFormatter(time, viewModel, true);
}

Start by inspecting the animation and timeline widget implementations, focusing on the existing dateFormatter, timeFormatter, and makeLabel behavior described in the issue. Compare how date, time, month names, and sub-second precision are currently displayed. Done means the timeline formally supports configurable localization and the widgets use consistent, less cluttered formatting without losing relevant precision.

Written by the indexing model from the issue text.