JUICE UI

Supercharge ASP.NET
Web Forms with jQuery UI

datepicker

Interaction — Extends a most controls to provide Datepicker functionality for the user.

The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.

By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the datepicker to a div or span.

You can use keyboard shortcuts to drive the datepicker:

  • page up/down - previous/next month
  • ctrl+page up/down - previous/next year
  • ctrl+home - current month or open when closed
  • ctrl+left/right - previous/next day
  • ctrl+up/down - previous/next week
  • enter - accept the selected date
  • ctrl+end - close and erase the date
  • escape - close the datepicker without selection

Examples

Default functionality

<asp:TextBox runat="server" ID="_Default" />
<Juice:Datepicker runat="server" TargetControlID="_Default" />

Restrict Date Range

<asp:TextBox runat="server" ID="_Restrict" />
<Juice:Datepicker runat="server" TargetControlID="_Restrict" MinDate="-20" MaxDate="+1M +10D" />

Icon Trigger

<style>
  .ui-datepicker-trigger {
    cursor: pointer;
    margin-left: 4px;
    position: relative;
  }
</style>

<asp:TextBox runat="server" ID="_IconTrigger" />
<Juice:Datepicker runat="server" TargetControlID="_IconTrigger" ButtonImage="/images/calendar-icon.png" ButtonImageOnly="true" ShowOn="both" ButtonText="Show date picker" />

Populate Alternate Field

<asp:TextBox runat="server" ID="_Alternate" />
<asp:TextBox runat="server" ID="_AlternateField" ClientIDMode="Static" />
<Juice:Datepicker runat="server" TargetControlID="_Alternate" AltField="#_AlternateField" AltFormat="DD, d MM, yy" />

Properties

Events

All events are currently of the type EventHandler. The "sender" parameter is a reference to the control, and should be cast appropriately to access the widget's properties and methods.