How to Work with Datepicker in CSS3 - dummies

How to Work with Datepicker in CSS3

By John Paul Mueller

There are situations where HTML5 currently provides a solution for a particular need in CSS3, but few vendors have implemented it yet. This is the case with the date and time support for HTML. Only Opera and Chrome provide support for the date and time features. For example, if you want to add a date to a form, you can use the date input type as shown here:

<label for="Date">Enter a Date: </label>
<input id="Date"
 type="date" />

The default date is today. When the user clicks the field, the application displays a date picker control, but only when you use Opera or Chrome. Until the other vendors provide date and time support, it’s still necessary to use the jQuery UI Datepicker widget to ensure that all of your users can enter a date with ease.

The following code shows how to use the Datepicker widget. (You can find complete code for this example in the Chapter 06Widgets folder of the downloadable code as Datepicker.HTML.)


DateEntry is a standard <input type=”text”> control. When the user clicks the control, jQuery UI automatically displays a calendar like this: