好用的日期控件My97DatePicker

日期控件

• 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个时,系统将自动补全。

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

•  皮肤配置

1. 皮肤列表

   My97DatePicker目录下有个config.js(4.8以后在WdatePicker.js中),里面有段代码:
   

   var skinList =
   [
   {name:'default', charset:'gb2312'},
   {name:'whyGreen', charset:'gb2312'},
   {name:'blue', charset:'gb2312'},
   {name:'simple', charset:'gb2312'}
   ];

   这就是皮肤列表,每个项有name和charset两个属性.
   name 表示皮肤的名称,在配置的时候,skin属性只能是配置列表里面已有的项,否则将自动返回第一项
   charset 表示对应皮肤目录下的css文件:datepicker.css所对应的编码格式

2. 皮肤安装说明

   分两步轻松实现:
   1 将皮肤文件包拷贝到 skin 目录
   2 打开 config.js 配置皮肤列表
   
   注意:安装过多的皮肤会影响性能,一般只安装自己使用的皮肤,3个以下比较适宜