Dynamic Dropdown: From Time - To Time

Ask the community
,
1

Hello, I am trying to create 3 sets of ‘from’ time and ‘to’ times. I need the the ‘to’ time in each of the sets to be reliant on the ‘from’ time.

For example, the user would set the ‘from’ time to 1:00 pm. I would need the options in the ‘to’ time to now only show the values that are greater than 1:00 pm. I would also need the ‘to’ time to be uneditable or hidden until the ‘from’ time is selected. If the user changes the ‘from’ time after the ‘to’ time is already selected, the ‘to’ time would need to reset if it is less than the new ‘from’ time.

Currently, I am using the ‘Time Picker’ input boxes in increments of 30 minutes. I don’t have to use those by any means if it makes it easier some other way.

Thank you in advance for your help!

2

Phil,

A web app that I use periodically with from and to date dropdowns does not do what you are describing. Intuitively, I’m guessing that most users hope for that functionality at the point where they access the second dropdown; I know I do. I may need to add something like this in the future to a particular site, so I became interested in spending some time on this.

Manually adding items using the “Manage Items” will not work for the “to” dropdown because there would be no way to dynamically filter it. That leaves two choices for the process of getting two dropdowns populated: through datasets and through code. Doing it all through code is a relatively advanced coding task, so that leaves using datasets since it sounds like you are not a veteran coder.

So, the first task is to create a collection (I’m calling it “TimeIncrements” to house the time values. Here’s a screen shot of a portion of the collection:

639×907 8.95 KB

  1. twentyfour is the time in a 24-hour clock.

  2. twentyfourSort is the time in numeric format that can be used in a greater than condition.

  3. twelve is the 12-hour clock that displays in your dropdown.
    Next, you would want to add one dataset connected to TimeIncrements that all of the “from” dropdowns can use. All three “to” dropdowns need to have a separate TimeIncrements dataset connected to it because they will need to be separately filtered.

Here’s the code in the from dropdown:

export function drpFrom_change(event) {
    wixData.query("TimeIncrements")
        .eq("twelve",event.target.value)
        .find()
        .then((results) => {
         if (results.items.length > 0) {
             let nTwelve = results.items[0].twentyfourSort;
             $w('#dataset2').setFilter(wixData.filter()
                 .gt("twentyfourSort", nTwelve)
              );
               $w('#drpTo').enable();
            } else {
                console.log("Time not found.");
            }
        })
        .catch((err) => {
             let errorMsg = err;
        });
}

Some notes on the code:

  • Event.target.value is the time value chosen from the dropdown.

  • The query needs to be run to obtain the numeric twentyfourSort value for that record since the value of the dropdown is the twelve hour time.

  • That will then be used in the setFilter “greater than” statement.

  • The “to” dropdown, called “drpTo”, is enabled after setting the filter.

3

Wow! Thank you for your reply. I will test this out and let you know if it is functioning correctly. BTW, you are very correct in that I am not a veteran coder. Been at it for about 2 months, but Wix has made it easier to learn.

4

Works like an absolute charm! Do you have a tip jar my friend?!