In this video, you will learn how to create a date dropdown picker, as an alternative to the calendar type input that HTML offers by default.
There are 2 main reasons as to why you would want to create this more primitive type of date picker where the days, months and years are split into 3 individual columns and the user selects a value for all 3, to end up with a finalised date: as opposed to the date picker that HTML now comes packaged with.
That is, either for compatibility reasons, like somebody viewing your application on an older browser that does not support HTML’s date input, as it is a fairly recent addition to HTML and therefore has poor compatibility with older browsers. Or, a conscious design choice on your behalf to use this style of dropdown for your date picker, instead of the menu widget that HTML can create for us. Because after all, this style of date picker can seem a bit overwhelming for less tech savvy users, and complexity and motion can contrast harshly with your website if you are going for a basic website design.
📚 Materials/References:
- Completed project on Code Pen: codepen.io/LFCProductions/pen...
🧠 Concepts Covered:
- select & option tags in HTML.
- Date object in JavaScript.
- How to detect a leap year.
- Creating elements from a JavaScript file and inserting them into the DOM.
💻 Technologies used:
- HTML
- CSS
- JavaScript
If you enjoyed this video then please consider liking 👍 and subscribing. You would be doing me a huge favour if you did this and it would be greatly appreciated ❤️ by me. Likewise, if you have any queries or comments that you want answered. Then please, don’t hesitate post them down into the comments box below. I would love to hear back from you and will answer all of your questions to the best of my ability.
Stay awesome guys. ❤️
#HTML#JavaScript#CSS#webdev#tutorial#coding#howto#frontend
8 июн 2021
