官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/。
一个不错的地址,用来DIY jQuery UI界面效果的站点http://jqueryui.com/themeroller/
DatePicker基本使用方法:
如果设置为true,则所有文字是从右自左。
初始:$('.selector').datepicker({ isRTL: true });
获取:var isRTL = $('.selector').datepicker('option', 'isRTL');
设置:$('.selector').datepicker('option', 'isRTL', true);
maxDate : Date, Number, String : null
设置一个最大的可选日期。可以是Date对象,或者是数字(从今天算起,例如+7),或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如:'+1m +7d')。
初始:$('.selector').datepicker({ maxDate: '+1m +1w' });
获取:var maxDate = $('.selector').datepicker('option', 'maxDate');
设置:$('.selector').datepicker('option', 'maxDate', '+1m +1w');
$('.selector').datepicker('option', 'maxDate', '12/25/2012');
minDate : Date, Number, String : null
设置一个最小的可选日期。可以是Date对象,或者是数字(从今天算起,例如+7),或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如:'+1m +7d')。
初始:$('.selector').datepicker({ minDate: new Date(2007, 1 - 1, 1) });
获取:var minDate = $('.selector').datepicker('option', 'minDate');
设置:$('.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']
设置所有月份的名称。
初始:$('.selector').datepicker({monthNames:['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December']});
获取:var monthNames = $('.selector').datepicker('option', 'monthNames');
设置:$('.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']
设置所有月份的缩写。
初始:$('.selector').datepicker({monthNamesShort:['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec']});
获取:var monthNamesShort = $('.selector').datepicker('option', 'monthNamesShort');
设置:$('.selector').datepicker('option', 'monthNamesShort', ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec']);
navigationAsDateFormat : Boolean : false
如果设置为true,则formatDate函数将应用到 prevText,nextText和currentText的值中显示,例如显示为月份名称。
初始:$('.selector').datepicker({ navigationAsDateFormat: true });
获取:var navigationAsDateFormat = $('.selector').datepicker('option', 'navigationAsDateFormat');
设置:$('.selector').datepicker('option', 'navigationAsDateFormat', true);
nextText : String : 'Next'
设置“下个月”链接的显示文字。
初始:$('.selector').datepicker({ nextText: 'Later' });
获取:var nextText = $('.selector').datepicker('option', 'nextText');
设置:$('.selector').datepicker('option', 'nextText', 'Later');
numberOfMonths : Number, Array : 1
设置一次要显示多少个月份。如果为整数则是显示月份的数量,如果是数组,则是显示的行与列的数量。
初始:$('.selector').datepicker({ numberOfMonths: [2, 3] });
获取:var numberOfMonths = $('.selector').datepicker('option', 'numberOfMonths');
设置:$('.selector').datepicker('option', 'numberOfMonths', [2, 3]);
prevText : String : 'Prev'
设置“上个月”链接的显示文字。
初始:$('.selector').datepicker({ prevText: 'Earlier' });
获取:var prevText = $('.selector').datepicker('option', 'prevText');
设置:$('.selector').datepicker('option', 'prevText', 'Earlier');
shortYearCutoff : String, Number : '+10'
设置截止年份的值。如果是(0-99)的数字则以当前年份开始算起,如果为字符串,则相应的转为数字后再与当前年份相加。当超过截止年份时,则被认为是上个世纪。
初始:$('.selector').datepicker({ shortYearCutoff: 50 });
获取:var shortYearCutoff = $('.selector').datepicker('option', 'shortYearCutoff');
设置:$('.selector').datepicker('option', 'shortYearCutoff', 50);
showAnim : String : 'show'
设置显示、隐藏日期插件的动画的名称。
初始:$('.selector').datepicker({ showAnim: 'fold' });
获取:var showAnim = $('.selector').datepicker('option', 'showAnim');
设置:$('.selector').datepicker('option', 'showAnim', 'fold');
showButtonPanel : Boolean : false
设置是否在面板上显示相关的按钮。
初始:$('.selector').datepicker({ showButtonPanel: true });
获取:var showButtonPanel = $('.selector').datepicker('option', 'showButtonPanel');
设置:$('.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 用法,希望大家喜欢。