最新jquery UI Datepicker api文档使用说明
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
Utility functions
- $.datepicker.setDefaults( settings ) - Set settings for all datepicker instances.
- $.datepicker.formatDate( format, date, settings ) - Format a date into a string value with a specified format.
- $.datepicker.parseDate( format, value, settings ) - Extract a date from a string value with a specified format.
- $.datepicker.iso8601Week( date ) - Determine the week of the year for a given date: 1 to 53.
- $.datepicker.noWeekends - Set as beforeShowDay function to prevent selection of weekends.
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 included 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']);
Dependencies
- UI Core
Example
$("#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.5/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 id="datepicker"></div>
</body>
</html>
Options
Events
-
create
- Type:
- datepickercreate
This event is triggered when datepicker is created.
Code examples
-
Supply a callback function to handle the
create
event as an init option. -
$( ".selector" ).datepicker({
create: function(event, ui) { ... }
}); -
Bind to the
create
event by type:datepickercreate
. -
$( ".selector" ).bind( "datepickercreate", function(event, ui) {
...
});
-
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>.
来源:http://docs.jquery.com/UI/Datepicker
加支付宝好友偷能量挖...