jQuery – Date Picker

tp_vol4_002

Today we’ll start taking a look at the final control in the jQuery UI suite.  The Date Picker.

This control, as with all the other controls we’ve looked at, is relatively simple as long as you keep in mind that you need to use the jQuery UI Styles with it.

So let’s begin.

 

So assuming you’ve set up your project as we’ve specified earlier–that is, an ASPX page that uses a master page with the JavaScript includes for jQuery and jQuery UI as well as placing the jQuery theme information in the ASP.NET theme directory–all you should have left is a bit of HTML and the jQuery call.

The Date Picker works with a standard input field.  Since this is a .NET based blog, we will use an asp.net control instead.  It ultimately renders as an input field.

Date: <asp:TextBox 
    ID="m_textBoxDate" 
    CssClass="dateField" 
    runat="server"></asp:TextBox>

To turn this into a date picker, use the following jQuery code.

$(function() {
    $(".dateField").datepicker();
});

To render the date picker

 

image

By default the button triggers when you set focus into the input field and goes away when the input field loses focus.

An alternate rendering is to use a button:

image

You do this by using the showOn specifier

$(function() {
$(".dateField")
    .datepicker({ showOn: 'button' });
});

 

You can have the calendar show when either the button is clicked or when the field has focus by using:

$(function() {
$(".dateField")
    .datepicker({ showOn: 'both' });
});

There are other options, events, and methods that you can use to create a rich user experience with your application.  Check out the full documentation at the jQuery UI site.

http://jqueryui.com/demos/datepicker/

 

.

 

Other post in jQuery

Related Post

  • jQuery UI – Resizable w/ ASP.NET ThemesjQuery UI – Resizable w/ ASP.NET Themes If you've been up to the jQuery web site and looked at the documentation for resizable() you probably thought, "hey, no problem, I can do that."  Well, that's what I thought, too, until I started ...
  • jQuery – DialogjQuery – Dialog Ever since pop-up windows became “evil” in the web development world, developers have been looking for other ways to achieve the same effect.  The most common method is to use some sort of ab...
  • jQuery – Retrieving HTML FragmentsjQuery – Retrieving HTML Fragments A couple of weeks ago I mentioned that I had built a tooltip using jQuery.  We focused mostly on the positioning of the tooltip at the time because, historically, that's where most of the work has...
  • jQuery Dialog – With Validation ControlsjQuery Dialog – With Validation Controls Chances are, you’ll eventually want to use a dialog box in combination with some form elements, and when you do, you’ll probably want to implement some validation. True, there are some great va...
  • jQuery TabsjQuery Tabs While the TabControl provided by Microsoft in the AJAX toolkit is probably a bit easier to use, the Tabs in jQuery are not much harder to implement and give us a bit more flexibility. Here are th...