Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

246
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda