JQuery datepicker 用法詳解_jquery
- WBOY原創
- 2016-05-16 15:23:271787瀏覽
jQuery UI很強大，其中的日期選擇插件Datepicker是一個配置靈活的插件，我們可以自訂其展示方式，包括日期格式、語言、限制選擇日期範圍、添加相關按鈕以及其它導航等。
官方地址：http://docs.jquery.com/UI/Datepicker，官方範例： http://jqueryui.com/demos/datepicker/。
一個不錯的位址，用來DIY jQuery UI介面效果的網站http://jqueryui.com/themeroller/
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>
page up/down - 上一月、下一月
ctrl+page up/down - 上一年、下一年
ctrl+home - 当前月或最后一次打开的日期
ctrl+left/right - 上一天、下一天
ctrl+up/down - 上一周、下一周
enter - 确定选择日期
ctrl+end - 关闭并清除已选择的日期
escape - 关闭并取消选择
$.datepicker.setDefaults( settings ) - 全局设置日期选择插件的参数.
$.datepicker.formatDate( format, date, settings ) - 格式化显示的日期字符串
$.datepicker.iso8601Week( date ) - 给出一个日期，确实他是一年中的第几周
$.datepicker.parseDate( format, value, settings ) - 按照指定格式获取日期字符串
d - 每月的第几天 (没有前导零)
dd - 每月的第几天 (两位数字)
o - 一年中的第几天 (没有前导零)
oo - 一年中的第几天 (三位数字)
D - day name short
DD - day name long
m - 月份 (没有前导零)
mm - 月份 (两位数字)
M - month name short
MM - month name long
y - 年份 (两位数字)
yy - 年份 (四位数字)
@ - Unix 时间戳 (从 01/01/1970 开始)
'...' - 文本
'' - 单引号
（其它） - 文本
ATOM - 'yy-mm-dd' (Same as RFC 3339/ISO 8601)
COOKIE - 'D, dd M yy'
ISO_8601 - 'yy-mm-dd'
RFC_822 - 'D, d M y'
RFC_850 - 'DD, dd-M-y'
RFC_1036 - 'D, d M y
RFC_1123 - 'D, d M yy'
RFC_2822 - 'D, d M yy'
RSS - 'D, d M y'
TIMESTAMP - '@'
W3C - 'yy-mm-dd'
altField : String : ''
Synchronize the selected date to another domain, and use altFormat to display date strings in different formats.
Initial: $('.selector').datepicker({ altField: '#actualDate' });
Get: var altField = $('.selector').datepicker('option', 'altField');
Settings: $('.selector').datepicker('option', 'altField', '#actualDate');
altFormat : String : ''
When altField is set, the date format displayed in another field.
Initial: $('.selector').datepicker({ altFormat: 'yy-mm-dd' });
Get: var altFormat = $('.selector').datepicker('option', 'altFormat');
Settings: $('.selector').datepicker('option', 'altFormat', 'yy-mm-dd');
appendText : String : ''
Add the specified string after the domain of the date plug-in.
Initial: $('.selector').datepicker({ appendText: '(yyyy-mm-dd)' });
Get: var appendText = $('.selector').datepicker('option', 'appendText');
Settings: $('.selector').datepicker('option', 'appendText', '(yyyy-mm-dd)');
buttonImage : String : ''
Set the picture of the pop-up button. If it is not empty, the text of the button will become the alt attribute and will not be displayed directly.
Initial: $('.selector').datepicker({ buttonImage: '/images/datepicker.gif' });
Get: var buttonImage = $('.selector').datepicker('option', 'buttonImage');
Settings: $('.selector').datepicker('option', 'buttonImage', '/images/datepicker.gif');
buttonImageOnly : Boolean : false
Set to true to place an image after the field to use as the trigger without it appearing on a button.
Initial: $('.selector').datepicker({ buttonImageOnly: true });
Get: var buttonImageOnly = $('.selector').datepicker('option', 'buttonImageOnly');
Settings: $('.selector').datepicker('option', 'buttonImageOnly', true);
buttonText : String : '...'
Set the text content of the trigger button.
Initial: $('.selector').datepicker({ buttonText: 'Choose' });
Get: var buttonText = $('.selector').datepicker('option', 'buttonText');
Settings: $('.selector').datepicker('option', 'buttonText', 'Choose');
changeMonth : Boolean : false
Settings allow month selection via drop-down list.
Initial: $('.selector').datepicker({ changeMonth: true });
Get: var changeMonth = $('.selector').datepicker('option', 'changeMonth');
Setting: $('.selector').datepicker('option', 'changeMonth', true);
changeYear : Boolean : false
The setting allows selecting the year through the drop-down list.
Initial: $('.selector').datepicker({ changeYear: true });
Get: var changeYear = $('.selector').datepicker('option', 'changeYear');
Setting: $('.selector').datepicker('option', 'changeYear', true);
closeTextType: StringDefault: 'Done'
Set the text content of the close button. This button needs to be displayed by setting the showButtonPanel parameter.
Initial: $('.selector').datepicker({ closeText: 'X' });
Get: var closeText = $('.selector').datepicker('option', 'closeText');
Settings: $('.selector').datepicker('option', 'closeText', 'X');
constrainInput : Boolean : true
If set to true, constrains the current input date format.
Initial: $('.selector').datepicker({ constrainInput: false });
Get: var constrainInput = $('.selector').datepicker('option', 'constrainInput');
Settings: $('.selector').datepicker('option', 'constrainInput', false);
currentText : String : 'Today'
Set the text content of the button for the day. This button needs to be displayed through the setting of the showButtonPanel parameter.
Initial: $('.selector').datepicker({ currentText: 'Now' });
Get: var currentText = $('.selector').datepicker('option', 'currentText');
Settings: $('.selector').datepicker('option', 'currentText', 'Now');
dateFormat : String : 'mm/dd/yy'
Set the display format of date string.
Initial: $('.selector').datepicker({ dateFormat: 'yy-mm-dd' });
Get: var dateFormat = $('.selector').datepicker('option', 'dateFormat');
Settings: $('.selector').datepicker('option', 'dateFormat', 'yy-mm-dd');
dayNames : Array : ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
Set the name of each day of the week, starting from Sunday. This content is displayed when the dateFormat is used, and when the mouse moves to the head of the row in the calendar.
Initial: $('.selector').datepicker({ dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] });
Get: var dayNames = $('.selector').datepicker('option', 'dayNames');
Settings: $('.selector').datepicker('option', 'dayNames', ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']) ;
dayNamesMin : Array : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
Set the abbreviation for each day of the week, starting from Sunday, this content is displayed when used in dateFormat, and displayed in the row header in the previous calendar.
Initial: $('.selector').datepicker({ dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] });
Get: var dayNamesMin = $('.selector').datepicker('option', 'dayNamesMin');
Settings: $('.selector').datepicker('option', 'dayNamesMin', ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa']) ;
dayNamesShort : Array : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
Set the abbreviation for each day of the week, starting from Sunday, this content is displayed when used in dateFormat, and displayed in the row header in the previous calendar.
Initial: $('.selector').datepicker({ dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] });
Get: var dayNamesShort = $('.selector').datepicker('option', 'dayNamesShort');
Settings: $('.selector').datepicker('option', 'dayNamesShort', ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam']) ;
defaultDate : Date, Number, String : null
Set the default date selected when it is displayed for the first time after loading. It can be a Date object, a number (counting from today, for example +7), or a valid string ('y' represents year, 'm' represents month, 'w' represents week, 'd' represents day, for example :'+1m +7d').
Initial: $('.selector').datepicker({ defaultDate: +7 });
Get: var defaultDate = $('.selector').datepicker('option', 'defaultDate');
Settings: $('.selector').datepicker('option', 'defaultDate', +7);
duration : String, Number : 'normal'
Set the display time of the date control expansion animation, the options are "slow", "normal", "fast", '' represents immediately, and the number represents milliseconds.
Initial: $('.selector').datepicker({ duration: 'slow' });
Get: var duration = $('.selector').datepicker('option', 'duration');
Settings: $('.selector').datepicker('option', 'duration', 'slow');
firstDay : Number : 0
Set the first day of the week. Sunday is 0, Monday is 1, and so on.
Initial: $('.selector').datepicker({ firstDay: 1 });
Get: var firstDay = $('.selector').datepicker('option', 'firstDay');
Setting: $('.selector').datepicker('option', 'firstDay', 1);
gotoCurrent : Boolean : false
If set to true, when clicking the today button, it will move to the currently selected date instead of today.
Initial: $('.selector').datepicker({ gotoCurrent: true });
Get: var gotoCurrent = $('.selector').datepicker('option', 'gotoCurrent');
Setting: $('.selector').datepicker('option', 'gotoCurrent', true);
hideIfNoPrevNext : Boolean : false
Set the corresponding button to be hidden when there is no previous/next option. (Default is not available)
Initial: $('.selector').datepicker({ hideIfNoPrevNext: true });
Get: var hideIfNoPrevNext = $('.selector').datepicker('option', 'hideIfNoPrevNext');
Settings: $('.selector').datepicker('option', 'hideIfNoPrevNext', true);
isRTL : Boolean : false
If set to true, all text will be from right to left.
Initial: $('.selector').datepicker({ isRTL: true });
Get: var isRTL = $('.selector').datepicker('option', 'isRTL');
Setting: $('.selector').datepicker('option', 'isRTL', true);
maxDate : Date, Number, String : null
Set a maximum selectable date. It can be a Date object, a number (counting from today, for example +7), or a valid string ('y' represents year, 'm' represents month, 'w' represents week, 'd' represents day, for example :'+1m +7d').
Initial: $('.selector').datepicker({ maxDate: '+1m +1w' });
Get: var maxDate = $('.selector').datepicker('option', 'maxDate');
Setting: $('.selector').datepicker('option', 'maxDate', '+1m +1w');
$('.selector').datepicker('option', 'maxDate', '12/25/2012');
minDate : Date, Number, String : null
Set a minimum selectable date. It can be a Date object, a number (counting from today, for example +7), or a valid string ('y' represents year, 'm' represents month, 'w' represents week, 'd' represents day, for example :'+1m +7d').
Initial: $('.selector').datepicker({ minDate: new Date(2007, 1 - 1, 1) });
Get: var minDate = $('.selector').datepicker('option', 'minDate');
Setting: $('.selector').datepicker('option', 'minDate', new Date(2007, 1 - 1, 1));
$('.selector').datepicker('option', 'minDate', '12/25/2012');
monthNames : Array : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', ' December']
Set the names of all months.
Initial: $('.selector').datepicker({monthNames:['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September ','Oktober','November','December']});
Get: var monthNames = $('.selector').datepicker('option', 'monthNames');
Settings: $('.selector').datepicker('option', 'monthNames', ['Januar','Februar','Marts','April','Maj','Juni','Juli',' August','September','Oktober','November','December']);
monthNamesShort : Array : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', ' Dec']
Set abbreviations for all months.
Initial: $('.selector').datepicker({monthNamesShort:['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug' ,'Sep','Okt','Nov','Dec']});
Get: var monthNamesShort = $('.selector').datepicker('option', 'monthNamesShort');
Settings: $('.selector').datepicker('option', 'monthNamesShort', ['Jan','Feb','Mar','Apr','Maj','Jun','Jul',' Aug','Sep','Okt','Nov','Dec']);
navigationAsDateFormat : Boolean : false
If set to true, the formatDate function will be applied to the values of prevText, nextText and currentText to display, for example, as the month name.
Initial: $('.selector').datepicker({ navigationAsDateFormat: true });
Get: var navigationAsDateFormat = $('.selector').datepicker('option', 'navigationAsDateFormat');
Settings: $('.selector').datepicker('option', 'navigationAsDateFormat', true);
nextText : String : 'Next'
Set the display text of the "next month" link.
Initial: $('.selector').datepicker({ nextText: 'Later' });
Get: var nextText = $('.selector').datepicker('option', 'nextText');
Settings: $('.selector').datepicker('option', 'nextText', 'Later');
numberOfMonths : Number, Array : 1
Set how many months to display at a time. If it is an integer, it is the number of months displayed. If it is an array, it is the number of rows and columns displayed.
Initial: $('.selector').datepicker({ numberOfMonths: [2, 3] });
Get: var numberOfMonths = $('.selector').datepicker('option', 'numberOfMonths');
Setting: $('.selector').datepicker('option', 'numberOfMonths', [2, 3]);
prevText : String : 'Prev'
Set the display text of the "Last Month" link.
Initial: $('.selector').datepicker({ prevText: 'Earlier' });
Get: var prevText = $('.selector').datepicker('option', 'prevText');
Settings: $('.selector').datepicker('option', 'prevText', 'Earlier');
shortYearCutoff : String, Number : '+10'
Set the value of the cut-off year. If it is a number (0-99), it will start counting from the current year. If it is a string, it will be converted into a number and then added to the current year. When the cutoff year is exceeded, it is considered to be the previous century.
Initial: $('.selector').datepicker({ shortYearCutoff: 50 });
Get: var shortYearCutoff = $('.selector').datepicker('option', 'shortYearCutoff');
Setting: $('.selector').datepicker('option', 'shortYearCutoff', 50);
showAnim : String : 'show'
Set the name of the animation that shows and hides the date plug-in.
Initial: $('.selector').datepicker({ showAnim: 'fold' });
Get: var showAnim = $('.selector').datepicker('option', 'showAnim');
Settings: $('.selector').datepicker('option', 'showAnim', 'fold');
showButtonPanel : Boolean : false
Set whether to display related buttons on the panel.
Initial: $('.selector').datepicker({ showButtonPanel: true });
Get: var showButtonPanel = $('.selector').datepicker('option', 'showButtonPanel');
Settings: $('.selector').datepicker('option', 'showButtonPanel', true);
showCurrentAtPos : Number : 0
設定當多月份顯示的情況下，目前月份顯示的位置。自頂部/左邊開始第x位。
初始：$('.selector').datepicker({ showCurrentAtPos: 3 });
取得：var showCurrentAtPos = $('.selector').datepicker('option', 'showCurrentAtPos');
設定：$('.selector').datepicker('option', 'showCurrentAtPos', 3);
showMonthAfterYear : Boolean : false
是否在面板的頭部年份後面顯示月份。
初始：$('.selector').datepicker({ showMonthAfterYear: true });
取得：var showMonthAfterYear = $('.selector').datepicker('option', 'showMonthAfterYear');
設定：$('.selector').datepicker('option', 'showMonthAfterYear', true);
showOn : String : 'focus'
設定什麼事件觸發顯示日期外掛的面板，可選值：focus, button, both
初始：$('.selector').datepicker({ showOn: 'both' });
取得：var showOn = $('.selector').datepicker('option', 'showOn');
設定：$('.selector').datepicker('option', 'showOn', 'both');
showOptions : Options : {}
如果使用showAnim來顯示動畫效果的話，可以透過此參數來增加一些附加的參數設定。
初始：$('.selector').datepicker({ showOptions: {direction: 'up' });
取得：var showOptions = $('.selector').datepicker('option', 'showOptions');
設定：$('.selector').datepicker('option', 'showOptions', {direction: 'up');
showOtherMonths : Boolean : false
是否在目前面板顯示上、下兩個月的一些日期數（不可選）。
初始：$('.selector').datepicker({ showOtherMonths: true });
取得：var showOtherMonths = $('.selector').datepicker('option', 'showOtherMonths');
設定：$('.selector').datepicker('option', 'showOtherMonths', true);
stepMonths : Number : 1
點擊上/下一月時，一次翻幾個月。
初始：$('.selector').datepicker({ stepMonths: 3 });
取得：var stepMonths = $('.selector').datepicker('option', 'stepMonths');
設定：$('.selector').datepicker('option', 'stepMonths', 3);
yearRange : String : '-10:+10'
控制年份的下拉清單中顯示的年份數量，可以是相對當前年份(-nn:+nn)，也可以是絕對值 (-nnnn:+nnnn)
初始：$('.selector').datepicker({ yearRange: '2000:2010' });
取得：var yearRange = $('.selector').datepicker('option', 'yearRange');
設定：$('.selector').datepicker('option', 'yearRange', '2000:2010');
beforeShow : function(input)
在日期控制項顯示面板之前，觸發此事件，並傳回目前觸發事件的控制項的實例物件。
初始：$('.selector').datepicker({ beforeShow: function(input) { ... } });
beforeShowDay : function(date)
在日期控制顯示面板之前，每個面板上的日期綁定時都會觸發此事件，參數為觸發事件的日期。呼叫函數後，必須傳回一個陣列：[0]此日期是否可選(true/false)，[1]此日期的CSS樣式名稱(""表示預設)，[2]當滑鼠移至上面出現一段提示的內容。
初始：$('.selector').datepicker({ beforeShowDay: function(date) { ... } });
onChangeMonthYear : function(year, month, inst)
當年份或月份改變時觸發此事件，參數為改變後的年份月份和當前日期插件的實例。
初始：$('.selector').datepicker({ onChangeMonthYear: function(year, month, inst) { ... } });
onClose : function(dateText, inst)
當日期面板關閉後觸發此事件（無論是否有選擇日期），參數為選擇的日期和當前日期插件的實例。
初始：$('.selector').datepicker({ onClose: function(dateText, inst) { ... } });
onSelect : function(dateText, inst)
當日期面板選取日期後觸發此事件，參數為選取的日期和目前日期外掛程式的實例。
$('.selector').datepicker({ onSelect: function(dateText, inst) { ... } });
以上內容介紹了JQuery datepicker 用法，希望大家喜歡。