jQuery UI API - the date picker member (Datepicker Widget)

category

Widgets (Widgets)

usage

Description: From the pop-up box or inline calendar to select a date.

New Version: 1.0

jQuery UI date picker (Datepicker) Select the date to add height to the page to configure the plug-in. You can customize the date format and language, restrict the selectable date range, add buttons and other navigation options.

By default, when the associated text field focus, in a small overlay open date picker. For an inline calendar, simply select the date is attached to the div or span.

Keyboard interaction

When the date chooser is open, the following keyboard commands are available:

• PAGE UP: move to the previous month.
• PAGE DOWN: Move to next month.
• CTRL + PAGE UP: Move the previous year.
• CTRL + PAGE DOWN: Move to next year.
• CTRL + HOME: Move the current month. If the date picker is closed is opened.
• CTRL + LEFT: move to the day.
• CTRL + RIGHT: move to the next day.
• CTRL + UP: move to the previous week.
• CTRL + DOWN: Move to next week.
• ENTER: Select the focus date.
• CTRL + END: Close date picker, and clear the date.
• ESCAPE: Close date picker, without any choice.

Useful Features

$ .datepicker.setDefaults (Settings)

Change the default settings for all date picker.

Use option() method to change the settings for individual instances.

Set all the date picker or click on the icon opens when the focus.

$ .datepicker.setDefaults ({
  showOn: "both",
  buttonImageOnly: true,
  buttonImage: "calendar.gif",
  buttonText: "Calendar"
});

Set all date picker has French text.

$ .datepicker.setDefaults ($ .datepicker.regional [ "Fr"]);

$ .datepicker.formatDate (Format, date, settings)

Formatting a date to a string value with the specified format.

Format may be the following combinations:

• d - day of the month (no leading zeros)
• dd - day of the month (two digits)
• o - the day of the year (without leading zeros)
• oo - the day of the year (three digits)
• Short name day - D
• Long name day - DD
• m - the first few months of the year (without leading zeros)
• mm - the first few months of the year (two digits)
• Short name of the month - M
• Month long name - MM
• y - Year (two digits)
• yy - Year (four digits)
• @ - Unix timestamp (ms since 01/01/1970)
• ! - Windows Watch (100ns since 01/01/0001)
• '...' - Text
• '' - apostrophe
• Other - text

There are also some $.datepicker predefined standard date format:

• ATOM - 'yy-mm-dd' (and RFC 3339 / ISO 8601 same)
• COOKIE - 'D, dd M yy'
• ISO_8601 - 'yy-mm-dd'
• RFC_822 - 'D, d M y' (refer RFC 822)
• RFC_850 - 'DD, dd-My' (refer RFC 850)
• RFC_1036 - 'D, d M y' (refer to RFC 1036)
• RFC_1123 - 'D, d M yy' (refer RFC 1123)
• RFC_2822 - 'D, d M yy' (refer RFC 2822)
• RSS - 'D, d M y' (same as the RFC 822)
• TICKS - '!'
• TIMESTAMP - '@'
• W3C - 'yy-mm-dd' (the same as ISO 8601)

ISO format to display the date. Produce "2007-01-26."

$ .datepicker.formatDate ( "Yy-mm-dd", new Date (2007, 1 - 1, 26));

French to extend the format to display the date. Produce "Samedi, Juillet 14, 2007".

$ .datepicker.formatDate ( "DD, MM d, yy", new Date (2007, 7 - 1, 14), {
  dayNamesShort: $ .datepicker.regional [ "fr"] .dayNamesShort,
  dayNames: $ .datepicker.regional [ "fr"] .dayNames,
  monthNamesShort: $ .datepicker.regional [ "fr"] .monthNamesShort,
  monthNames: $ .datepicker.regional [ "fr"] .monthNames
});

$ .datepicker.parseDate (Format, value, settings)

Extract a string value from a specified date format.

Format may be the following combinations:

• d - day of the month (no leading zeros)
• dd - day of the month (two digits)
• o - the day of the year (without leading zeros)
• oo - the day of the year (three digits)
• D - short name of the week
• DD - week long name a few
• m - the first few months of the year (without leading zeros)
• mm - the first few months of the year (two digits)
• Short name of the month - M
• Month long name - MM
• y - Year (two digits)
• yy - Year (four digits)
• @ - Unix timestamp (ms since 01/01/1970)
• ! - Windows Watch (100ns since 01/01/0001)
• '...' - Text
• '' - apostrophe
• Other - text

Some exceptions may be thrown:

• 'Invalid arguments' - or if the format is null This exception is thrown.
• 'Missing number at position nn' - if the format to display a value not found This exception is thrown.
• 'Unknown name at position nn' - if the format is not found a few weeks or month names names This exception is thrown.
• 'Unexpected literal at position nn' - if the value of a text format not found This exception is thrown.
• 'Invalid date' - the date is not valid if this exception is thrown, such as '31 / 02/2007 '.

