how to disable select option after a certain time?-CodePudding

Is it possible to disable the options after it goes out the range of time just by using html and javascript?

 <select onchange="myFunction()">
        <option value="" disabled selected>Select delivery time</option>
        <option value="10">10.00 AM - 12.00 PM</option>
        <option value="1">1.00 PM - 3.00 PM</option>
        <option value="3">3.00 PM - 7.00 PM</option>
    </select>

 <script>

    function myFunction(){
          const b = new Date();
          let hours = b.getHours();
         
        if(hours < document.getElementById('time1').value){
            document.select.options[1].disabled = true;
        }
    }
    </script>

CodePudding user response：

So close!!

I think you only had a few things wrong here, but most of it's fine. Here's a modified version of it, with some details.

 <select onchange="myFunction()">
        <option value="" disabled selected>Select delivery time</option>
        <option value="10">10.00 AM - 12.00 PM</option>
        <option value="1">1.00 PM - 3.00 PM</option>
        <option value="3">3.00 PM - 7.00 PM</option>
    </select>

 <script>

    function myFunction(){
          const b = new Date();
          let hours = b.getHours();
         
          // document.getElementById('time1') - 
          // elements with id of 'time1' aren't present in the
          // page, so we probably want to grab each <option>


          // This will grab all the option elements on the page
          const optionElements = document.querySelectorAll("select > option")

          // harding the '10.00 AM - 12.00 PM' <option>,
          // tag here, but you can loop over them like an array
          // we also may want to Number() cast 
          // Ex: 
          // Number(optionElements[1].value) 
          // or 
          // parseInt(optionElements[1].value)
        if(hours < optionElements[1].value){ 
            optionElements[1].disabled = true

        }
    }
    </script>

This won't update on its own, and currently it will disable after they've already clicked another option (or after they click on the option that should be disabled if it's too late (i.e., 1pm can't select 10am)), since none of the javascript is reactive; it will only ever run when the select tab changes.

CodePudding user response：

Instead of calling the function at onChange event, call at document load or when document is ready.

For this particular need, is better approach if you have your intervals in options values, I used an interval like this value="10-11" it represents 10am to 11am.

If you use getHours() method, it returns the hours in military time based means that for 10pm it will return 22.

let element = document.getElementById('time1');
let validateInterval = (element) => {
    let currentDate = new Date();
    let currentHour = currentDate.getHours();

    for (let opt of element.options) {
        let timeOpt = opt.value.split('-');
        if (Array.isArray(timeOpt) && timeOpt.length > 1) {
            opt.disabled = ( timeOpt[0] <= currentHour &&  timeOpt[1] > currentHour) ? false : true;
        }
    }
}

validateInterval(element);

<select id="time1">
   <option value="" disabled selected>Select delivery time</option>
   <option value="10-12">10:00 AM - 12:00 PM</option>
   <option value="13-15">1:00 PM - 3:00 PM</option>
   <option value="15-19">3:00 PM - 7:00 PM</option>
   <option value="20-22">8:00 PM - 10:00 PM</option>
   <option value="21-23">9:00 PM - 11:00 PM</option>
   <option value="22-23">10:00 PM - 11:00 PM</option>
</select>

From this, you can add minutes intervals too, go ahead an try by yourself.