From af15f2c4a192dea02aab9e519defc68c71763ec4 Mon Sep 17 00:00:00 2001 From: yvesf Date: Mon, 22 Nov 2010 14:34:55 +0100 Subject: jquery ui --- static/development-bundle/docs/datepicker.html | 2531 ++++++++++++++++++++++++ 1 file changed, 2531 insertions(+) create mode 100644 static/development-bundle/docs/datepicker.html (limited to 'static/development-bundle/docs/datepicker.html') diff --git a/static/development-bundle/docs/datepicker.html b/static/development-bundle/docs/datepicker.html new file mode 100644 index 0000000..98bf6c8 --- /dev/null +++ b/static/development-bundle/docs/datepicker.html @@ -0,0 +1,2531 @@ + + +
+

jQuery UI Datepicker

+
+

Overview

+
+

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
    • +
+
[edit]

Utility functions

+ +
[edit]

Localization

+

Datepicker provides support for localizing its content to cater for different languages + and date formats. Each localization is contained within its own file with the + language code appended to the name, e.g. jquery.ui.datepicker-fr.js for French. + The desired localization file should be include after the main datepicker code. They add their settings to the set + of available localizations and automatically apply them as defaults for all instances.

+

The $.datepicker.regional attribute holds an array of localizations, + indexed by language code, with '' referring to the default (English). Each entry is + an object with the following attributes: closeText, prevText, + nextText, currentText, monthNames, + monthNamesShort, dayNames, dayNamesShort, + dayNamesMin, weekHeader, dateFormat, + firstDay, isRTL, showMonthAfterYear, + and yearSuffix.

+

You can restore the default localizations with:

+

$.datepicker.setDefaults($.datepicker.regional['']); +

+

And can then override an individual datepicker for a specific locale:

+

$(selector).datepicker($.datepicker.regional['fr']); +

+The localization files are also available in the UI svn: http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/ +
+
+

Dependencies

+
    +
  • UI Core
    • +
+
+
+

Example

+
+ +

+A simple jQuery UI Datepicker.
+

