日历控件

简介

一个纯客户端的JS日历选择控件,采用的是网上流行的My97 DatePicker ,功能很强大,按照官网的说法,具有以下特色:

l  更人性化,更全面的功能

l  强大的日期范围限制功能

l  自定义事件和丰富的API库

l  多语言支持和自定义皮肤支持

l  跨无限级框架显示和自动选择显示位置

 

控件提取人:邓太华,2010-3-3

控件的版本:My97 DatePicker 4.7 Prerelease2

 

项目使用实例

在基金分析-》区间收益排名

(/FinancialManager/FundAnalysis/IncomeRanking/IncomeRanking.aspx),

首页-》案例分享

(/FinancialManager/XTGL/CheckAnLi.aspx)

运行效果如下图:

 

 

 

使用方法

1,  将My97整个目录拷贝到Web站点下;

2,  在页面中添加My97的JS引用,例如WFT在Base页面中通过代码引用该JS:

string js = AppName + "/Themes/My97DatePicker/WdatePicker.js";//自定义js路径 

 

3,  在页面的文本框控件中的onclick事件中使用WdatePicker(),例如下面的代码:

<asp:TextBox ID="txtStartDate" runat="server" onclick="WdatePicker()" Width="70"></asp:TextBox>

 

4,  如果想在文本框后面显示一个日历按钮图片,可以使用下面的代码:

<input style="width: 100px;" id="starttime" type="text" runat="server" clientidmode="Static"

   onclick="WdatePicker()" />

<img onclick="WdatePicker({el:'starttime'})" src="../../Themes/My97DatePicker/skin/datePicker.gif"

   width="16" height="22" align="middle" alt="请选择日¨期!" />

注意在img图片事件中使用了{el:’starttime’},其中starttime为日历文本框的ID。

 

 

 

注意事项

  • My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名
  • My97DatePicker.htm是必须文件,不可删除
  • 各目录及文件的用途:
    WdatePicker.js 配置文件,在调用的地方仅需使用该文件,可多个共存,以xx_WdatePicker.js方式命名
    config.js 语言和皮肤配置文件,无需引入
    calendar.js 日期库主文件,无需引入
    My97DatePicker.htm 临时页面文件,不可删除
    目录lang 存放语言文件,你可以根据需要清理或添加语言文件
    目录skin 存放皮肤的相关文件,你可以根据需要清理或添加皮肤文件包
  • 当WdatePicker.js里的属性:$wdate=true时,在input里加上class="Wdate"就会在选择框右 边出现日期图标,如果您不喜欢这个样式,可以把class="Wdate"去掉,另外也可以通过修改skin目录下的WdatePicker.css文件 来修改样式

 

源码说明

My 97日历控件是第3方JS日历控件,作者对JS进行了混淆,要获得源码需要付费购买。

(由于使用很简单,不做详细说明,具体可以参考官网地址)

 

参考资源

控件的官方地址:http://www.my97.net/dp/index.asp

下载地址:http://www.my97.net/dp/down.asp

 

三款漂亮的JS日历控件:

http://www.ijavascript.cn/tools/codedemo/js-calendar-473/index.htm

JS日历控件源码:

http://blog.csdn.net/BiologyPianoProgram/archive/2009/06/24/4295214.aspx

 

Last edited Mar 15, 2011 at 8:24 AM by dth, version 1

Comments

No comments yet.