DEV Community

loading...
Cover image for Date & Time Picker in vanilla JS

Date & Time Picker in vanilla JS

Anil Kumar Khandei
Fullstack Development, Azure, React, JS, Donetcore, SQL, XML, XSLT
・4 min read

Scenario:

Time picker will 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 picker will 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>
Enter fullscreen mode Exit fullscreen mode

You should get a simple UI like this-
Alt Text

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;  
});
}
}


Enter fullscreen mode Exit fullscreen mode

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 :)

Alt Text

2- When you choose a date in the future the all time slots should be available and enabled.

Alt Text

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);
    }
}
Enter fullscreen mode Exit fullscreen mode

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()}`;
Enter fullscreen mode Exit fullscreen mode

Thank you for your time.

Discussion (0)