My97DatePicker时间选择器

最新推荐文章于 2021-03-06 18:43:37 发布

积跬步DEV

最新推荐文章于 2021-03-06 18:43:37 发布

阅读量9.6k

点赞数

文章标签： input function string class null 语言

本文链接：https://blog.csdn.net/janronehoo/article/details/6477485

版权

My97DatePicker时间选择器

一. 简介内置函数

下拉,输入,导航选择日期自定义事件

$dp.cal.getP 用法详见内置函数
只读开关,高亮周末功能属性表

2. 特色功能内置函数
支持多种容器自定义和动态切换皮肤

示例 2-4-3 年月

<input type="text" id="d243" οnfοcus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy年MM月'})" class="Wdate"/>

示例 2-4-4 取得系统可识别的日期值(重要)

类似于 1999年7月5日这样的日期是不能够被系统识别的,他必须转换为能够识别的类型如 1999-07-05

真实的日期值是:

<input id="d244" type="text" class="Wdate" οnfοcus="WdatePicker({dateFmt:'yyyy年M月d日',vel:'d244_2'})"/>

<input id="d244_2" type="text" />

注意:在实际应用中,一般会把vel指定为一个hidden控件,这里是为了把真实值展示出来,所以使用文本框

关键属性: vel 指定一个控件或控件的ID,必须具有value属性(如input),用于存储真实值(也就是realDateFmt和realTimeFmt格式化后的值)
编辑功能语言配置

示例3-1 多语言示例

繁体中文:

<input id="d311" class="Wdate" type="text" onFocus="WdatePicker({lang:'zh-tw'})"/>

英文:

<input id="d312" class="Wdate" type="text" onFocus="WdatePicker({lang:'en'})"/>

简体中文:

<input id="d313" class="Wdate" type="text" onFocus="WdatePicker({lang:'zh-cn'})"/>

注意:默认情况lang='auto',即根据浏览器的语言自动选择语言.
自定义和动态切换皮肤立刻转到皮肤中心

通过skin属性,可以为每个日期控件单独配置皮肤,当然也可以通过WdatePicker.js配置全局的皮肤

皮肤列表和皮肤安装说明详见皮肤配置

示例3-2 皮肤演示

默认皮肤default: skin:'default'

<input id="d321" class="Wdate" type="text" οnfοcus="WdatePicker()"/>

注意:在WdatePicker里配置了skin='default',所以此处可省略,同理,如果你把WdatePicker里的skin配置成'whyGreen'那么在不指定皮肤的情况下都使用'whyGreen'皮肤了

whyGreen皮肤: skin:'whyGreen'

<input id="d322" class="Wdate" type="text" οnfοcus="WdatePicker({skin:'whyGreen'})"/>

注意:更多皮肤,请到皮肤中心下载

4. 日期范围限制动态变量表

示例4-5-6 #F{}也是可以使用的

本示例利用自定义函数随机禁用0-23中的任何一个小时

打开小时选择框,你会发现有一个小时被禁用的,而且每次禁用的小时都不同

<script>

function randomH(){

//产生一个随机的数字 0-23

var H = Math.round(Math.random() * 23);

if(H<10) H='0'+H;

//返回 '^' + 数字

return '^'+H;

}

</script>

<input type="text" class="Wdate" id="d456" onFocus="WdatePicker({dateFmt:'HH:mm:ss',disabledDates:['#F{randomH()}']})"/>
有效天与有效日期内置函数

示例5-2-2 使用onpicked实现日期选择联动

选择第一个日期的时候,第二个日期选择框自动弹出

日期从: 至

注意:下面第一个控件代码的写法

<input id="d5221" class="Wdate" type="text" onFocus="var d5222=$dp.$('d5222');WdatePicker({onpicked:function(){d5222.focus();},maxDate:'#F{$dp.$D(/'d5222/')}'})"/>

至

<input id="d5222" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(/'d5221/')}'})"/>

注意:$dp.$是一个内置函数,相当于document.getElementById

示例5-2-3 将选择的值拆分到文本框

年月日时分秒

<input type="text" id="d523_y" size="5"/> 年

<input type="text" id="d523_M" size="3"/> 月

<input type="text" id="d523_d" size="3"/> 日

<input type="text" id="d523_HH" size="3"/> 时

<input type="text" id="d523_mm" size="3"/> 分

<input type="text" id="d523_ss" size="3"/> 秒

<img οnclick="WdatePicker({el:'d523',dateFmt:'yyyy-MM-dd HH:mm:ss',onpicked:pickedFunc})" src="../../My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer"/>

<script>

function pickedFunc(){

$dp.$('d523_y').value=$dp.cal.getP('y');

$dp.$('d523_M').value=$dp.cal.getP('M');

$dp.$('d523_d').value=$dp.cal.getP('d');

$dp.$('d523_HH').value=$dp.cal.getP('H');

$dp.$('d523_mm').value=$dp.cal.getP('m');

$dp.$('d523_ss').value=$dp.cal.getP('s');

}

</script>

注意:el:'d523'中,如果你不需要d523这个框,你可以把他改成hidden,但是el属性必须指定

$dp.$和$dp.cal.getP都是内置函数
onclearing 和 oncleared 事件语言配置 skin string 'default' 皮肤名称默认自带 default和whyGreen两个皮肤

另外如果你的css够强的话,可以自己做皮肤

你可以参考皮肤配置
dateFmt string 'yyyy-MM-dd' 日期显示格式

你可以参考自定义格式
realDateFmt string 'yyyy-MM-dd' 计算机可识别的,真正的日期格式

无效日期设置(disabledDates),最大日期(maxDate),最小日期(minDate)以及快速日期都必须与它们相匹配

建议使用默认值
realTimeFmt string 'HH:mm:ss' realFullFmt string '%Date %Time' minDate string '1900-01-01 00:00:00' 最小日期(注意要与上面的real日期相匹配) maxDate string '2099-12-31 23:59:59' 最大日期(注意要与上面的real日期相匹配) startDate string '' 起始日期,既点击日期框时显示的起始日期

为空时,使用今天作为起始日期(默认值)

否则使用传入的日期作为起始日期(注意要与上面的real日期相匹配)

你可以参考起始日期示例
isShowWeek bool false 是否显示周

你可以参考周显示示例
highLineWeekDay bool true 是否高亮显示周六周日 isShowClear bool true 是否显示清空按钮 isShowToday bool true 是否显示今天按钮 isShowOthers bool true 为true时,第一行空白处显示上月的日期，末行空白处显示下月的日期,否则不显示 readOnly bool false 是否只读 errDealMode int 0 纠错模式设置可设置3中模式 0 - 提示 1 - 自动纠错 2 - 标记 autoPickDate bool null 为false时点日期的时候不自动输入,而是要通过确定才能输入

为true时即点击日期即可返回日期值

为null时(推荐使用) 如果有时间置为false 否则置为true
qsEnabled bool true 是否启用快速选择功能 quickSel Array null 快速选择数据,可以传入5个快速选择日期

注意:日期格式必须与 realDateFmt realTimeFmt realFullFmt 相匹配

你可以参考快速选择示例
disabledDays Array null 可以使用此功能禁用周日至周六所对应的日期

0至6 分别代表周日至周六

你可以参考无效天示例
disabledDates Array null 可以使用此功能禁用所指定的一个或多个日期

你可以参考无效日期示例
opposite bool false 默认为false, 为true时,无效天和无效日期变成有效天和有效日期

你可以参考有效天与有效日期示例
onpicking function null 此四个参数为事件参数

你可以参考自定义事件示例
onpicked function null onclearing function null oncleared function null