首页 > 代码库 > 日历js插件

日历js插件

       因为做了一个培训管理模块,要有一个开始与结束培训时间。时间日期如果个用户手动输入的话,即使你要求了时间格式,但是用户可能还是会输错时间格式。所以想想,还是找了一个js日历插件。下面来介绍下我自己用的一点经验吧。

     第一步。先下载下来吧。地址:http://www.my97.net/dp/down/My97DatePickerBeta.zip

             下载下来你会看到一个示范页面和一个js文件夹。在示范页面中,讲解还是很清楚的,这个非常感谢前人啊。从页面介绍中不难发现该日历插件一直在更新,修正一些bug,也建议使用最新版本,此时我用的也是最新版本的。

     示范页面讲解很多,但是我们要用的只是第一二行的代码。如下:

      <script language="javascript" type="text/javascript" src="http://www.mamicode.com/My97DatePicker/WdatePicker.js"></script>

      <input class="Wdate" type="text" onClick="WdatePicker()">

            把该代码放到你需要日历的地方。注意修改js的指向路劲,修改为你自己的调用路径。js文件夹"My97DatePicker"你如果觉得长可以进行修改,但是不要修改该文件夹里的文件名。

  第二步。按实际需求进行修改。

    下载的示范页面日期是不含时分秒的日期,而如果需要,则可以通过配置来修改了。如:

      <script language="javascript" type="text/javascript" src="http://www.mamicode.com/__PUBLIC__/calendar/WdatePicker.js"></script>
      <input class="Wdate" type="text" onClick="WdatePicker({startDate:‘%y-%M-01 00:00:00‘,dateFmt:‘yyyy-MM-dd HH:mm:ss‘,alwaysUseStartDate:true})">

      加入红色标记一段,就能显示yyyy-MM-dd HH:mm:ss 的时间格式时间。具体其它可以参考:

               http://www.my97.net/dp/demo/index.htm

   第三步。清除不需要文件,进行瘦身。

            “My97DatePicker”文件夹中包含也多语言,以及皮肤设置等。如果我不需要这些,那么我就能去掉它。我就把lang语言包和开发包去掉了。skin是皮肤样式包,原本是去掉了,后来觉得不好看,又加上了。好了,js日历插件就讲完了。