Extract a date in ISO format.

$ .datepicker.parseDate ( "Yy-mm-dd", "2007-01-26");

Extracting a date format that the extended French.

$ .datepicker.parseDate ( "DD, MM d, yy", "Samedi, Juillet 14, 2007", {
  shortYearCuroff: 20,
  dayNamesShort: $ .datepicker.regional [ "fr"] .dayNamesShort,
  dayNames: $ .datepicker.regional [ "fr"] .dayNames,
  monthNamesShort: $ .datepicker.regional [ "fr"] .monthNamesShort,
  monthNames: $ .datepicker.regional [ "fr"] .monthNames
});

$ .datepicker.iso8601Week (Date)

Determining a given date of the first few weeks of the year: 1-53.

This function uses the ISO 8601 definition of one week: one week starting on Monday, the first week of each year contains January 4th. This means that the previous year may include up to three days in the first week of the year, the year may contain up to three days in the last week of the previous year.

This function is calculateWeek default implementation.

Find the date of the first few weeks of the year.

$ .datepicker.iso8601Week (New Date (2007, 1 - 1, 26));

$ .datepicker.noWeekends

Setting such beforeShowDay function, preventing the selection of the weekend.

We can beforeShowDay provide options noWeekends() function is used to calculate all working to provide a true / false array of values used to indicate the date is selectable.

Set DatePicker, let weekends optional.

$ ( "#datepicker") .datepicker ({
  beforeShowDay: $ .datepicker.noWeekends
});

Limit

Date picker provided to cater to different languages ​​and date formats supported by localized content. Each localized language code contained in the appended after the name of the file, for example, French is jquery.ui.datepicker-fr.js . Required localization files need to be included in the back of the main date selector code. Each localized files to add to its own set of available localization set, all instances automatically apply these settings to the default settings.

$.datepicker.regional property holds an array of localized to the language code as a pre, pre-default is "" , expressed in English. Each entry is an object with the following properties: closeText , prevText , nextText , currentText , monthNames , monthNamesShort , dayNames , dayNamesShort , dayNamesMin , weekHeader , dateFormat , firstDay , isRTL , showMonthAfterYear and yearSuffix .

You can restore the default localization code below:

You can override the date picker to a specific location by following codes:

Theming

Date picker member (Datepicker Widget) using jQuery UI CSS framework to define the look and feel of its style. If you need to use the specified style date picker, you can use the following CSS class name:

• ui-datepicker : date picker outer container. If the date picker is inline, the elements are additionally provided with a ui-datepicker-inline , class. If the isRTL options, this element will additionally with a ui-datepicker-rtl , class.
  • ui-datepicker-header : date picker head container.
    • ui-datepicker-prev : control is used to select the previous month.
    • ui-datepicker-next : control is used to select the next month.
    • ui-datepicker-title : date picker title contains the month and year of container.
      • ui-datepicker-month : text display month, if you set changeMonth option the <select> element.
      • ui-datepicker-year : Text in the display, if you set changeYear option the <select> element.
  • ui-datepicker-calendar : contain the calendar form.
    • ui-datepicker-week-end : weekend cells. : Cells containing weekend days.
    • ui-datepicker-other-month : place in a month, but not the current month the number of days the cells.
    • ui-datepicker-unselectable : the user can not select the cell.
    • ui-datepicker-current-day : selected date cell.
    • ui-datepicker-today : today's date cell.
  • ui-datepicker-buttonpane : When setting showButtonPanel use the button panel (buttonpane) when the option.
    • ui-datepicker-current : select the button for today's date.

If numberOfMonths option to display multiple months, use some extra class:

• ui-datepicker-multi : month date picker parts of the outermost layer of the container. This element will be displayed according to the number of the month with additional ui-datepicker-multi-2 , ui-datepicker-multi-3 or ui-datepicker-multi-4 , class name.
  • ui-datepicker-group : grouping within a single selector. This element based on its position in the packet with additional ui-datepicker-group-first , ui-datepicker-group-middle or ui-datepicker-group-last , class name.

rely

• UI core (UI Core)
• Effects Core (Core Effects) (optional; when and showAnim when used with options)

Additional information

• The part requires some functional CSS, otherwise it will not work. If you create a custom theme, use the widget specified CSS file as a starting point.
• The components to programmatically manipulate the value of the element, so that when the value of the element changes do not trigger the native change events.
• It does not support <input type="date"> Create a date picker on, because it will cause a conflict with the local UI picker.

Examples

A simple jQuery UI date picker (Datepicker).

<! Doctype html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> date picker member (Datepicker Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<Div id = "datepicker"> </ div>
 
<Script>
$ ( "#datepicker") .datepicker ();
</ Script>
 
</ Body>
</ Html>

View demo