[js插件]JqueryUI日期插件

引言

之前使用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  

常用方法

 描述

常用参数

描述

示例

 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。