JS日历插件 - My97 DatePicker用法详解

最新推荐文章于 2024-01-05 09:31:47 发布

dengla6847

最新推荐文章于 2024-01-05 09:31:47 发布

阅读量840

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lguow/articles/9132136.html

版权

本文详细介绍了My97 DatePicker的使用方法，包括注意事项、浏览器支持、功能示例、多语言和自定义皮肤、日期范围限制、自定义事件、配置说明以及如何使用。它支持多种调用模式、日期范围限制、自定义格式等功能，并提供多语言和皮肤支持。My97 DatePicker适用于需要日期选择和管理的JavaScript应用。

摘要由CSDN通过智能技术生成

一、简介

1. 注意事项

（1）My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名；

（2）各目录及文件的用途:

WdatePicker.js 配置文件,在调用的地方仅需使用该文件,可多个共存,以xx_WdatePicker.js方式命名

config.js 语言和皮肤配置文件,无需引入(4.8以后合并入WdatePicker.js)

calendar.js 日期库主文件,无需引入

目录lang 存放语言文件,你可以根据需要清理或添加语言文件

目录skin 存放皮肤的相关文件,你可以根据需要清理或添加皮肤文件包

（3）当WdatePicker.js里的属性:$wdate=true时,在input里加上class="Wdate"就会在选择框右边出现日期图标,如果您不喜欢这个样式,可以把class="Wdate"去掉,另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式

2. 支持的浏览器

IE 6.0+ , Firefox 2.0+ , Chrome, Opera 9.5+ , Safari 3.0+

注意:IE 8/9/10/11是完美支持的,如果你在IE上使用遇到问题,请与我取得联系,务必附上能再现你的问题的纯HTML代码包

二. 功能及示例

1. 常规功能

（1）支持多种调用模式

除了支持常规在input单击或获得焦点调用外,还支持使用其他的元素如:

等触发WdatePicker函数来调用弹出日期框

（2）下拉,输入,导航选择日期

年月时分秒输入框都具备以下三种特性

a. 通过导航图标选择

b. 直接使用键盘输入数字

c. 直接从弹出的下拉框中选择

另:年份输入框有智能提示功能,当用户连续点击同一个导航按钮5次时,会自动弹出年份下拉框

（3）支持周显示（控制参数——isShowWeek：true/false）

可以通过配置isShowWeek属性决定是否限制周,并且在返回日期的时候还可以通过自带的自定义事件和API函数返回选择的周

（4）只读开关,高亮周末功能

设置readOnly属性 true 或 false 可指定日期input框是否只读

设置highLineWeekDay属性 ture 或 false 可指定是否高亮周末

（5）操作按钮自定义

清空按钮和今天按钮,可以根据需要进行自定义,它们分别对应 isShowClear 和 isShowToday 默认值都是true

（6）自动选择显示位置

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

（7）自定义弹出位置

当控件处在页面边界时,它会自动选择显示的位置.此外你还可以使用position参数对弹出位置做调整.

（8）自定义星期的第一天(控制参数——firstDayOfWeek)

各个国家的习惯不同,有些喜欢以星期日作为第一天,有些以星期一作为第一天.

相关属性:firstDayOfWeek: 可设置 0 - 6 的任意一个数字,0:星期日 1:星期一以此类推

2. 特色功能

（1）平面显示（控制参数——eCont）

日期控件支持平面显示功能,只要设置一下eCont属性就可以把它当作日历来使用了,无需触发条件,直接显示在页面上

（2）支持多种容器

除了可以将值返回给input以外,还可以通过配置el属性将值返回给其他的元素(如:textarea,div,span)等,带有innerHTML属性的HTML元素

（3）起始日期功能（控制参数——startDate，alwaysUseStartDate）

注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致

有时在项目中需要选择生日之类的日期,而默认点开始日期都是当前日期,导致年份选择非常麻烦,你可以通过起始日期功能加上配置alwaysUseStartDate属性轻松解决此类问题

（4）自定义格式（控制参数——skin，dateFmt，vel）

yMdHmswW分别代表年月日时分秒星期周,你可以任意组合这些元素来自定义你个性化的日期格式.

格式	说明
y	将年份表示为最多两位数字。如果年份多于两位数，则结果中仅显示两位低位数。
yy	同上，如果小于两位数，前面补零。
yyy	将年份表示为三位数字。如果少于三位数，前面补零。
yyyy	将年份表示为四位数字。如果少于四位数，前面补零。
M	将月份表示为从 1 至 12 的数字
MM	同上，如果小于两位数，前面补零。
MMM	返回月份的缩写一月至十二月 (英文状态下 Jan to Dec) 。
MMMM	返回月份的全称一月至十二月 (英文状态下 January to December) 。
d	将月中日期表示为从 1 至 31 的数字。
dd	同上，如果小于两位数，前面补零。
H	将小时表示为从 0 至 23 的数字。
HH	同上，如果小于两位数，前面补零。
m	将分钟表示为从 0 至 59 的数字。
mm	同上，如果小于两位数，前面补零。
s	将秒表示为从 0 至 59 的数字。
ss	同上，如果小于两位数，前面补零。
w	返回星期对应的数字 0 (星期天) - 6 (星期六) 。
D	返回星期的缩写一至六 (英文状态下 Sun to Sat) 。
DD	返回星期的全称星期一至星期六 (英文状态下 Sunday to Saturday) 。
W	返回周对应的数字 (1 - 53) 。
WW	同上，如果小于两位数，前面补零 (01 - 53) 。