Skip to content


Select date by calendar

Author: James Brown

As part of the development for one our projects we needed a way of entering a date with having to manually type in the details or solely using pick lists to choose day, month & year. Both of these methods are prone to dates being entered incorrectly.

We have configured a JavaScript date picker which pops up a neat little calendar defaulting to today's date, when clicking a small icon. This calendar allows you to scroll through a month at a time, presenting you with each day of the month. Clicking a particular day will automatically populate the relevant date field on the form. If you need to choose a date that is in a different year and didn't want to scroll through all the months, you can simply click the header of the calendar which first shows you all the months in the current year, clicking again will then show 20 individual years for you to select or scroll through in blocks of 20 years. Choosing a year will then take you to 12 individual months for you to select and then finally the individual days for the selected month.

This date picker can also be modified to allow you to enter a time should you need to store this as well as a date.