try1

Ask the community
, ,
1 
const daysOfTheWeek = ["Sat""Sun", "Mon", "Tue", "Wed", "Thu", "Fri"];           // List of the days of the week.
 $w("#dayPicker").options = getWeekDays(today).map(day => {
 return {
 // Set label to be name of day (e.g Tue 18/12/2021).
 label: `${daysOfTheWeek[day.date.getDay()]} ${day.date.toLocaleDateString("en-GB")}`,  // Set label to be name of day (e.g Tue 18/12/2021).
 value: day.date.toISOString()}    // Set the value to be ISO string representation of date (e.g. 2021-12-17T22:00:00.000Z).
 });
 // When day of week is selected in daypicker dropdown, populate time dropdown with times of available slots on selected day.
    $w("#dayPicker").onChange((event, $w) => {
    const selectedDate = new Date(event.target.value);
    findAvailableSlots(selectedDate);
 }); 
 async function findAvailableSlots(dateString) {
 slotsMap = {};                                        // Reset the slot map to be empty.
 const startDateTime = getMidnight(dateString);        // Get the beginning time of the selected date.
 const endDateTime = getNextMidnight(dateString);      // Get the ending time of the selected date.
 const options = {startDateTime,endDateTime};          // Set the options object which contains the date restrictions.
 // Get all available slots which are not already pending approval for the selected day.
 const availableSlots = await getNonPendingAvailableSlots(serviceId, options);
 if (availableSlots.length === 0) {                  // If no available slots are found:
 // Reset the time dropdown.
        $w("#slotPicker").options = [];
        $w("#slotPicker").placeholder = "No sessions this day";
        $w("#slotPicker").selectedIndex = undefined;
        $w("#slotPicker").disable();
 }
 else {
 // Otherwise, when available slots are found Populate the time dropdown with the start time of the available slot and store the available slots in the slot map by ID.
 $w("#slotPicker").options = availableSlots.map(slot => {
 const uniqueId = new Date().getUTCMilliseconds().toString();    // Generate unique ID to identify option in slotPicker
 slotsMap[uniqueId] = slot;
 let startTime = slot.startDateTime;
 let endTime = slot.endDateTime;
 let timeString = getTimeOfDay(startTime);
 return {
           label: timeString,
           value: uniqueId 
 }
 });
 // Populate the time dropdown with the End time of the available slot and store the available slots in the slot map by ID.
 $w("#dropdown1").options = availableSlots.map(slot => {
 const uniqueId = new Date().getUTCMilliseconds().toString() // Generate short unique ID to identify options in slotPicker
            slotsMap[uniqueId] = slot;
 let endTime = slot.endDateTime;
 let timeString = getTimeOfDay(endTime);
 return {
                label: timeString,
                value: uniqueId 
 }
 });

        $w("#slotPicker").placeholder = "Pick a time";            // Reset the time dropdown's placeholder text.
 // Reset the time dropdown, so no item is selected.
        $w("#slotPicker").selectedIndex = undefined;
        $w("#dropdown1").selectedIndex = undefined;
        $w("#slotPicker").enable();
        $w("#dropdown1").enable();
 }
}
  $w("#slotPicker").onChange((event, $w) => {
 let index = $w("#slotPicker").selectedIndex;                // Get the selected index
 let itemOptions = $w("#slotPicker").options[index]          // get the selected item
 let itemLabel = itemOptions.label;                          // grab the label of selected object  
 });
2

What is your question?