topic How would one format the labels of a time slider to only show the "year"? in ArcGIS JavaScript Maps SDK Questions

How would one format the labels of a time slider to only show the "year"?

Josh-R — Tue, 21 Nov 2023 03:25:52 GMT

How would one format the labels of time slider to only show the "year" from my date column? Particularly the "extent" object (see the red circles). I am able to change the "min" and "max" without much trouble using a lableFormatFunction but I cannot get the extent to change while retaining it's ability to dynamically update when adjusting the slider. Thank you!

Re: How would one format the labels of a time slider to only show the "year"?

KenBuja — Tue, 21 Nov 2023 14:31:30 GMT

This labelFormatFunction returns the years in the extent (shown using this sample, with a few alterations)

labelFormatFunction: (value, type, element, layout) => { const options = {year: 'numeric'} const normal = new Intl.DateTimeFormat("en-us", options); switch (type) { case "min": element.setAttribute("style", "color: #ff642e;"); element.innerText = normal.format(value); break; case "max": element.setAttribute("style", "color: #ff642e;"); element.innerText = normal.format(value); break; case "extent": const start = timeSlider.fullTimeExtent.start; const year0 = value[0].getFullYear(); const year1 = value[1].getFullYear() element.innerText = `${year0} - ${year1}`; break; } }

Re: How would one format the labels of a time slider to only show the "year"?

Josh-R — Tue, 21 Nov 2023 17:57:43 GMT

I was able to get this function to work after I reformatted my timeslider to use the same format as the provided sample.

For some reason I was having a hard time getting this to work within the "view.whenLayerView(layer).then((lv) => {" format used in this sample.

Thanks!