My97DatePicker时间选择器

 

My97DatePicker时间选择器

一. 简介内置函数

 

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

   

  $dp.cal.getP 用法详见内置函数

   

• 只读开关,高亮周末功能 属性表

   

   

   

  2. 特色功能 内置函数

   

• 支持多种容器 自定义和动态切换皮肤

   

  示例 2-4-3 年月

   

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

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

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

  真实的日期值是:

  <input id="d244" type="text" class="Wdate" onfocus="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" onfocus="WdatePicker()"/>

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

  whyGreen皮肤: skin:'whyGreen'

  <input id="d322" class="Wdate" type="text" onfocus="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 onclick="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

   

• 配置全局默认值技术支持

   

  如果找不到答案,您可以直接在blog留言,或者通过下面的联系方式与我联系

  七. 联系My97http://my97.cnblogs.com

  * MAIL: [email protected]

  * 有问题在我blog留言或给我Email吧,最好先仔细看说明,很多问题都是因为没有仔细看说明导致的

   

  © 2008 My97 All Rights Reserved