lhgcalendar的应用[一款js日期时间插件]

最新推荐文章于 2021-03-15 16:11:32 发布

weixin_34185320

最新推荐文章于 2021-03-15 16:11:32 发布

阅读量427

点赞数

文章标签： javascript ViewUI

原文链接：http://blog.51cto.com/benbird/1266490

版权

先上图，看一下使用方法，

引用：

//别忘了在项目中加载p_w_picpaths文件夹，如果加载出来的控件样式跟上图有出入，则需修改一下lhgcalendar.css文件，主要是它的clear跟url属性；如.lhgcal_head_year input{clear:both;width:45px;background:url(p_w_picpaths/lhgcal_year.gif) center right no-repeat;}

*如果您想修改组件的全局默认配置，按照以下方法设置即可(可选，不常用):

(function(config){
    config['extendDrag']=true;// 注意，此配置参数只能在这里使用全局配置，在调用窗口的传参数使用无效
    config['lock']=true;
    config['fixed']=true;
    config['okVal']='Ok';
    config['cancelVal']='Cancel';
// [more..]
})($.calendar.setting);

///

<input type="text" id="txtclock" οnclick="fndateTime();"/>

        function fndateTime() {
            J('#txtclock').calendar({ format: 'yyyy-MM-dd HH:mm:ss' });
        }

//注：如果你同时引用了jQuery库的话必须把$换成J，如果没引用jQuery库则可直接使用$。

id：文本输入框的id

类型：String
默认：null
说明：使用其他的元素如:<img><div>等来调用弹出日期框时一定要指定输入日期的文本框的id，注意id前一定要加#号，如：#cal

format：自定义日期格式

类型：String
默认：'yyyy-MM-dd'
说明：yMdHms分别代表年月日时分秒，你可以任意组合这些元素来自定义你个性化的日期格式。请见下表：

日期格式表

格式	说明
yy	将年份表示为二位数字。
yyyy	将年份表示为四位数字。如果少于四位数，前面补零。
M	将月份表示为从 1 至 12 的数字
MM	同上，如果小于两位数，前面补零。
d	将月中日期表示为从 1 至 31 的数字。
dd	同上，如果小于两位数，前面补零。
H	将小时表示为从 0 至 23 的数字。
HH	同上，如果小于两位数，前面补零。
m	将分钟表示为从 0 至 59 的数字。
mm	同上，如果小于两位数，前面补零。
s	将秒表示为从 0 至 59 的数字。
ss	同上，如果小于两位数，前面补零。

示例(只列出了常用的几种格式，如需要其它格式请自行设置)

格式字符串	值
yyyy-MM-dd HH:mm:ss	2008-03-12 19:20:00
yy年M月	08年3月
yyyyMMdd	20080312
MM/dd/yyyy	03/12/2008

动态变量表

格式	说明
%y	当前年
%M	当前月
%d	当前日
%H	当前时
%m	当前分
%s	当前秒

noToday：是否包含今天
```
类型：Boolean
默认：false
```
btnBar：是否显示下面的按钮栏
```
类型：Boolean
默认：true
```

minDate：最小日期

类型：String
默认：null
说明：注意格式要为 yyyy-MM-dd

maxDate：最大日期

类型：String
默认：null
说明：注意格式要为 yyyy-MM-dd

targetFormat：目标文本框的日期格式

类型：String
默认：null
说明：当有2个文本框之间进行日期范围限制时指来指定对应的文本框的日期格式

disWeek：无效周

类型：String
默认：null
说明：可以使用此功能禁用周日至周六所对应的日期，多个周用,分开，如：'2,4'

disDate：无效日期

类型：String
默认：null
说明：可以使用此功能禁用所指定的一个或多个日期

enDate：有效日期

类型：Boolean
默认：false
说明：为true时,无效日期变成有效日期，一般和disDate配合使用

real：存储真实日期值的控件的ID

类型：String
默认：null
说明：指定一个控件的ID,必须具有value属性(如input),用于存储真实值

onSetDate：点击某一日期时执行的回调函数

类型：Function
默认：null
说明：当选择一个日期时点击这个日期时就会触发这个函数

zIndex：日历组件的z-index值
```
类型：Number
默认：1978
```

API函数接口列表

API接口列表：

show()：显示日历
```
参数：无
说明：显示日历组件
```
hide()：隐藏日历
```
参数：无
```

getDate(type) ：获取指定格式的日期

参数1：指定的日期格式(y:返回年，M:返回月，d:返回日，H:返回小时，m:返回分钟，s:返回秒，date:返回年月日，格式yyyy-MM-dd，dateTime:返回年月日时分秒，格式yyyy-MM-dd HH:mm:ss)

$.calendar.formatDate(data,format) ：格式化日期

参数1：date --要格式化的日期
参数2：format --指定的格式

API属性接口列表：

inpE ：插入日期的文本框对象
```
显示日期的文本框
```

DOM：日历的DOM对象

通过此对象可以对日历DOM对象进行操作

常规功能使用演示

id参数(注意这里的id参数的值是左边输入框的id)，图标触发
```
J('#img').calendar({ id:'inp3' });
```
是否显示按钮栏
```
J('#inp4').calendar({ btnBar:false });
```

自动选择显示位置

当控件处在页面边界时，它会自动选择显示的位置，所以没有必要担心弹出框会被页面边界遮住的问题了。

自定义格式(其它各种自定义格式请参阅 API参数控制接口)
```
J('#inp5').calendar({ format:'yyyy年MM月dd日 HH时mm分ss秒' });
```

