Updating WMTS TIME or other parameters using TimeSlider

[JurajMurcko1]

I have  WMTS layer with the  TIME dimension indicating "base time" from which a forecast is computed and a custom DIM_FORECAST parameter indicating forecast horizons (times for which forecasts are generated) in hours (0-72) from the "base" TIME value. 

I add the layer like this

  const UM1_CLOUD_WMTSLayer = new WMTSLayer({
        url: "https://mapy.meteo.pl/geoserver/gwc/service/wmts?",
        activeLayer: {
          id: "um:UM1_CLOUD",
        },
        customLayerParameters: {
          VERSION: '1.1.1',
          FORMAT: 'image/png',
          TIME: '2024-03-19T00:00:00Z',          
          DIM_FORECAST: 7,         
          TRANSPARENT: true,
          SRS: 'EPSG:3857'
        }
      });

now I would like to controll the DIM_FORECAST parameter with the TimeSlider widget.
https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider.html

I need to translate the date and time set in TimeSlider widget to the correct value of the DIM_FORECAST and call the WMTS with that value of the parameter.

How can I just get the set date from the TimeSlider (as UTC timestamp for example) and work with that value later on to translate it to DIM_FORECAST and call the WMTS.

[JoelBennett · Accepted solution]

Get the TimeSlider date.  The timeExtent value you choose depends on the mode.

var timeSliderDate = timeSlider.timeExtent.endDate || timeSlider.timeExtent.startDate;

Clone the date and zero out the time components:

var baseDate = new Date(timeSliderDate.valueOf());
baseDate.setUTCMilliseconds(0);
baseDate.setUTCSeconds(0);
baseDate.setUTCMinutes(0);
baseDate.setUTCHours(0);

Get the number of hours between the two date objects:

var milliseconds = timeSliderDate.valueOf() - baseDate.valueOf();
var seconds = milliseconds / 1000;
var minutes = seconds / 60;
var hours = minutes / 60;

Set the layer's request parameters:

UM1_CLOUD_WMTSLayer.set("customLayerParameters.TIME", baseDate.toISOString());
UM1_CLOUD_WMTSLayer.set("customLayerParameters.DIM_FORECAST", Math.round(hours));