+
$("#datepicker").datepicker();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  
+  <script>
+  $(document).ready(function() {
+    $("#datepicker").datepicker();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<div type="text" id="datepicker"></div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the datepicker. Can be set when initialising (first creating) the datepicker.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the disabled option specified. +
    +
    +
    $( ".selector" ).datepicker({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
+var disabled = $( ".selector" ).datepicker( "option", "disabled" );
+//setter
+$( ".selector" ).datepicker( "option", "disabled", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    altField

    +
    +
    Type:
    +
    Selector, jQuery, Element
    + +
    Default:
    +
    ''
    + +
    +
    +
    +

    The jQuery selector for another field that is to be updated with the selected date from the datepicker. Use the altFormat setting to change the format of the date within this field. Leave as blank for no alternate field.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the altField option specified. +
    +
    +
    $( ".selector" ).datepicker({ altField: '#actualDate' });
    +
    + + +
    + Get or set the altField option, after init. +
    +
    +
    //getter
+var altField = $( ".selector" ).datepicker( "option", "altField" );
+//setter
+$( ".selector" ).datepicker( "option", "altField", '#actualDate' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    altFormat

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    ''
    + +
    +
    +
    +

    The dateFormat to be used for the altField option. This allows one date format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. For a full list of the possible formats see the formatDate function

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the altFormat option specified. +
    +
    +
    $( ".selector" ).datepicker({ altFormat: 'yy-mm-dd' });
    +
    + + +
    + Get or set the altFormat option, after init. +
    +
    +
    //getter
+var altFormat = $( ".selector" ).datepicker( "option", "altFormat" );
+//setter
+$( ".selector" ).datepicker( "option", "altFormat", 'yy-mm-dd' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    appendText

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    ''
    + +
    +
    +
    +

    The text to display after each date field, e.g. to show the required format.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the appendText option specified. +
    +
    +
    $( ".selector" ).datepicker({ appendText: '(yyyy-mm-dd)' });
    +
    + + +
    + Get or set the appendText option, after init. +
    +
    +
    //getter
+var appendText = $( ".selector" ).datepicker( "option", "appendText" );
+//setter
+$( ".selector" ).datepicker( "option", "appendText", '(yyyy-mm-dd)' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    autoSize

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Set to true to automatically resize the input field to accomodate dates in the current dateFormat.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the autoSize option specified. +
    +
    +
    $( ".selector" ).datepicker({ autoSize: true });
    +
    + + +
    + Get or set the autoSize option, after init. +
    +
    +
    //getter
+var autoSize = $( ".selector" ).datepicker( "option", "autoSize" );
+//setter
+$( ".selector" ).datepicker( "option", "autoSize", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    buttonImage

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    ''
    + +
    +
    +
    +

    The URL for the popup button image. If set, buttonText becomes the alt value and is not directly displayed.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the buttonImage option specified. +
    +
    +
    $( ".selector" ).datepicker({ buttonImage: '/images/datepicker.gif' });
    +
    + + +
    + Get or set the buttonImage option, after init. +
    +
    +
    //getter
+var buttonImage = $( ".selector" ).datepicker( "option", "buttonImage" );
+//setter
+$( ".selector" ).datepicker( "option", "buttonImage", '/images/datepicker.gif' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    buttonImageOnly

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Set to true to place an image after the field to use as the trigger without it appearing on a button.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the buttonImageOnly option specified. +
    +
    +
    $( ".selector" ).datepicker({ buttonImageOnly: true });
    +
    + + +
    + Get or set the buttonImageOnly option, after init. +
    +
    +
    //getter
+var buttonImageOnly = $( ".selector" ).datepicker( "option", "buttonImageOnly" );
+//setter
+$( ".selector" ).datepicker( "option", "buttonImageOnly", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    buttonText

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    '...'
    + +
    +
    +
    +

    The text to display on the trigger button. Use in conjunction with showOn equal to 'button' or 'both'.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the buttonText option specified. +
    +
    +
    $( ".selector" ).datepicker({ buttonText: 'Choose' });
    +
    + + +
    + Get or set the buttonText option, after init. +
    +
    +
    //getter
+var buttonText = $( ".selector" ).datepicker( "option", "buttonText" );
+//setter
+$( ".selector" ).datepicker( "option", "buttonText", 'Choose' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    calculateWeek

    +
    +
    Type:
    +
    Function
    + +
    Default:
    +
    $.datepicker.iso8601Week
    + +
    +
    +
    +

    A function to calculate the week of the year for a given date. The default implementation uses the ISO 8601 definition: weeks start on a Monday; the first week of the year contains the first Thursday of the year.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the calculateWeek option specified. +
    +
    +
    $( ".selector" ).datepicker({ calculateWeek: myWeekCalc });
    +
    + + +
    + Get or set the calculateWeek option, after init. +
    +
    +
    //getter
+var calculateWeek = $( ".selector" ).datepicker( "option", "calculateWeek" );
+//setter
+$( ".selector" ).datepicker( "option", "calculateWeek", myWeekCalc );
    +
    + +
    +
    +
    • + + +
  • +
    +

    changeMonth

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Allows you to change the month by selecting from a drop-down list. You can enable this feature by setting the attribute to true.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the changeMonth option specified. +
    +
    +
    $( ".selector" ).datepicker({ changeMonth: true });
    +
    + + +
    + Get or set the changeMonth option, after init. +
    +
    +
    //getter
+var changeMonth = $( ".selector" ).datepicker( "option", "changeMonth" );
+//setter
+$( ".selector" ).datepicker( "option", "changeMonth", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    changeYear

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Allows you to change the year by selecting from a drop-down list. You can enable this feature by setting the attribute to true. Use the yearRange option to control which years are made available for selection.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the changeYear option specified. +
    +
    +
    $( ".selector" ).datepicker({ changeYear: true });
    +
    + + +
    + Get or set the changeYear option, after init. +
    +
    +
    //getter
+var changeYear = $( ".selector" ).datepicker( "option", "changeYear" );
+//setter
+$( ".selector" ).datepicker( "option", "changeYear", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    closeText

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'Done'
    + +
    +
    +
    +

    The text to display for the close link. This attribute is one of the regionalisation attributes. Use the showButtonPanel to display this button.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the closeText option specified. +
    +
    +
    $( ".selector" ).datepicker({ closeText: 'X' });
    +
    + + +
    + Get or set the closeText option, after init. +
    +
    +
    //getter
+var closeText = $( ".selector" ).datepicker( "option", "closeText" );
+//setter
+$( ".selector" ).datepicker( "option", "closeText", 'X' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    constrainInput

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    When true entry in the input field is constrained to those characters allowed by the current dateFormat.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the constrainInput option specified. +
    +
    +
    $( ".selector" ).datepicker({ constrainInput: false });
    +
    + + +
    + Get or set the constrainInput option, after init. +
    +
    +
    //getter
+var constrainInput = $( ".selector" ).datepicker( "option", "constrainInput" );
+//setter
+$( ".selector" ).datepicker( "option", "constrainInput", false );
    +
    + +
    +
    +
    • + + +
  • +
    +

    currentText

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'Today'
    + +
    +
    +
    +

    The text to display for the current day link. This attribute is one of the regionalisation attributes. Use the showButtonPanel to display this button.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the currentText option specified. +
    +
    +
    $( ".selector" ).datepicker({ currentText: 'Now' });
    +
    + + +
    + Get or set the currentText option, after init. +
    +
    +
    //getter
+var currentText = $( ".selector" ).datepicker( "option", "currentText" );
+//setter
+$( ".selector" ).datepicker( "option", "currentText", 'Now' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    dateFormat

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'mm/dd/yy'
    + +
    +
    +
    +

    The format for parsed and displayed dates. This attribute is one of the regionalisation attributes. For a full list of the possible formats see the formatDate function.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the dateFormat option specified. +
    +
    +
    $( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });
    +
    + + +
    + Get or set the dateFormat option, after init. +
    +
    +
    //getter
+var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );
+//setter
+$( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    dayNames

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
    + +
    +
    +
    +

    The list of long day names, starting from Sunday, for use as requested via the dateFormat setting. They also appear as popup hints when hovering over the corresponding column headings. This attribute is one of the regionalisation attributes.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the dayNames option specified. +
    +
    +
    $( ".selector" ).datepicker({ dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] });
    +
    + + +
    + Get or set the dayNames option, after init. +
    +
    +
    //getter
+var dayNames = $( ".selector" ).datepicker( "option", "dayNames" );
+//setter
+$( ".selector" ).datepicker( "option", "dayNames", ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] );
    +
    + +
    +
    +
    • + + +
  • +
    +

    dayNamesMin

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
    + +
    +
    +
    +

    The list of minimised day names, starting from Sunday, for use as column headers within the datepicker. This attribute is one of the regionalisation attributes.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the dayNamesMin option specified. +
    +
    +
    $( ".selector" ).datepicker({ dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] });
    +
    + + +
    + Get or set the dayNamesMin option, after init. +
    +
    +
    //getter
+var dayNamesMin = $( ".selector" ).datepicker( "option", "dayNamesMin" );
+//setter
+$( ".selector" ).datepicker( "option", "dayNamesMin", ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] );
    +
    + +
    +
    +
    • + + +
  • +
    +

    dayNamesShort

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    + +
    +
    +
    +

    The list of abbreviated day names, starting from Sunday, for use as requested via the dateFormat setting. This attribute is one of the regionalisation attributes.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the dayNamesShort option specified. +
    +
    +
    $( ".selector" ).datepicker({ dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] });
    +
    + + +
    + Get or set the dayNamesShort option, after init. +
    +
    +
    //getter
+var dayNamesShort = $( ".selector" ).datepicker( "option", "dayNamesShort" );
+//setter
+$( ".selector" ).datepicker( "option", "dayNamesShort", ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] );
    +
    + +
    +
    +
    • + + +
  • +
    +

    defaultDate

    +
    +
    Type:
    +
    Date, Number, String
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    Set the date to highlight on first opening if the field is blank. Specify either an actual date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null for today.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the defaultDate option specified. +
    +
    +
    $( ".selector" ).datepicker({ defaultDate: +7 });
    +
    + + +
    + Get or set the defaultDate option, after init. +
    +
    +
    //getter
+var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" );
+//setter
+$( ".selector" ).datepicker( "option", "defaultDate", +7 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    duration

    +
    +
    Type:
    +
    String, Number
    + +
    Default:
    +
    'normal'
    + +
    +
    +
    +

    Control the speed at which the datepicker appears, it may be a time in milliseconds or a string representing one of the three predefined speeds ("slow", "normal", "fast").

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the duration option specified. +
    +
    +
    $( ".selector" ).datepicker({ duration: 'slow' });
    +
    + + +
    + Get or set the duration option, after init. +
    +
    +
    //getter
+var duration = $( ".selector" ).datepicker( "option", "duration" );
+//setter
+$( ".selector" ).datepicker( "option", "duration", 'slow' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    firstDay

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    Set the first day of the week: Sunday is 0, Monday is 1, ... This attribute is one of the regionalisation attributes.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the firstDay option specified. +
    +
    +
    $( ".selector" ).datepicker({ firstDay: 1 });
    +
    + + +
    + Get or set the firstDay option, after init. +
    +
    +
    //getter
+var firstDay = $( ".selector" ).datepicker( "option", "firstDay" );
+//setter
+$( ".selector" ).datepicker( "option", "firstDay", 1 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    gotoCurrent

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    When true the current day link moves to the currently selected date instead of today.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the gotoCurrent option specified. +
    +
    +
    $( ".selector" ).datepicker({ gotoCurrent: true });
    +
    + + +
    + Get or set the gotoCurrent option, after init. +
    +
    +
    //getter
+var gotoCurrent = $( ".selector" ).datepicker( "option", "gotoCurrent" );
+//setter
+$( ".selector" ).datepicker( "option", "gotoCurrent", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    hideIfNoPrevNext

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Normally the previous and next links are disabled when not applicable (see minDate/maxDate). You can hide them altogether by setting this attribute to true.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the hideIfNoPrevNext option specified. +
    +
    +
    $( ".selector" ).datepicker({ hideIfNoPrevNext: true });
    +
    + + +
    + Get or set the hideIfNoPrevNext option, after init. +
    +
    +
    //getter
+var hideIfNoPrevNext = $( ".selector" ).datepicker( "option", "hideIfNoPrevNext" );
+//setter
+$( ".selector" ).datepicker( "option", "hideIfNoPrevNext", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    isRTL

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    True if the current language is drawn from right to left. This attribute is one of the regionalisation attributes.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the isRTL option specified. +
    +
    +
    $( ".selector" ).datepicker({ isRTL: true });
    +
    + + +
    + Get or set the isRTL option, after init. +
    +
    +
    //getter
+var isRTL = $( ".selector" ).datepicker( "option", "isRTL" );
+//setter
+$( ".selector" ).datepicker( "option", "isRTL", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    maxDate

    +
    +
    Type:
    +
    Date, Number, String
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    Set a maximum selectable date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +1w'), or null for no limit.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the maxDate option specified. +
    +
    +
    $( ".selector" ).datepicker({ maxDate: '+1m +1w' });
    +
    + + +
    + Get or set the maxDate option, after init. +
    +
    +
    //getter
+var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
+//setter
+$( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    minDate

    +
    +
    Type:
    +
    Date, Number, String
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    Set a minimum selectable date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '-1y -1m'), or null for no limit.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the minDate option specified. +
    +
    +
    $( ".selector" ).datepicker({ minDate: new Date(2007, 1 - 1, 1) });
    +
    + + +
    + Get or set the minDate option, after init. +
    +
    +
    //getter
+var minDate = $( ".selector" ).datepicker( "option", "minDate" );
+//setter
+$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );
    +
    + +
    +
    +
    • + + +
  • +
    +

    monthNames

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
    + +
    +
    +
    +

    The list of full month names, for use as requested via the dateFormat setting. This attribute is one of the regionalisation attributes.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the monthNames option specified. +
    +
    +
    $( ".selector" ).datepicker({ monthNames: ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December'] });
    +
    + + +
    + Get or set the monthNames option, after init. +
    +
    +
    //getter
+var monthNames = $( ".selector" ).datepicker( "option", "monthNames" );
+//setter
+$( ".selector" ).datepicker( "option", "monthNames", ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December'] );
    +
    + +
    +
    +
    • + + +
  • +
    +

    monthNamesShort

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    + +
    +
    +
    +

    The list of abbreviated month names, as used in the month header on each datepicker and as requested via the dateFormat setting. This attribute is one of the regionalisation attributes.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the monthNamesShort option specified. +
    +
    +
    $( ".selector" ).datepicker({ monthNamesShort: ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec'] });
    +
    + + +
    + Get or set the monthNamesShort option, after init. +
    +
    +
    //getter
+var monthNamesShort = $( ".selector" ).datepicker( "option", "monthNamesShort" );
+//setter
+$( ".selector" ).datepicker( "option", "monthNamesShort", ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec'] );
    +
    + +
    +
    +
    • + + +
  • +
    +

    navigationAsDateFormat

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    When true the formatDate function is applied to the prevText, nextText, and currentText values before display, allowing them to display the target month names for example.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the navigationAsDateFormat option specified. +
    +
    +
    $( ".selector" ).datepicker({ navigationAsDateFormat: true });
    +
    + + +
    + Get or set the navigationAsDateFormat option, after init. +
    +
    +
    //getter
+var navigationAsDateFormat = $( ".selector" ).datepicker( "option", "navigationAsDateFormat" );
+//setter
+$( ".selector" ).datepicker( "option", "navigationAsDateFormat", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    nextText

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'Next'
    + +
    +
    +
    +

    The text to display for the next month link. This attribute is one of the regionalisation attributes. With the standard ThemeRoller styling, this value is replaced by an icon.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the nextText option specified. +
    +
    +
    $( ".selector" ).datepicker({ nextText: 'Later' });
    +
    + + +
    + Get or set the nextText option, after init. +
    +
    +
    //getter
+var nextText = $( ".selector" ).datepicker( "option", "nextText" );
+//setter
+$( ".selector" ).datepicker( "option", "nextText", 'Later' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    numberOfMonths

    +
    +
    Type:
    +
    Number, Array
    + +
    Default:
    +
    1
    + +
    +
    +
    +

    Set how many months to show at once. The value can be a straight integer, or can be a two-element array to define the number of rows and columns to display.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the numberOfMonths option specified. +
    +
    +
    $( ".selector" ).datepicker({ numberOfMonths: [2, 3] });
    +
    + + +
    + Get or set the numberOfMonths option, after init. +
    +
    +
    //getter
+var numberOfMonths = $( ".selector" ).datepicker( "option", "numberOfMonths" );
+//setter
+$( ".selector" ).datepicker( "option", "numberOfMonths", [2, 3] );
    +
    + +
    +
    +
    • + + +
  • +
    +

    prevText

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'Prev'
    + +
    +
    +
    +

    The text to display for the previous month link. This attribute is one of the regionalisation attributes. With the standard ThemeRoller styling, this value is replaced by an icon.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the prevText option specified. +
    +
    +
    $( ".selector" ).datepicker({ prevText: 'Earlier' });
    +
    + + +
    + Get or set the prevText option, after init. +
    +
    +
    //getter
+var prevText = $( ".selector" ).datepicker( "option", "prevText" );
+//setter
+$( ".selector" ).datepicker( "option", "prevText", 'Earlier' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    selectOtherMonths

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    When true days in other months shown before or after the current month are selectable. This only applies if showOtherMonths is also true.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the selectOtherMonths option specified. +
    +
    +
    $( ".selector" ).datepicker({ selectOtherMonths: true });
    +
    + + +
    + Get or set the selectOtherMonths option, after init. +
    +
    +
    //getter
+var selectOtherMonths = $( ".selector" ).datepicker( "option", "selectOtherMonths" );
+//setter
+$( ".selector" ).datepicker( "option", "selectOtherMonths", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    shortYearCutoff

    +
    +
    Type:
    +
    String, Number
    + +
    Default:
    +
    '+10'
    + +
    +
    +
    +

    Set the cutoff year for determining the century for a date (used in conjunction with dateFormat 'y'). If a numeric value (0-99) is provided then this value is used directly. If a string value is provided then it is converted to a number and added to the current year. Once the cutoff year is calculated, any dates entered with a year value less than or equal to it are considered to be in the current century, while those greater than it are deemed to be in the previous century.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the shortYearCutoff option specified. +
    +
    +
    $( ".selector" ).datepicker({ shortYearCutoff: 50 });
    +
    + + +
    + Get or set the shortYearCutoff option, after init. +
    +
    +
    //getter
+var shortYearCutoff = $( ".selector" ).datepicker( "option", "shortYearCutoff" );
+//setter
+$( ".selector" ).datepicker( "option", "shortYearCutoff", 50 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    showAnim

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'show'
    + +
    +
    +
    +

    Set the name of the animation used to show/hide the datepicker. Use 'show' (the default), 'slideDown', 'fadeIn', any of the show/hide jQuery UI effects, or '' for no animation.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the showAnim option specified. +
    +
    +
    $( ".selector" ).datepicker({ showAnim: 'fold' });
    +
    + + +
    + Get or set the showAnim option, after init. +
    +
    +
    //getter
+var showAnim = $( ".selector" ).datepicker( "option", "showAnim" );
+//setter
+$( ".selector" ).datepicker( "option", "showAnim", 'fold' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    showButtonPanel

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Whether to show the button panel.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the showButtonPanel option specified. +
    +
    +
    $( ".selector" ).datepicker({ showButtonPanel: true });
    +
    + + +
    + Get or set the showButtonPanel option, after init. +
    +
    +
    //getter
+var showButtonPanel = $( ".selector" ).datepicker( "option", "showButtonPanel" );
+//setter
+$( ".selector" ).datepicker( "option", "showButtonPanel", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    showCurrentAtPos

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    Specify where in a multi-month display the current month shows, starting from 0 at the top/left.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the showCurrentAtPos option specified. +
    +
    +
    $( ".selector" ).datepicker({ showCurrentAtPos: 3 });
    +
    + + +
    + Get or set the showCurrentAtPos option, after init. +
    +
    +
    //getter
+var showCurrentAtPos = $( ".selector" ).datepicker( "option", "showCurrentAtPos" );
+//setter
+$( ".selector" ).datepicker( "option", "showCurrentAtPos", 3 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    showMonthAfterYear

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Whether to show the month after the year in the header. This attribute is one of the regionalisation attributes.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the showMonthAfterYear option specified. +
    +
    +
    $( ".selector" ).datepicker({ showMonthAfterYear: true });
    +
    + + +
    + Get or set the showMonthAfterYear option, after init. +
    +
    +
    //getter
+var showMonthAfterYear = $( ".selector" ).datepicker( "option", "showMonthAfterYear" );
+//setter
+$( ".selector" ).datepicker( "option", "showMonthAfterYear", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    showOn

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'focus'
    + +
    +
    +
    +

    Have the datepicker appear automatically when the field receives focus ('focus'), appear only when a button is clicked ('button'), or appear when either event takes place ('both').

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the showOn option specified. +
    +
    +
    $( ".selector" ).datepicker({ showOn: 'both' });
    +
    + + +
    + Get or set the showOn option, after init. +
    +
    +
    //getter
+var showOn = $( ".selector" ).datepicker( "option", "showOn" );
+//setter
+$( ".selector" ).datepicker( "option", "showOn", 'both' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    showOptions

    +
    +
    Type:
    +
    Options
    + +
    Default:
    +
    {}
    + +
    +
    +
    +

    If using one of the jQuery UI effects for showAnim, you can provide additional settings for that animation via this option.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the showOptions option specified. +
    +
    +
    $( ".selector" ).datepicker({ showOptions: {direction: 'up' });
    +
    + + +
    + Get or set the showOptions option, after init. +
    +
    +
    //getter
+var showOptions = $( ".selector" ).datepicker( "option", "showOptions" );
+//setter
+$( ".selector" ).datepicker( "option", "showOptions", {direction: 'up' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    showOtherMonths

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use selectOtherMonths.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the showOtherMonths option specified. +
    +
    +
    $( ".selector" ).datepicker({ showOtherMonths: true });
    +
    + + +
    + Get or set the showOtherMonths option, after init. +
    +
    +
    //getter
+var showOtherMonths = $( ".selector" ).datepicker( "option", "showOtherMonths" );
+//setter
+$( ".selector" ).datepicker( "option", "showOtherMonths", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    showWeek

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    When true a column is added to show the week of the year. The calculateWeek option determines how the week of the year is calculated. You may also want to change the firstDay option.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the showWeek option specified. +
    +
    +
    $( ".selector" ).datepicker({ showWeek: true });
    +
    + + +
    + Get or set the showWeek option, after init. +
    +
    +
    //getter
+var showWeek = $( ".selector" ).datepicker( "option", "showWeek" );
+//setter
+$( ".selector" ).datepicker( "option", "showWeek", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    stepMonths

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    1
    + +
    +
    +
    +

    Set how many months to move when clicking the Previous/Next links.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the stepMonths option specified. +
    +
    +
    $( ".selector" ).datepicker({ stepMonths: 3 });
    +
    + + +
    + Get or set the stepMonths option, after init. +
    +
    +
    //getter
+var stepMonths = $( ".selector" ).datepicker( "option", "stepMonths" );
+//setter
+$( ".selector" ).datepicker( "option", "stepMonths", 3 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    weekHeader

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'Wk'
    + +
    +
    +
    +

    The text to display for the week of the year column heading. This attribute is one of the regionalisation attributes. Use showWeek to display this column.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the weekHeader option specified. +
    +
    +
    $( ".selector" ).datepicker({ weekHeader: 'W' });
    +
    + + +
    + Get or set the weekHeader option, after init. +
    +
    +
    //getter
+var weekHeader = $( ".selector" ).datepicker( "option", "weekHeader" );
+//setter
+$( ".selector" ).datepicker( "option", "weekHeader", 'W' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    yearRange

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'c-10:c+10'
    + +
    +
    +
    +

    Control the range of years displayed in the year drop-down: either relative to today's year (-nn:+nn), relative to the currently selected year (c-nn:c+nn), absolute (nnnn:nnnn), or combinations of these formats (nnnn:-nn). Note that this option only affects what appears in the drop-down, to restrict which dates may be selected use the minDate and/or maxDate options.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the yearRange option specified. +
    +
    +
    $( ".selector" ).datepicker({ yearRange: '2000:2010' });
    +
    + + +
    + Get or set the yearRange option, after init. +
    +
    +
    //getter
+var yearRange = $( ".selector" ).datepicker( "option", "yearRange" );
+//setter
+$( ".selector" ).datepicker( "option", "yearRange", '2000:2010' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    yearSuffix

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    ''
    + +
    +
    +
    +

    Additional text to display after the year in the month headers. This attribute is one of the regionalisation attributes.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a datepicker with the yearSuffix option specified. +
    +
    +
    $( ".selector" ).datepicker({ yearSuffix: 'CE' });
    +
    + + +
    + Get or set the yearSuffix option, after init. +
    +
    +
    //getter
+var yearSuffix = $( ".selector" ).datepicker( "option", "yearSuffix" );
+//setter
+$( ".selector" ).datepicker( "option", "yearSuffix", 'CE' );
    +
    + +
    +
    +
    • + +
+
+
+

Events

+
    + +
  • +
    +

    beforeShow

    +
    +
    +
    function(input, inst)
    +
    +
    +
    +

    Can be a function that takes an input field and current datepicker instance and returns an options object to update the datepicker with. It is called just before the datepicker is displayed.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the beforeShow event as an init option. +
    +
    +
    $('.selector').datepicker({
+   beforeShow: function(input, inst) { ... }
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    beforeShowDay

    +
    +
    +
    function(date)
    +
    +
    +
    +

    The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or '' for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the beforeShowDay event as an init option. +
    +
    +
    $('.selector').datepicker({
+   beforeShowDay: function(date) { ... }
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    onChangeMonthYear

    +
    +
    +
    function(year, month, inst)
    +
    +
    +
    +

    Allows you to define your own event when the datepicker moves to a new month and/or year. The function receives the selected year, month (1-12), and the datepicker instance as parameters. this refers to the associated input field.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the onChangeMonthYear event as an init option. +
    +
    +
    $('.selector').datepicker({
+   onChangeMonthYear: function(year, month, inst) { ... }
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    onClose

    +
    +
    +
    function(dateText, inst)
    +
    +
    +
    +

    Allows you to define your own event when the datepicker is closed, whether or not a date is selected. The function receives the selected date as text ('' if none) and the datepicker instance as parameters. this refers to the associated input field.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the onClose event as an init option. +
    +
    +
    $('.selector').datepicker({
+   onClose: function(dateText, inst) { ... }
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    onSelect

    +
    +
    +
    function(dateText, inst)
    +
    +
    +
    +

    Allows you to define your own event when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the onSelect event as an init option. +
    +
    +
    $('.selector').datepicker({
+   onSelect: function(dateText, inst) { ... }
+});
    +
    + +
    +
    +
    • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .datepicker( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the datepicker functionality completely. This will return the element back to its pre-init state.

    +
    +
    • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .datepicker( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the datepicker.

    +
    +
    • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .datepicker( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the datepicker.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .datepicker( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any datepicker option. If no value is specified, will act as a getter.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .datepicker( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple datepicker options at once by providing an options object.

    +
    +
    • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .datepicker( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-datepicker element.

    +
    +
    • + + +
  • +
    +

    dialog

    +
    +
    Signature:
    +
    .datepicker( "dialog" + +, date + +, [onSelect] + +, [settings] + +, [pos] )
    +
    +
    +
    +

    Open a datepicker in a "dialog" box. +

    dateText: the initial date for the date picker as either a Date or a string in the current date format. +

    onSelect: A callback function when a date is selected. The function receives the date text and date picker instance as parameters. +

    settings: The new settings for the date picker. +

    pos: The position of the top/left of the dialog as [x, y] or a MouseEvent that contains the coordinates. If not specified the dialog is centered on the screen.

    +
    +
    • + + +
  • +
    +

    isDisabled

    +
    +
    Signature:
    +
    .datepicker( "isDisabled" + + + + + + + +)
    +
    +
    +
    +

    Determine whether a date picker has been disabled.

    +
    +
    • + + +
  • +
    +

    hide

    +
    +
    Signature:
    +
    .datepicker( "hide" + + + + + + + +)
    +
    +
    +
    +

    Close a previously opened date picker.

    +
    +
    • + + +
  • +
    +

    show

    +
    +
    Signature:
    +
    .datepicker( "show" + + + + + + + +)
    +
    +
    +
    +

    Call up a previously attached date picker.

    +
    +
    • + + +
  • +
    +

    refresh

    +
    +
    Signature:
    +
    .datepicker( "refresh" + + + + + + + +)
    +
    +
    +
    +

    Redraw a date picker, after having made some external modifications.

    +
    +
    • + + +
  • +
    +

    getDate

    +
    +
    Signature:
    +
    .datepicker( "getDate" + + + + + + + +)
    +
    +
    +
    +

    Returns the current date for the datepicker or null if no date has been selected.

    +
    +
    • + + +
  • +
    +

    setDate

    +
    +
    Signature:
    +
    .datepicker( "setDate" + +, date + + + + + +)
    +
    +
    +
    +

    Sets the current date for the datepicker. The new date may be a Date object or a string in the current date format (e.g. '01/26/2009'), a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null to clear the selected date.

    +
    +
    • + +
+
+
+

Theming

+

The jQuery UI Datepicker plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.datepicker.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible">
+   <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
+      <a class="ui-datepicker-prev ui-corner-all">title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
+      <a class="ui-datepicker-next ui-corner-all" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
+      <div class="ui-datepicker-title">
+         <span class="ui-datepicker-month">January</span><span class="ui-datepicker-year">2009</span>
+      </div>
+   </div>
+   <table class="ui-datepicker-calendar">
+      <thead>
+      <tr>
+         <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
+         ...
+      </tr>
+      </thead>
+      <tbody><tr>
+         <td class="ui-datepicker-week-end ui-datepicker-other-month "> 1 </td>
+         ...
+      </tr>
+      </tbody>
+   </table>
+   <div class="ui-datepicker-buttonpane ui-widget-content">
+      <button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Today</button>
+      <button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all">Done</button>
+   </div>
+</div>
+

+ + Note: This is a sample of markup generated by the datepicker plugin, not markup you should use to create a datepicker. The only markup needed for that is <input type="text" /> or <div></div>. + +

+ +
+
+ +

+ + -- cgit v1.2.1