My97DatePicker日期插件的使用

最新推荐文章于 2024-10-18 12:24:20 发布

SunnyJava1009

最新推荐文章于 2024-10-18 12:24:20 发布

阅读量2k

点赞数 1

分类专栏： web前端文章标签： datepicker my97 日期控件

本文链接：https://blog.youkuaiyun.com/u010427935/article/details/64443888

版权

web前端专栏收录该内容

9 篇文章

订阅专栏

My97DatePicker日期插件的使用

一、简介
1. 简介
目前的版本是:4.8
2. 注意事项
My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名
My97DatePicker.htm是必须文件,不可删除(4.8以后不存在此文件)
各目录及文件的用途:
WdatePicker.js 配置文件,在调用的地方仅需使用该文件,可多个共存,以xx_WdatePicker.js方式命名
config.js 语言和皮肤配置文件,无需引入(4.8以后合并入WdatePicker.js)
calendar.js 日期库主文件,无需引入
My97DatePicker.htm 临时页面文件,不可删除(4.8以后不存在此文件)
目录lang 存放语言文件,你可以根据需要清理或添加语言文件
目录skin 存放皮肤的相关文件,你可以根据需要清理或添加皮肤文件包
当WdatePicker.js里的属性:$wdate=true时,在input里加上class=”Wdate”就会在选择框右边出现日期图标,如果您不喜欢这个样式,可以把class=”Wdate”去掉,另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式
3. 支持的浏览器
IE 6.0+ , Firefox 2.0+ , Chrome, Opera 9.5+ , Safari 3.0+
二、使用说明
将My97DatePicker整个目录包,放入您的项目的相应目录下
My97DatePicker目录下各文件的作用:
1.1 My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名
1.2 各目录及文件的用途:
WdatePicker.js 配置文件,在调用的地方仅需使用该文件,可多个共存,以xx_WdatePicker.js方式命名
calendar.js 日期库主文件,无需引入
目录lang 存放语言文件,你可以根据需要清理或添加语言文件
目录skin 存放皮肤的相关文件,你可以根据需要清理或添加皮肤文件包
主要代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 只需要引入一个js文件即可，只要不破坏插件的目录结构余文件会自动关联读取到 -->
<script type="text/javascript" src="<%=request.getContextPath()%>/res/js/lib/My97DatePicker/WdatePicker.js"></script>
<title>日期插件测试</title>
</head>
<body>

    普通调用:<input type="text" onclick="WdatePicker();"/><br />
    图标调用：<input type="text" id="js-date-img"> 
          <img onclick="WdatePicker({el:'js-date-img'})" src="<%=request.getContextPath()%>/res/js/lib/My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle">
    <!-- 需要传入id --><br/>
    周(字)显示调用:<input type="text" onfocus="WdatePicker({isShowWeek:true})" /><br/>

    设置为只读、周末高亮(红色)显示、皮肤设置:<input type="text" onfocus="WdatePicker({isShowWeek:true,readOnly:true,highLineWeekDay:true,skin:'whyGreen'})" /><br/>


</body>
</html>