Scenario:
Time pickerwill be a drop down with time from 00:00 to 23:30 with periods of 30 mins gap like 09:00,09:30,10:00,10:30...
Date pickerwill be a regular date picker but if current date is chosen then all times before current time will be greyed out in the time picker.
Lets get the HTML up first
<input type="date" name='datepicker' id='datepicker'>
<select name='timepicker' id='timepicker'>
<option value="00.00">00.00 AM</option>
<option value="00.30">00.30 AM</option>
<option value="01.00">01:00 AM </option>
<option value="01.30">01:30 AM</option>
<option value="02.00">02:00 AM</option>
<option value="02.30">02:30 AM</option>
<option value="03.00">03:00 AM</option>
<option value="03.30">03:30 AM</option>
<option value="04.00">04:00 AM</option>
<option value="04.30">04:30 AM</option>
<option value="05.00">05:00 AM</option>
<option value="05.30">05:30 AM</option>
<option value="06.00">06:00 AM</option>
<option value="06.30">06:30 AM</option>
<option value="07.00">07:00 AM</option>
<option value="07.30">07:30 AM</option>
<option value="08.00">08:00 AM</option>
<option value="08.30">08:30 AM</option>
<option value="09.00">09:00 AM</option>
<option value="09.30">09:30 AM</option>
<option value="10.00">10:00 AM</option>
<option value="10.30">10:30 AM</option>
<option value="11.00">11:00 AM</option>
<option value="11.30">11:30 AM</option>
<option value="12.00">12:00 PM</option>
<option value="12.00">12:30 PM</option>
<option value="13.30">13:30 PM</option>
<option value="14.00">13:30 PM</option>
<option value="14.30">14:30 PM</option>
<option value="15.00">15:30 PM</option>
<option value="15.30">15:30 PM</option>
<option value="16.00">16:30 PM</option>
<option value="16.30">16:30 PM</option>
<option value="17.00">17:30 PM</option>
<option value="17.30">17:30 PM</option>
<option value="18.00">18:30 PM</option>
<option value="18.30">18:30 PM</option>
<option value="19.00">19:30 PM</option>
<option value="19.30">19:30 PM</option>
<option value="20.00">20:30 PM</option>
<option value="20.30">20:30 PM</option>
<option value="21.00">21:30 PM</option>
<option value="21.30">21:30 PM</option>
<option value="22.00">22:20 PM</option>
<option value="22.30">22:30 PM</option>
<option value="23.00">23:00 PM</option>
<option value="23.30">23:30 PM</option>
</select>
You should get a simple UI like this-
Now the JS part:
const timePicker=document.querySelector('#timepicker');
const datePicker=document.querySelector('#datepicker');
datePicker.addEventListener('change',function(e){
console.log('checking to disable dates');
checkAndUpdateTimePicker();
timePicker.value='';
});
function checkAndUpdateTimePicker(){
if(new Date(datePicker.value).toLocaleDateString()==new Date().toLocaleDateString()){
document.querySelectorAll('#timepicker option').forEach(opt=>{
console.log(opt.value);
let optHour=opt.value.split('.')[0];
let optMinute=opt.value.split('.')[1];
let currentHour=new Date().getHours();
let currentMinute=new Date().getMinutes();
if(optHour<currentHour){
opt.disabled=true;
opt.dataset.description ='Please scroll to choose a different time, this time has passed.';
}
if(optHour==currentHour && optMinute<currentMinute){
opt.disabled=true;
}
});
}else{
document.querySelectorAll('#timepicker option').forEach(opt=>{
opt.disabled=false;
});
}
}
Once you add the JS you can have a behaviour like this-
1- When you choose a date as current date all time slots before current time will be greyed out, I happen to be writing this blog at 11.45 PM so all slots are greyed out :)
2- When you choose a date in the future the all time slots should be available and enabled.
There is always room for improvement
1- You can dynamically populate the time instead of hard coding.
function populateTimePicker(){
for(let i=0;i<24;i++){
let opt=document.createElement('option');
if(i===24){
opt.value='00.00';
}
else if(i.toString().length===1){
opt.value='0'+i+'.00';
opt.text='0'+i+'.00 AM';
}
else{
opt.value=i+'.00';
if(i<12){
opt.text=i+'.00 AM';
}
else{
opt.text=i+'.00 PM';
}
}
timePicker.appendChild(opt);
let opt30=document.createElement('option');
opt30.value=opt.value.split('.')[0]+'.30';
opt30.text=opt.text.split('.')[0]+'.30 '+opt.text.split('.')[1].split(' ')[1];
timePicker.appendChild(opt30);
}
}
2- You can make the dates prior to current date disabled by setting the current date as min dynamically in JS. You can achieve it by adding the following line of code.
datePicker.min=`${new Date().getFullYear()}-${(new Date().getMonth()+1).toString().length==1?'0':''}${new Date().getMonth()+1}-${new Date().getDate().toString().length==1?'0':''}${new Date().getDate()}`;
Thank you for your time.
Top comments (0)