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!
Solved! Go to Solution.
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;
}
}
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;
}
}
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!