Date & Time Picker in vanilla JS
Tags: javascript, vanillajs, beginners
Published: 2021-02-07 19:25:56

###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

```html
<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-
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k5nwh3c2xselcicl5h5s.JPG)

Now the JS part:
```JavaScript
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 :)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lgasea2o76hti4z5l7gp.gif)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x0mv9akbcgg10zo58boy.gif)

## There is always room for improvement

1- You can dynamically populate the time instead of hard coding.

```JavaScript
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.
```Javascript
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.