datepicker的参数使用详解.docx
- 文档编号:8694957
- 上传时间:2023-02-01
- 格式:DOCX
- 页数:9
- 大小:19.96KB
datepicker的参数使用详解.docx
《datepicker的参数使用详解.docx》由会员分享,可在线阅读,更多相关《datepicker的参数使用详解.docx(9页珍藏版)》请在冰豆网上搜索。
datepicker的参数使用详解
jQuery-ui日期插件datepicker的参数使用详解
·概述
日期选择插件是一个配置灵活的插件,你可以定义它的展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
同时,你还可以通过键盘控制它:
pageup/down-上一月、下一月
ctrl+pageup/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-daynameshort
DD-daynamelong
m-月份(没有前导零)
mm-月份(两位数字)
M-monthnameshort
MM-monthnamelong
y-年份(两位数字)
yy-年份(四位数字)
@-Unix时间戳(从01/01/1970开始)
'...'-文本
''-单引号
(其它)-文本
其它标准日期格式:
ATOM-'yy-mm-dd'(SameasRFC3339/ISO8601)
COOKIE-'D,ddMyy'
ISO_8601-'yy-mm-dd'
RFC_822-'D,dMy'
RFC_850-'DD,dd-M-y'
RFC_1036-'D,dMy
RFC_1123-'D,dMyy'
RFC_2822-'D,dMyy'
RSS-'D,dMy'
TIMESTAMP-'@'
W3C-'yy-mm-dd'
·参数(参数名:
参数类型:
默认值)
altField:
String:
''
将选择的日期同步到另一个域中,配合altFormat可以显示不同格式的日期字符串。
初始:
$('.selector').datepicker({altField:
'#actualDate'});
获取:
varaltField=$('.selector').datepicker('option','altField');
设置:
$('.selector').datepicker('option','altField','#actualDate');
altFormat:
String:
''
当设置了altField的情况下,显示在另一个域中的日期格式。
初始:
$('.selector').datepicker({altFormat:
'yy-mm-dd'});
获取:
varaltFormat=$('.selector').datepicker('option','altFormat');
设置:
$('.selector').datepicker('option','altFormat','yy-mm-dd');
appendText:
String:
''
在日期插件的所属域后面添加指定的字符串。
初始:
$('.selector').datepicker({appendText:
'(yyyy-mm-dd)'});
获取:
varappendText=$('.selector').datepicker('option','appendText');
设置:
$('.selector').datepicker('option','appendText','(yyyy-mm-dd)');
buttonImage:
String:
''
设置弹出按钮的图片,如果非空,则按钮的文本将成为alt属性,不直接显示。
初始:
$('.selector').datepicker({buttonImage:
'/images/datepicker.gif'});
获取:
varbuttonImage=$('.selector').datepicker('option','buttonImage');
设置:
$('.selector').datepicker('option','buttonImage','/images/datepicker.gif');
buttonImageOnly:
Boolean:
false
Settotruetoplaceanimageafterthefieldtouseasthetriggerwithoutitappearingonabutton.
初始:
$('.selector').datepicker({buttonImageOnly:
true});
获取:
varbuttonImageOnly=$('.selector').datepicker('option','buttonImageOnly');
设置:
$('.selector').datepicker('option','buttonImageOnly',true);
buttonText:
String:
'...'
设置触发按钮的文本内容。
初始:
$('.selector').datepicker({buttonText:
'Choose'});
获取:
varbuttonText=$('.selector').datepicker('option','buttonText');
设置:
$('.selector').datepicker('option','buttonText','Choose');
changeMonth:
Boolean:
false
设置允许通过下拉框列表选取月份。
初始:
$('.selector').datepicker({changeMonth:
true});
获取:
varchangeMonth=$('.selector').datepicker('option','changeMonth');
设置:
$('.selector').datepicker('option','changeMonth',true);
changeYear:
Boolean:
false
设置允许通过下拉框列表选取年份。
初始:
$('.selector').datepicker({changeYear:
true});
获取:
varchangeYear=$('.selector').datepicker('option','changeYear');
设置:
$('.selector').datepicker('option','changeYear',true);
closeTextType:
StringDefault:
'Done'
设置关闭按钮的文本内容,此按钮需要通过showButtonPanel参数的设置才显示。
初始:
$('.selector').datepicker({closeText:
'X'});
获取:
varcloseText=$('.selector').datepicker('option','closeText');
设置:
$('.selector').datepicker('option','closeText','X');
constrainInput:
Boolean:
true
如果设置为true,则约束当前输入的日期格式。
初始:
$('.selector').datepicker({constrainInput:
false});
获取:
varconstrainInput=$('.selector').datepicker('option','constrainInput');
设置:
$('.selector').datepicker('option','constrainInput',false);
currentText:
String:
'Today'
设置当天按钮的文本内容,此按钮需要通过showButtonPanel参数的设置才显示。
初始:
$('.selector').datepicker({currentText:
'Now'});
获取:
varcurrentText=$('.selector').datepicker('option','currentText');
设置:
$('.selector').datepicker('option','currentText','Now');
dateFormat:
String:
'mm/dd/yy'
设置日期字符串的显示格式。
初始:
$('.selector').datepicker({dateFormat:
'yy-mm-dd'});
获取:
vardateFormat=$('.selector').datepicker('option','dateFormat');
设置:
$('.selector').datepicker('option','dateFormat','yy-mm-dd');
dayNames:
Array:
['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']
设置一星期中每天的名称,从星期天开始。
此内容用于dateFormat时显示,以及日历中当鼠标移至行头时显示。
初始:
$('.selector').datepicker({dayNames:
['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi']});
获取:
vardayNames=$('.selector').datepicker('option','dayNames');
设置:
$('.selector').datepicker('option','dayNames',['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi']);
dayNamesMin:
Array:
['Su','Mo','Tu','We','Th','Fr','Sa']
设置一星期中每天的缩语,从星期天开始,此内容用于dateFormat时显示,以前日历中的行头显示。
初始:
$('.selector').datepicker({dayNamesMin:
['Di','Lu','Ma','Me','Je','Ve','Sa']});
获取:
vardayNamesMin=$('.selector').datepicker('option','dayNamesMin');
设置:
$('.selector').datepicker('option','dayNamesMin',['Di','Lu','Ma','Me','Je','Ve','Sa']);
dayNamesShort:
Array:
['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
设置一星期中每天的缩语,从星期天开始,此内容用于dateFormat时显示,以前日历中的行头显示。
初始:
$('.selector').datepicker({dayNamesShort:
['Dim','Lun','Mar','Mer','Jeu','Ven','Sam']});
获取:
vardayNamesShort=$('.selector').datepicker('option','dayNamesShort');
设置:
$('.selector').datepicker('option','dayNamesShort',['Dim','Lun','Mar','Mer','Jeu','Ven','Sam']);
defaultDate:
Date,Number,String:
null
设置默认加载完后第一次显示时选中的日期。
可以是Date对象,或者是数字(从今天算起,例如+7),或者有效的字符串('y'代表年,'m'代表月,'w'代表周,'d'代表日,例如:
'+1m+7d')。
初始:
$('.selector').datepicker({defaultDate:
+7});
获取:
vardefaultDate=$('.selector').datepicker('option','defaultDate');
设置:
$('.selector').datepicker('option','defaultDate',+7);
duration:
String,Number:
'normal'
设置日期控件展开动画的显示时间,可选是"slow","normal","fast",''代表立刻,数字代表毫秒数。
初始:
$('.selector').datepicker({duration:
'slow'});
获取:
varduration=$('.selector').datepicker('option','duration');
设置:
$('.selector').datepicker('option','duration','slow');
firstDay:
Number:
0
设置一周中的第一天。
星期天为0,星期一为1,以此类推。
初始:
$('.selector').datepicker({firstDay:
1});
获取:
varfirstDay=$('.selector').datepicker('option','firstDay');
设置:
$('.selector').datepicker('option','firstDay',1);
gotoCurrent:
Boolean:
false
如果设置为true,则点击当天按钮时,将移至当前已选中的日期,而不是今天。
初始:
$('.selector').datepicker({gotoCurrent:
true});
获取:
vargotoCurrent=$('.selector').datepicker('option','gotoCurrent');
设置:
$('.selector').datepicker('option','gotoCurrent',true);
hideIfNoPrevNext:
Boolean:
false
设置当没有上一个/下一个可选择的情况下,隐藏掉相应的按钮。
(默认为不可用)
初始:
$('.selector').datepicker({hideIfNoPrevNext:
true});
获取:
varhideIfNoPrevNext=$('.selector').datepicker('option','hideIfNoPrevNext');
设置:
$('.selector').datepicker('option','hideIfNoPrevNext',true);
isRTL:
Boolean:
false
如果设置为true,则所有文字是从右自左。
初始:
$('.selector').datepicker({isRTL:
true});
获取:
varisRTL=$('.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'});
获取:
varmaxDate=$('.selector').datepicker('option','maxDate');
设置:
$('.selector').datepicker('option','maxDate','+1m+1w');
minDate:
Date,Number,String:
null
设置一个最小的可选日期。
可以是Date对象,或者是数字(从今天算起,例如+7),或者有效的字符串('y'代表年,'m'代表月,'w'代表周,'d'代表日,例如:
'+1m+7d')。
初始:
$('.selector').datepicker({minDate:
newDate(2007,1-1,1)});
获取:
varminDate=$('.selector').datepicker('option','minDate');
设置:
$('.selector').datepicker('option','minDate',newDate(2007,1-1,1));
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']});
获取:
varmonthNames=$('.selector').datepicker('option','monthNames');
设置:
$('.selector').datepicker('option','monthNames',['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','Novembe
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- datepicker 参数 使用 详解