Custom Date Picker using Vanilla JavaScript

In this video I show you how to build a custom date picker, format dates, add many different date picker functionalities using pure vanilla JavaScript.

Details:
Have only a few days before your following react interview? Get ready for your React JS interview in no time with this comprehensive last-minute preparation guide! This handbook covers all the essential React JS interview questions and provides answers, tips, and explanations to help you confidently tackle any interview situation. Don't let stress and lack of preparation hold you back, grab your copy now and be fully prepared for your next big opportunity!

Pay once and you get the following:
- Frequent updates
- Lifetime access to all new questions and answers that get added with time
- Some questions include potential follow-up sub-questions asked in an interview (to strengthen your concept)
- Step-by-step explanation of each question with examples
- 36 in-depth conceptual Questions + Answers (with free access to all upcoming questions)

This handbook will help you:
- Ace your interview
- Potentially land a good job
- Boost your confidence
- Become interview ready
- Understand the implementation of concepts in real-world scenarios

0:00 - demo
01:40- setup
01:58 - HTML
05:42 - CSS
11:42 - JS logic (adding selectors)
15:23 - toggleDatePicker function
20:41 - checkClassExist function
36:57 - initialising date variables
39:00 - next & prev arrow functionality
44:11 - populateDates function
57:46 - formatDate function
1:02:00 - bug fixes
01:04:21 - adding default selected date
01:04:56 - checking final build + end

[rishtekhojocom]

sir you are best teacher in the world. Many namy thanks to you for such awesome tutorial. I have found one error in the vidio. which is e.path. e.path is not supported for crome. So I change it by e.composedPath and the date picker works fine. Than you again to you. can you teach us time picker similarly? we are wating your answer.

[xplodivity]

Seems like JavaScript made a small change due to which theres a minor update necessary for the code to work.

For anyone watching, just replace the e.path with e.composedPath() in the checkClassExist function parameter.
And everything should work fine.

[noahapplebaum]

is there a way to dynamically set the minDate variable? i have the vanillaJS datepicker in a wrapper in my react app with props being passed through. for some reason when I dynamically want to set the minDate to either today or tomorrow based on other criteria, vanillaJS does not respond to the change.

[LightYagami-gdww]

function toggleDatePicker(e) {
if (!checkClassExist(e.path, "dates-container")) {

}
}

function checkClassExist(path, selector) {
for (let i = 0; i < path.length; i++) {
if (path[i].classList && {
return true;
}
}

return false;
}

is this code still working?
after I type this code, when I click date container nothing happen.
I tried your code too. Same result nothing happen. Something is not working anymore

[AdilAZZAB]

your code is not working sir, when I tap the div element nothing happen