[js插件]JqueryUI日期插件
2014-04-22 20:07
260 查看
引言
之前使用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。相关文章推荐
- phonegap成长笔记(一)
- 元素水平垂直居中(transform,margin,table-cell,jQuery)
- jQuery:多个AJAX/JSON请求对应单个回调
- jQuery:多个AJAX/JSON请求对应单个回调
- jQuery:多个AJAX/JSON请求对应单个回调
- 商城放大镜效果
- jquery的ajax请求与springMVC交互
- jquery autocomplete
- jQuery中attr和prop方法的区别
- Jquery promise
- 解决jquery$命名符和其它框架的冲突问题
- jQuery 学习系列笔记(二)
- 移动Web框架:jQuery Mobile VS Sencha Touch
- jQuery Validation范例
- jQuery 之父:每天写代码
- jQuery的编码标准和最佳实践
- 《锋利的jQuery》随笔(一)
- jquery 设置checkbox全选 全不选
- jquery ajax(5)form表单序列化
- 抛弃jQuery 深入原生的JavaScript