Datepicker Textbox Element

1 Datepicker Textbox Element - #datepicker_textbox {}

1 Datepicker Textbox Element - #datepicker_textbox {}

The datepicker textbox element produces an HTML textbox that automatically pops up a jQuery UI Datepicker when the control takes the focus.

Usage

#datepicker_textbox{
   id=date1,
   text="5/25/2013",
   options=[
      {dateFormat, "mm/dd/yy"},
      {showButtonPanel, true}
   ]
}

Attributes

text - (string)

Set the textbox's contents.

html_encode - (boolean)

Set to true to safely html-encode the text.

options - (list of {Key,Value} properties)

Set the jQuery UI options. You can view the full list of options at the official jQuery UI Datepicker API Documentation. Here are a few common options:

formatDate - (format string): Change the format of the displayed date (e.g.: ="yy-mm-dd"=, ="mm/dd/yy"= ).
showOtherMonths - (boolean): Set to true to allow the datepicker to show the previous and next month's last and first days in the otherwise blank spaces.
selectOtherMonths - (boolean): If showOtherMonths is true, then clicking those leading and trailing dates will also put the date in the textbox.
numberOfMonths - (integer): Display the specified number of months in the calendar popup rather than just a single month.
changeMonth - (boolean): Put a "Month" dropdown box in the calendar popup
changeYear - (boolean): Put a "Year" dropdown box in the calendar popup
showButtonPanel - (boolean): Put a button panel below the calendar popup which includes a "Today" button, and a "Close" button (the text of which can be customized.

disabled - (boolean)

Set to true to disable this textbox in the browser (sets the HTML disabled property, effectly greying out the element). Can be dynamically re-enabled with wf:enable(ElementID) or wf:wire(ElementID, #enable{}) (Default: false)

readonly - (boolean)

Set to true to make this element readonly in the browser. Can be toggled with wf:wire(ElementID, #make_writable{}) and wf:wire(ElementID, #make_readonly{}).

placeholder - (string)

Sets the placeholder text (text that will be in the textbox until the user focuses in the textbox). This uses the HTML5 placeholder attribute, which is only supported in newer browsers. To add support for older-browsers, you will need to link a placeholder script in your template. You can do this by adding the following to your template inside the <head> section after loading jQuery.

<script src='/nitrogen/jquery.placeholder.js' type='text/javascript'></script>

next - (atom): If set with a valid control ID, pressing the enter key in the textbox will automatically move focus to the specified control.
postback - (Erlang term): If set, pressing the enter key in the textbox will automatically initiate a Nitrogen postback with the supplied term.
html_name - (string): The name attribute of the textbox.

Datepicker Textbox Element

Table of Contents

1 Datepicker Textbox Element - #datepicker_textbox {}

Usage

Attributes

See Also

Comments