jQuery Date Picker
This example demonstrates how to create a date picker using the jQuery UI plugin with some basic HTML and CSS code. The source and documentation for the jQuery date picker can be found at jQuery UI: Datepicker.
jQuery date picker demo
Click on the text input below:
jQuery date picker HTML code
The HTML for the date picker is simply:
<input id="my-date-picker" class="datepicker" type="text" size="15">
If you want to have more than 1 date picker on the same page, simply create another input field but with a different id, and initialise that also similarly to the jQuery code below.
jQuery date picker CSS code
The stylesheet for a plain date picker can be referenced like so:
<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css'>
If you want to make your date picker look a bit more interesting, the jQuery Datepicker page recommends using ThemeRoller. However, you can also write your own customised CSS.
Date picker jQuery code
Alternatively, you can include the script from the Google API Library, e.g.:
Then you need to download or link to the jQuery UI plugin, include it in your scripts after the jquery, along with the datepicker() initialise command
/* Initialise date picker */
Latest website updates
- HTML Color Picker
- Cross-domain dynamic Iframe height
- Create a modal popup window
- HTML5 video player using schema.org markup
- Randomly Positioned Photos - A jQuery Photo Gallery Plugin
- Building a responsive jQuery carousel
- Creating a responsive image gallery jQuery plugin
- Creating a funky and responsive photo gallery using jQuery
- Blueprint CSS framework demos and review
- Job Interview Technical Test examples
- Regular Expressions
- Website performance optimization
- Multiple page background images
- Creating your own jQuery plugin
- Creating a Carousel using jQuery
Send us your feedback
If you want to send any feedback, corrections, contact request or just voice your opinion, please drop us a line using our feeback form.
Do you have a similar website?
If you have a similar website and want to become a website partner or simply to share links, feel free to drop us a line.