Links enabled/disabled based on time of day? (30 min increments)

Question

I have a dropdown of times for a person to select they would like their food to be delivered. I was wondering if there was a way to disable each li item when that certain part of the day has passed. Would this be considered a server side or can be it be done with javascript?

    <ul class="c-dropdown__list time">
     <li class="c-dropdown__item--time" data-dropdown-value="ASAP">11:00 - 11:30 AM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">11:30 - 12:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">12:00 - 12:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">12:30 - 01:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">01:00 - 01:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">01:30 - 02:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">02:00 - 02:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">02:30 - 03:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">03:00 - 03:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">03:30 - 04:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">04:00 - 04:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">04:30 - 05:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">05:00 - 05:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">05:30 - 06:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">06:00 - 06:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">06:30 - 07:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">07:00 - 07:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">07:30 - 08:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">08:00 - 08:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">08:30 - 09:00 PM</li>
   </ul>

Thank you!

You can do that on either side, but that's the least of your problems. Have you considered your users' timezones may be different from your server's? — Frédéric Hamidi, Aug 27 '15 at 15:22
@FrédéricHamidi It would only be local (EST) because the radius of the delivery is only within a 50 mile radius. — logan26, Aug 27 '15 at 15:25
All right then, timezone issues won't affect you. Now, "disabling" the items (I assume you want to make them unselectable, because `
@BeckyT remember to accept the answer if it solved the question for you :) — Stacey Burns, Aug 29 '15 at 12:44

score 0 · Answer 1 · answered Aug 27 '15 at 15:38

Would this be considered a server side or can be it be done with javascript?

You'll need to do this on the server side. If you do it on the client side the time will be taken from the user's computer and need not necessarily be accurate (for instance if they have intentionally set their computer clock to be 15 minutes ahead).

score 0 · Accepted Answer · answered Aug 27 '15 at 15:46

If you are not concerned about a conflict in time between different client computer time/ time zones, you can do this using javascript.

First, set a data-attribute on your items to say what max time would be to show:

<ul class="c-dropdown__list time">
    <li class="c-dropdown__item--time" data-dropdown-value="ASAP" data-max="1130">11:00 - 11:30 AM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1230">11:30 - 12:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1230">12:00 - 12:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1300">12:30 - 01:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1330">01:00 - 01:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1400">01:30 - 02:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1430">02:00 - 02:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1500">02:30 - 03:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1530">03:00 - 03:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1600">03:30 - 04:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1630">04:00 - 04:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1700">04:30 - 05:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1700">05:00 - 05:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1730">05:30 - 06:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1800">06:00 - 06:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1830">06:30 - 07:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1900">07:00 - 07:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1930">07:30 - 08:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="2000">08:00 - 08:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="2030">08:30 - 09:00 PM</li>
</ul>

Then with javascript, you can loop through them and check if the current time is less than the max time. If true, hide the element:

// current time
        var date = new Date();
        //concat hour and minute 
        var check = date.getHours() + "" + date.getMinutes();
        //get list of items
        var times = document.getElementsByClassName("c-dropdown__item--time");

        //loop through and compare
        for (var i = 0; i < times.length; i++) {

            var maxtime = parseInt(times[i].getAttribute("data-max"));

            if(maxtime < check) {
                //set display to none
                times[i].style.display = "none";
            }
        }

Awesome! This worked great. Thank you for explaining. Another question, instead of displaying none, do you apply a class to "disable" the list item, like greying it out? — logan26, Aug 27 '15 at 17:24
Yeah this can be done. Instead of setting the display just add a class using item[i].className += ' additionalClass'. Then set as un-selectable in the class definition. There is a good explanation here: http://stackoverflow.com/questions/6900124/make-some-text-unselectable-with-css — Stacey Burns, Aug 27 '15 at 17:36

Links enabled/disabled based on time of day? (30 min increments)

2 Answers2