.NET Answers

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

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:

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 Related Items:

All Purpose NetThey are specifically designed for koi, surface skimming, and general all-purpose use. Heavy duty aluminum construction, telescoping handle to 6-1/2 . Soft fish safe nylon netting. Sure-grip handle. Aluminum & Nylon Mesh.

Active Server Pages (ASP)/Visual Basic (VB).NET - Instructor-based Video Training BundleInteractive Instructor-Based Active Server Pages (ASP)/Visual Basic (VB).NET Bundle Video Training Course on DVD-ROM. Computer Based Training (CBT) a... Read More >

AXIOM 32MB DRAM Memory ModuleRAM Module Cisco MSR Catalyst 8500 Series AXCS-ASP-32M www.axiommemory.com 2 x 16 MB Lifetime SIMM Axiom Memory Solutions 32MB DRAM Memory Module 32 MB Axiom DRAM

Related Post

• jQuery and ASP.NET UpdatePanel
• Do you Need My Help?
• jQuery Splitter
• jQuery Dialog – With Validation Controls
• jQuery – Dialog

Bookmark to:

Hide Sites

Comments are closed.