JS时间插件WdatePicker

JS时间插件WdatePicker

• 网站：http://www.my97.net/demo/index.htm

• 常用链接：
  自定义格式
  动态变量表

• 使用WdatePicker需要下载一个My97DatePicker包，并且包中的目录结构不能破坏，也不能改名。

• WdatePicker.js 是主要配置文件，在调用的地方使用该文件。

• 常规功能

  • 支持多种元素：<input><img><div>等，可通过onclick来触发函数。

  <!--直接由input标签触发-->
  <input id="d1" type="text" onclike="WdatePicker()"/> 
  <!--通过标签触发-->
  <label onclick="WdatePicker({el:'contTimeBegin'})">合同开始时间：</label>
  <input id="contTimeBegin" type="text"">
  

  • 支持周显示

  <input id="d2" type="text" οnclick="WdatePicker({isShowWeek:true})"
  

  • 支持只读

  <input id="d2" type="text" οnclick="WdatePicker({readOnly:true})"
  

  • 其他功能

  WdatePicker({
    <!--自定义弹出位置，相对坐标，单位px-->
    position:{left:100,top:50},
    <!--是否显示清空、确定、今天按钮，默认是true-->
    isShowClear:false,
    isShowOK:false,
    isShowToday:false,
    <!--自定义星期的第一天，0-6-->
    firstDayOfWeek:1,
    <!--显示双月，弹出两个月的日期框-->
    doubleCalendar: true,
    <!--设置日期显示格式，值为String，可根据需要自由组合-->
    dateFmt: 'yyyy-MM-dd',
    dateFmt:'yyyy年MM月dd日 HH时mm分ss秒'
    <!--计算机可识别的，真正的日期，推荐使用默认-->
    realDateFmt: 'yyyy-MM-dd',
    <!--弹出框的起始日期，搭配alwaysUseStartDate使用，能保持每次点开都是起始日期-->
    startDate:'2014-05-03',
    alwaysUseStartDate:true,
    <!--最大日期，最小日期，值为String类型,符合realDate的格式-->
    maxDate: '2022-02-01'
    minDate: '2020-01-01'
    <!--禁用周几,即不可选，值为数组类型，0-6-->
    disabledDays:[0,3,6],
    <!--禁用日期，值为数组类型，可以使用正则表达式。例子禁用了2020-1-1之前的日期以及2008年2月29日-->
    disabledDates:['^19','2008-02-29'],
    <!--将有效日期和无效日期互换,对特殊天不起作用-->
    opposite: true
    <!--高亮日期，高亮星期几，值为数组类型-->
    specialDates: ['2021-03-05'],
    specialDays: [0,1],
  })
  实例：
  <!--限制日期的范围是 2008年2月 到 2008年10月-->
  <input type="text" class="Wdate" id="d413" onclick="WdatePicker({dateFmt:'yyyy年M月',minDate:'2008-2',maxDate:'2008-10'})"/>
  <!--将本月可用日期分隔成五段 分别是: 1-3 8-10 16-24 26,27 29-月末-->
  <input id="d453" type="text" class="Wdate" onclick="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld',disabledDates:['0[4-7]$','1[1-5]$','2[58]$']})"/>
  <!--前面的日期+3天 不能大于 后面的日期-->
  <input type="text" class="Wdate" id="d4321" onclick="WdatePicker({maxDate:'#F{$dp.$D(\'d4322\',{d:-3});}'})"/>
  <input type="text" class="Wdate" id="d4322" onclick="WdatePicker({minDate:'#F{$dp.$D(\'d4321\',{d:3});}'})"/>
  

• 内置函数和属性

  • $dp.show()    显示日期选择框
  • $dp.hide()    隐藏日期选择框
  • $dp.$(id[string]对象的ID)    选择元素，相当于document.getElementById
  • $dp.$D(id[string]对象的ID, arg[object]日期差量)    将id对应的日期框中日期，加上定义的日期差量后，返回real格式的日期字符串
  • $dp.$DV(v[string]日期字符串, arg[object]日期差量)    将传入的字符串加上日期差量，返回real格式的字符串

  – 以下只在自定义函数中有效

  • $dp.cal.getP(p[string]属性yMdHmswWD, f[string]format格式字符串)    返回指定属性被格式化后的值，在事件中返回选择前的值
  • $dp.cal.getNewP(p[string]属性yMdHmswWD, f[string]format格式字符串)    用法同上，在事件中返回选择后的值
  • $dp.cal.getDateStr(f[string]格式字符串)    返回被格式化后的日期字符串，参数默认为dateFmt，在事件中返回选择前的值
  • $dp.cal.getDateStr(f[string]格式字符串)    用法同上，在事件中返回选择后的值

  – 属性

  • $dp.cal.date.yMdHms 在事件中返回选择前的日期对象
  • $dp.cal.newdate.yMdHms 在事件中返回选择后的日期对象

• 自定义事件

  • 有三个重要指针：this->文本框，dp->$dp，dp.cal->日期控件对象。
  • 注：函数原型需为 function(dp){}，在函数内才能使用dp

  <!--自定义事件,值为function，-->
  onpicking onpicked
  onclearing oncleared
  ychanging ychanged
  Mchanging Mchanged
  dchanging dchanged
  Hchanging Hchanged
  mchanging mchanged
  schanging schanged  
  
  <!--选择第一个日期后，第二个日期框自动弹出，且时间有联动-->
  <input id="d5221" class="Wdate" type="text" onclick="var d5222=$dp.$('d5222');WdatePicker({onpicked:function(){d5222.click();},maxDate:'#F{$dp.$D(\'d5222\')}'})"/>
  <input id="d5222" class="Wdate" type="text" onclick="WdatePicker({minDate:'#F{$dp.$D(\'d5221\')}'})"/>
  
  <!--将选择的值拆分到文本框-->
  <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>
  

• 动态变量表

格式	说明
%y	当前年
%M	当前月
%d	当前日
%d	本月最后一天
%H	当前时
%m	当前分
%s	当前秒
{}	运算表达式,如:{%d+1}:表示明天
#F{}	{}之间是函数可写自定义JS代码