取得系统可识别的日期值(重要)

// 类似于 1999年7月5日 这样的日期是不能够被系统识别的,他必须转换为能够识别的类型如 1999-07-05 
J('#inp6').calendar({ format:'yyyy年MM月dd日', real:'realInp' });

// input文本框的代码是：
<input class="runcode" id="inp6"/><input class="runcode" id="realInp" type="text"/>

// 注意:在实际应用中,一般会把real指定为一个hidden控件,这里是为了把真实值展示出来,所以使用文本框
// 关键属性: real 指定一个控件或控件的ID,必须具有value属性(如input),用于存储真实值

真实的日期值是:

自动纠错功能

当日期框中的值不符合格式时,系统会尝试自动修复,显示当前日期。

日期范围限制

静态限制

// 限制日期的范围是 2011-04-10到2008-05-27 (注意minDate和maxDate的格式一定要是yyyy-MM-dd)
J('#inp7').calendar({ minDate:'2011-04-10', maxDate:'2011-05-27' });

动态限制(请参阅 API参数控制接口里的动态变量表)

// 只能选择今天以前的日期
J('#inp8').calendar({ maxDate:'%y-%M-%d' });

只能选择今天以后的日期

J('#inp9').calendar({ minDate:'%y-%M-%d' });

只能选择本年4月当前天到当前月的25号之间的日期

J('#inp10').calendar({ minDate:'%y-04-%d', maxDate:'%y-%M-25' });

前面的日期不能大于后面的日期

// #inp12为一个#号加上后面输入框的id
J('#inp11').calendar({ maxDate:'#inp12' });
// #inp11为一个#号加上前面输入框的id
J('#inp12').calendar({ minDate:'#inp11' });

有效期从到

前面的日期不能大于后面的日期(targetFormat参数示例)

// #inp14为一个#号加上后面输入框的id
J('#inp13').calendar({ maxDate:'#inp14', format:'yyyyMMdd' targetFormat:'yyyy年MM月dd日' });
// #inp13为一个#号加上前面输入框的id
J('#inp14').calendar({ minDate:'#inp13', format:'yyyy年MM月dd日', targetFormat:'yyyyMMdd' });
注：如果目标文本框的日期格式不是'yyyy-MM-dd'的格式，则一定要加上targetFormat参数，指明目标文本框的日期格式

有效期从到

无效周(可以使用此功能禁用周日至周六所对应的日期,相关属性:disWeek (0至6 分别代表周日至周六))

// 前面的输入框代码(周六所对应的日期无效)
J('#inp15').calendar({ disWeek:'6' });
// 后面的输入框代码(周日和周四所对应的日期无效)
J('#inp16').calendar({ disWeek:'0,4' });

无效日期(可以使用此功能禁用,所指定的一个或多个日期,只要你熟悉正则表达式,你可以尽情发挥)

禁用每个月份的 5日 15日 25日

// '5$' 表示以 5 结尾 注意 $ 的用法 
J('#inp17').calendar({ disDate:['5$'] });

禁用所有早于2000-01-01的日期

J('#inp18').calendar({ disDate:['^19'] });

禁用 2011-05-05 和 2011-05-24

J('#inp19').calendar({ disDate:['2011-05-05','2011-05-24'] });

禁用 2011-所有月份-04 和 2011-05-29

J('#inp20').calendar({ disDate:['2011-..-04','2011-05-29'] });

禁用 [2000至2008]-05-01 和 2011-05-29

J('#inp21').calendar({ disDate:['200[0-8]-05-01','2011-05-29'] });

禁用所有年份和所有月份的第7天和今天

J('#inp22').calendar({ disDate:['....-..-07','%y-%M-%d'] });

有效日期
使用无效日期可以很方便的禁用不可用的日期,但是在只需要启用少部分日期的情况下,有效日期的功能就非常适合了
关键属性: enDate 默认为false, 为true时,无效日期变成有效日期

启用每个月份的 5日 15日 25日

J('#inp23').calendar({ disDate:['5$'], enDate:true });

自定义事件

如果你需要做一些附加的操作,你也不必担心,日期控件自带的自定义事件可以满足你的需求.此外,你还可以在自定义事件中调用提供的API库来做更多的运算和扩展,绝对可以通过很少的代码满足你及其个性化的需求.

注意下面几个重要的指针,将对你的编程带来很多便利
this: 指向日历对象实例，也就是J.calendar对象
this.inpObj: 指向文本框
this.cal: 指向日历控件对象

注意:函数原型必须使用类似 function(dp){} 的模式,这样子,在函数内部才可以使用this

onSetDate事件

J('#inp24').calendar({ onSetDate:function(){alert(this.inpObj.value);} });

getDateStr()用法

// getDateStr的参数用法请参阅
J('#inp25').calendar({ onSetDate:function(){alert('日期框原来的值为:'+this.inpObj.value+',要用新选择的值:'+this.getDateStr('date')+'覆盖吗?');} });

示例中各API接口的详细说明请参阅 API参数控制接口

转载于:https://blog.51cto.com/benbird/1266490

weixin_34185320

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
lhgcalendar的应用[一款js日期时间插件]

先上图，看一下使用方法，引用：<scripttype="text/javascript"src="../js/jquery-1.7.2.min.js"></script><scripttype="text/javascript"src="../lhgcalendar/lhgcore.min.js">...
复制链接

扫一扫