Skip to Navigation or
Skip to Content

JavaScript Date Picker

JavaScript Date PickerNote: If you are Australian, please consider this a "Date Selector" rather than a "Date Picker"!

I am the first to mention that there are already quite a few date pickers out there and if you are already using the jQuery framework, I recommend you take a look at the jQuery UI Date Picker.

However, if you are after a stand-alone JavaScript Date Picker that displays a calendar and allows people to select dates with custom formats, you might find this script useful.

You can view a demonstration of the date picker or have a quick look below for usage instructions.

If you want to use it with default options, it's as easy as this...

DatePicker.SetUpElement("DateField");

Where "DateField" is the id of the element you want to convert into a date picker.

You can also customise the settings, by manually setting them before you create the date pickers...

DatePicker.DateFormat = "mdy"; // US Format Dates (default is "dmy", which is UK style)
DatePicker.DateFormatter = "-"; // default is "/"
DatePicker.SetUpElement("DateField");

The above example would result in dates appearing as "12-31-2011" rather than the default "31/12/2011". This format is used to read the dates from the input and to place them back. You can go a lot further too - you can change the entire template, which displays the dates in a table by default... if you like, you can make it display in a big ordered list or anything else you like! You can also customise the month names and weekday names too.

 

You Are Here: Home » JavaScript » JavaScript Date Picker

 

I use a cookie on this website. This cookie doesn't contain or relate to any personal information and it isn't shared with any other website, it just ensures that I don't count you more than once in my website statistics. The Privacy and Electronic Communications Regulations require me to ask your permission to use this cookie, so please indicate below that you are happy for me to do this - I will remember your selection with a cookie, so if you accept I won't ask again...