My97DatePicker组件使用方法

一. My97DatePicker组件的官网如下:

http://www.my97.net/

二.注意事项

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

2.各目录及文件的用途:

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文件来修改样式

由于工作需求,做了一个平面的日期,input触发一个浮层的,在浮层上显示日历,运行截图如下:


点击这个框时候,弹出一个全频道弹框如下:


宽度我做了修改,在datepicker.css中

,修改了WdateDiv类的宽度。

具体功能如下:


下面贴上原代码:

<input type="text" id="mydate97" readOnly="true">
<div class="white_bg">
   <div id="div1"></div>
</div>

.white_bg{background:#f2f2f2;position:fixed;height:100%;width:100%;display:none;left:0;bottom:0;}

  $('#mydate97').click(function(){
     $('.white_bg').slideDown();
  });
  
  WdatePicker({eCont:'div1',minDate:'%y-%M-%d',disabledDays:[0,6],disabledDates:['2016-02-07','2016-02-08','2016-02-09','2016-02-10','2016-02-11','2016-02-12','2016-02-13',],onpicked:function(dp){  //doubleCalendar:true   为双日期显示
    var youchoose = dp.cal.getDateStr();
   $('#mydate97').val(youchoose);
   $('.white_bg').slideUp();
  }})



你可能感兴趣的:(my97datepicker)