日期控件
-
My97DatePicker
首先我们来看一下显示效果:
可以看出基本的时间操作功能该插件都能满足,下面进行设置。
首先要下载插件导入工程,建议不要改其结构。
相应的在jsp中引用:
<script language="javascript" type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
下面就简单了
Monitoring Date:<input name="endTime" id="endTime" type="text" class="Wdate"
onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowWeek:true,readOnly:true,highLineWeekDay:true,firstDayOfWeek:0})"/>
说明:
class="Wdate" =>>设置日期小图标,去掉不显示。
isShowWeek:true =>>是否显示前面的第几周。
readOnly:true =>>是否可以手输。
highLineWeekDay:true =>>是否高亮显示周六周日。
firstDayOfWeek:0 =>>起始为周(0:日;1:一...类推)。
isShowClear:false =>>是否隐藏清除按钮。
startDate:'1980-05-01' =>>设置选择框为空时的起始日期,默认不写为系统当前日期。
lang:'en' =>>设置语言:en英语、zh-tw繁体、zh-cn简体。
skin:'whyGreen' =>>(浅绿色)设置皮肤,默认为default。
minDate:'2006-09-10' =>>设置最小日期范围。注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致。
maxDate:'2008-12-20' =>>设置最大日期范围。也可以用动态日期maxDate:'%y-%M-{%d+1}'。
disabledDays:[0,6] =>>设置无效天,周六周日不可选。参见http://www.my97.net/dp/demo/index.htm
specialDays:[1,5] =>>高亮周一周五。
qsEnabled:true,quickSel:['2000-10-01','%y-%M-01','%y-%M-%ld'] =>>最左侧的快速选择。当传入的数据不足5个时,系统将自动补全。
另外当控件处在页面边界时,它会自动选择显示的位置,所以没有必要担心弹出框会被页面边界遮住的问题了.
- 皮肤列表
My97DatePicker目录下有个config.js(4.8以后在WdatePicker.js中),里面有段代码:
这就是皮肤列表,每个项有name和charset两个属性.var skinList = [ {name:'default', charset:'gb2312'}, {name:'whyGreen', charset:'gb2312'}, {name:'blue', charset:'gb2312'}, {name:'simple', charset:'gb2312'} ];
name 表示皮肤的名称,在配置的时候,skin属性只能是配置列表里面已有的项,否则将自动返回第一项
charset 表示对应皮肤目录下的css文件:datepicker.css所对应的编码格式 - 皮肤安装说明
分两步轻松实现:
1 将皮肤文件包拷贝到 skin 目录
2 打开 config.js 配置皮肤列表
注意:安装过多的皮肤会影响性能,一般只安装自己使用的皮肤,3个以下比较适宜