博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[js插件]JqueryUI日期插件
阅读量:6637 次
发布时间:2019-06-25

本文共 2307 字,大约阅读时间需要 7 分钟。

引言

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

使用方法

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

1     
2 3
4 5
6 7
8 9
10 11
12 13
14 15
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' yy36 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。

转载于:https://www.cnblogs.com/wolf-sun/p/3681348.html

你可能感兴趣的文章
深入了解JavaScript
查看>>
Python 5.4 定制类
查看>>
Python 10.4 struct
查看>>
一个女人努力工作的意义
查看>>
随办,企业生产力的第四次革命
查看>>
android字体的工作原理
查看>>
tomcat问题总结
查看>>
【Android自定义Activity主题】
查看>>
Git 遇到了 early EOF index-pack failed 问题
查看>>
docker数据管理
查看>>
使用LVM技术提升Xen虚拟机性能的实现
查看>>
linux下tar 做增量备份
查看>>
mysql5.6源码编译安装
查看>>
一次关于DNS服务器的故障排错记录——RNDC故障
查看>>
UML
查看>>
我的友情链接
查看>>
关于文本框自动全选
查看>>
LVM应用(一)
查看>>
5/23 位置代号:JSKFQ
查看>>
***常用兵器之***篇(下)
查看>>