How to show timelist in dropdown using Javascript?

Question

I want to show a timelist dropdown for interval of 30 minutes and based on the date. If the date is today and past the time then the past time will be disabled. If the date is not today then it will show all the timelist.

 let $select = jQuery("#s_time");
    
        for (let hr = 8; hr < 22; hr++) {
    
        let hrStr = hr.toString().padStart(2, "0") + ":";
    
        let val = hrStr + "00";
        $select.append('<option val="' + val + '">' + val + '</option>');
    
        val = hrStr + "30";
        $select.append('<option val="' + val + '">' + val + '</option>')
    
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
     <select name="s_time" id="s_time" class="form-control bmg-hrs-mins-input">
     </select>
    </div>

I expect the time that has been past will be disabled if the date is today and if it is not today then it will show all the timelist.

do you want to enable the time picker only for the future dates? — Neha
– Neha, Commented Jun 18, 2019 at 4:57

shrys · Accepted Answer · 2019-06-18 06:51:20Z

2

You can disable the options conditionally. Try the following:

let $select = $("#s_time");
for (let hr = 8; hr < 22; hr++) {

  let hrStr = hr.toString().padStart(2, "0") + ":";

  let val = hrStr + "00";

  $select.append('<option val="' + val + '" ' + (new Date().getHours() >= hr ? 'disabled="disabled"' : '') + '>' + val + '</option>');

  val = hrStr + "30";
  $select.append('<option val="' + val + '" ' + (new Date().getHours() > hr || (new Date().getHours() >= hr && new Date().getMinutes() > 30) ? 'disabled="disabled"' : '') + '>' + val + '</option>')

}

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<div>
  <select name="s_time" id="s_time" class="form-control bmg-hrs-mins-input"></select>
</div>

edited Jun 18, 2019 at 6:51

answered Jun 18, 2019 at 5:05

shrys

5,9682 gold badges26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Neha · Accepted Answer · 2019-06-18 05:06:51Z

2

Firstly we need to compare the given date with today's date.

Javascript Code

var GivenDate = '2019-06-20';
var CurrentDate = new Date();
GivenDate = new Date(GivenDate);

if(GivenDate > CurrentDate){
   // enable select field 
     $('#s_time').prop('disabled', false);
}else{
   // disable select field 
    $('#s_time').prop('disabled', true);
}

I hope this helps! :)

answered Jun 18, 2019 at 5:06

Neha

2,3115 gold badges28 silver badges56 bronze badges

Collectives™ on Stack Overflow

How to show timelist in dropdown using Javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related