引言
之前使用jqueryUi中的弹出框做了一个可拖拽的弹出登录框，也顺便将里面的常用的日期插件和文本框智能提示插件，也学习了一下。
使用方法
首先在项目中引入以下文件：
1 <!-- 日期插件 默认样式文件引用 --> 2 3 <linkhref="libs/JqueryUI/css/redmond/jquery-ui-1.10.4.custom.min.css"rel="stylesheet"/> 4 5 <!-- jquery核心插件 版本1.10.2 --> 6 7 <scripttype="text/javascript"src="libs/JqueryUI/js/jquery-1.10.2.js"></script> 8 9 <!-- 日期插件js文件 --> 10 11 <scripttype="text/javascript"src="libs/JqueryUI/js/jquery-ui-1.10.4.custom.min.js"></script> 12 13 <!-- 日期插件语言包 设置为中文 --> 14 15 <scripttype="text/javascript"src="libs/JqueryUI/js/jquery.ui.datepicker-zh-CN.js"></script> 16
常用方法
描述
|
类型 |
名称 |
描述 |
|
方法 |
datepicker |
该方法为日期插件的初始化方法。 |
常用参数
描述
|
类型 |
名称 |
描述 |
|
参数 |
changeMonth |
在日期的标题栏中是否出现下拉选择框，选择日期中的月份。true代表有选择框，false代表无选择框。 |
|
参数 |
changeYear |
在日期的标题栏中是否出现下拉选择框，选择日期中的年份。true代表有选择框，false代表无选择框。 |
|
参数 |
showButtonPanel |
在日期面板的下方出现两个按钮，一个是今天，一个是关闭。默认值是false,不显示的。 |
|
参数 |
closeText |
必须结合showButtonPanel使用，并且showButtonPanel的值必须是true，否则看不到效果。 |
|
参数 |
dateFormat |
表示日期显示的格式，可以设置为：mm/dd/yy、yy-mm-dd、 d M, y、DD, d MM, yy 、‘day‘ d ‘of‘ MM ‘in the year‘ yy。 |
|
参数 |
defaultDate |
首次打开显示的日期，可以用Date对象指定一个实际日期，或指定距离今天的天数（如+7）、字符串（y表示年、m表示月、w表示周、d表示天，如"+1m+7d"）默认为null，表示今天。 |
|
参数 |
showAnim |
日期界面出现的动画效果 |
|
参数 |
showWeek |
显示周，当前中的第几周。 |
|
参数 |
firstDay |
设置每周的第一天，0表示星期日1表示星期一等。 |
|
参数 |
yearRange |
设置下拉列表框中显示的年份范围，可以是相对今年（-nn:+nn）或相对于选择的年份（c-nn:c+nn）或绝对年份（nnnn:nnnn） |
示例
1 $(function(){ 2 3 //日期插件 初始化方法 4 5 $("#datepicker").datepicker({ 6 7 //在日期的标题栏中是否出现下拉选择框，选择日期中的月份。 8 9 //true代表有选择框，false代表无选择框 10 11 changeMonth:false, 12 13 //在日期的标题栏中是否出现下拉选择框，选择日期中的年份。 14 15 //true代表有选择框，false代表无选择框 16 17 changeYear:false, 18 19 //在日期面板的下方出现两个按钮，一个是今天，一个是关闭。 20 21 //默认值是false,不显示的 22 23 showButtonPanel:true, 24 25 //必须结合showButtonPanel使用， 26 27 //并且showButtonPanel的值必须是true，否则看不到效果 28 29 closeText:"关闭", 30 31 //表示日期显示的格式 32 33 //mm/dd/yy, yy-mm-dd, d M, y, DD, d MM, yy , 34 35 //‘day‘ d ‘of‘ MM ‘in the year‘ yy 36 37 dateFormat:"yy-mm-dd", 38 39 //缺省值在当前日期中加或减几天 40 41 defaultDate:-3, 42 43 //日期界面出现的动画效果 44 45 showAnim:"toggle", 46 47 //显示周 当前中的第几周 48 49 showWeek:false, 50 51 //默认firstDay 当前的第一天 52 53 firstDay:1, 54 55 //表示下拉框中年份的范围 56 57 yearRange:"c-10:c+10" 58 59 }); 60 61 });
总结
这里总结了一下日期插件的相关内容，关于文本框智能提示的，可以参考官网的demo。