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

[Josh-R]

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!

 

[KenBuja · Accepted 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;
  }
}

 

[Josh-R]

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!