[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  
复制代码

 

常用方法

 描述

类型

名称

描述

方法

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。

博客地址: http://www.cnblogs.com/wolf-sun/
博客版权: 本文以学习、研究和分享为主,欢迎转载,但必须在文章页面明显位置给出原文连接。
如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步!
再次感谢您耐心的读完本篇文章。

转载:http://www.cnblogs.com/wolf-sun/p/3681348.html
目录
相关文章
|
2月前
|
JavaScript 前端开发
JavaScript Date(日期) 对象
JavaScript Date(日期) 对象
42 2
|
3月前
|
JavaScript 前端开发
js时间戳转日期时间
js时间戳转日期时间
84 20
|
21天前
|
JavaScript 前端开发 搜索推荐
Moment.js、Day.js、Miment,日期时间库怎么选?
【10月更文挑战第29天】如果你需要一个功能强大、插件丰富的日期时间库,并且对性能要求不是特别苛刻,Moment.js是一个不错的选择;如果你追求极致的轻量级和高性能,那么Day.js可能更适合你;而如果你有一些特定的日期时间处理需求,并且希望在性能和功能之间取得平衡,Miment也是可以考虑的。
|
28天前
|
JavaScript 前端开发
javascript开发的简单的弹幕插件
这是一个原生javascript开发的简单的弹幕插件,具有美观、易用,占用的资源较低等特点,可以给弹幕设置内容、颜色、头像、链接地址等属性,鼠标悬停等,简单实用,欢迎下载!
40 5
|
29天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
30 0
|
2月前
|
存储 JSON JavaScript
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
58 0
|
3月前
|
JavaScript 前端开发
|
4月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
116 1
|
4月前
|
JavaScript 前端开发 测试技术
[译] 用 Vue.js 3 Composition API 创建 i18n 插件
[译] 用 Vue.js 3 Composition API 创建 i18n 插件
|
5月前
|
JavaScript 前端开发 API
Chrome插件实现问题之 content_script.js能做什么
Chrome插件实现问题之 content_script.js能做什么