Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

238
Views
how to disable select option after a certain time?

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>
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!