引言

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

[js插件]JqueryUI日期插件相关推荐

  1. java中jsp时间插件_日期插件 - WEB源码|JSP源码/Java|源代码 - 源码中国

    日期插件\My97DatePicker\calendar.js 日期插件\My97DatePicker\lang\en.js 日期插件\My97DatePicker\lang\zh-cn.js 日期插 ...

  2. WdatePicker日期插件

    WdatePicker日期插件 WdatePicker日期插件应用步骤如下: 1.引入jQuery核心包和WdatePicker.js文件 2.使用onfocus事件触发WdatePicker函数 3 ...

  3. jquery-ui里日期插件的使用

    HTML为 <input type="text" id="starttime" readonly /><input type="te ...

  4. WdatePicker,js日期插件 ,时间相加

    //WdatePicker,js日期插件 //点击一个日期选择框后,得到日期,然后另一个日期选择框的日期自动加上一天 function pickedFunc(){                  $ ...

  5. 日期插件rolldate.js的使用

    日期插件rolldate.js的使用 下载地址:http://www.jq22.com/jquery-info19834 效果: 代码: <!DOCTYPE html> <html ...

  6. 超好用的js 日历插件 日期插件 日期日历选择控件

    前情提要: 主要是目前项目较小,仅需要一个日历插件,就没有选择引用UI框架,单纯找了一个日历插件,外观相对简单大方,还不错,而且只需要2步就可以完成引入: 第一步(有2种方式引入,支持单独引入文件及n ...

  7. mobiscroll js 日期插件

    2019独角兽企业重金招聘Python工程师标准>>> mobiscroll js: 日期插件,一般用于移动开发 界面 <!--mobiscroll会将表单控件的value属性 ...

  8. 【js】日期插件 my97日期控件

    http://my97.net/dp/demo/index.htm 功能不错的日期插件 转载于:https://www.cnblogs.com/merlini/archive/2013/06/09/3 ...

  9. jqueryui时间插件_满足您所有日历要求的jQueryUI Datepicker插件

    jqueryui时间插件 jQuery provides a variety of Calendar Plugins that would allow you to integrate calenda ...

最新文章

  1. NDK 与 JNI 的关系
  2. 使用Zookeeper实现leader选举-Leader Latch
  3. spring事物管理(配置文件方式)
  4. phpStorm注册码
  5. 2017年计算机三级网络技术试题,2017年计算机三级网络技术考前试题及答案(8)
  6. c# mysql 插入 和 查询_C#对数据库的操作(增删改查)
  7. [转载] 七龙珠第一部——第029话 冒险再度开始
  8. matlab作图显示中文正常,保存图片中文乱码
  9. YOLO版本不兼容,报错AttributeError: Can’t get attribute ‘SPPF’ on <module ‘models.common’
  10. 图像处理之像素的修改
  11. “万米网格管理法”助力省城城市管理
  12. str.substring(0,str.length() -1)用法
  13. 51单片机外部中断的C51编程
  14. 29、ZigBee 开发教程之基础篇—RFID 射频卡
  15. 《如何阅读一本书》读书笔记2
  16. 渠道二维码的基础玩法总结
  17. CG.DYJ-有序顺序表的插入
  18. 大数据培训课程Yarn资源调度器作业提交全过程
  19. [附源码]计算机毕业设计基于Web的软考题库平台Springboot程序
  20. [BLE--SMP]蓝牙安全管理之BLE的安全

热门文章

  1. 单像素骨架提取算法c语言实现,【图像】骨架提取与分水岭算法
  2. spring-data-jpa Specification构建动态ql
  3. 数据加解密和数据签名验签
  4. nginx日志中添加请求的response日志
  5. MySQL:简单insert 一秒原因排查
  6. 《.NET应用架构设计:原则、模式与实践》新书博客--试读-1.1.2 架构师的职责
  7. Asp.Net 分段,断点,下载
  8. 我们在雪地撒野——51cto众人滑雪图片集
  9. 【nodejs原理源码赏析(6)】深度剖析cluster模块源码与node.js多进程(下)
  10. 命令行查看网卡使用的驱动+跳板机命令行设置静态地址