[js插件]JqueryUI日期插件

引言

之前使用jqueryUi中的弹出框做了一个可拖拽的弹出登录框，也顺便将里面的常用的日期插件和文本框智能提示插件，也学习了一下。

使用方法

首先在项目中引入以下文件：

     <!-- 日期插件 默认样式文件引用 -->

 <linkhref="libs/JqueryUI/css/redmond/jquery-ui-1.10.4.custom.min.css"rel="stylesheet"/>

     <!-- jquery核心插件 版本1.10.2 -->

 <scripttype="text/javascript"src="libs/JqueryUI/js/jquery-1.10.2.js"></script>

     <!-- 日期插件js文件 -->

 <scripttype="text/javascript"src="libs/JqueryUI/js/jquery-ui-1.10.4.custom.min.js"></script>

     <!-- 日期插件语言包 设置为中文 -->

 <scripttype="text/javascript"src="libs/JqueryUI/js/jquery.ui.datepicker-zh-CN.js"></script>
  

常用方法

 描述

类型	名称	描述
方法	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）

示例

  $(function(){

             //日期插件 初始化方法

             $("#datepicker").datepicker({

                 //在日期的标题栏中是否出现下拉选择框，选择日期中的月份。

                 //true代表有选择框，false代表无选择框 

                 changeMonth:false,

                 //在日期的标题栏中是否出现下拉选择框，选择日期中的年份。

                 //true代表有选择框，false代表无选择框 

                 changeYear:false,

                 //在日期面板的下方出现两个按钮，一个是今天，一个是关闭。

                 //默认值是false,不显示的 

                 showButtonPanel:true,

                 //必须结合showButtonPanel使用，

                 //并且showButtonPanel的值必须是true，否则看不到效果

                 closeText:"关闭",

                 //表示日期显示的格式  

                 //mm/dd/yy,  yy-mm-dd,  d M, y,    DD, d MM, yy  ,

                 //'day' d 'of' MM 'in the year' yy

                 dateFormat:"yy-mm-dd",

                 //缺省值在当前日期中加或减几天 

                 defaultDate:-3,

                 //日期界面出现的动画效果 

                 showAnim:"toggle",

                 //显示周  当前中的第几周

                 showWeek:false,

                 //默认firstDay 当前的第一天

                 firstDay:1,

                 //表示下拉框中年份的范围 

                 yearRange:"c-10:c+10"   

             });

         });

总结

这里总结了一下日期插件的相关内容，关于文本框智能提示的，可以参考官网的demo。