Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver
How to Create a Media Query in Dreamweaver
Create a New Style Sheet in the CSS Styles Panel

How to Work with Datepicker in CSS3

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 06\Widgets folder of the downloadable code as Datepicker.HTML.)

$(function()
 {
 $("#DateEntry").datepicker();
 })

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

image0.jpg
blog comments powered by Disqus
How to Apply CSS3 Effects and Transforms in Dreamweaver
CSS Code Hinting in Dreamweaver
How to Detect the User’s Browser Type in CSS3
How to Create a Border around an Image in CSS3
How to Use Multiple Styles Together with CSS3
Advertisement

Inside Dummies.com