日期控件My97DatePicker-4.8的配置与使用演示

My97DatePicker，是一款非常实用的日期控件，这款日期控件不依赖于任何库，可以独立使用，支持独立的设置日期的格式，控制默认日期，控制日期显示范围，并且支持多种语言，还有非常多的日期皮肤样式，非常的小巧实用。

今天我要说的是：My97DatePicker-4.8版本，只需要引入WdatePicker.css和WdatePicker.js即可使用。

关于本博客的源代码及My97DatePicker库（里面有全皮肤），下载地址：

文件下载地址

话不多说，我们代码演示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>My97DatePicker日期控件</title><link rel="stylesheet" href="My97DatePicker-4.8/skin/WdatePicker.css">
</head><body><h6>日期有自动纠错的功能，例如输入1997-02-29，就会转换成1997-03-01，因为1997年不是闰年</h6>日期完全展示(获取焦点触发)：<input name="start_time" type="text" class="Wdate" onfocus="WdatePicker()"><br><br>日期完全展示（点击日历图标触发）：<input id="d12" type="text"/><img onclick="WdatePicker({el:'d12'})" src="My97DatePicker-4.8/skin/datePicker.gif" width="16" height="22" align="absmiddle"><br><br>只展示年份：<input name="start_time" type="text" class="Wdate" onfocus="WdatePicker({dateFmt: 'yyyy'})"><br><br>只展示月份：<input name="start_time" type="text" class="Wdate" onfocus="WdatePicker({dateFmt: 'M'})"><br><br>只展示天：<input name="start_time" type="text" class="Wdate" onfocus="WdatePicker({dateFmt: 'd'})"><br><br><!-- 周算法不同的地方有一些差异常见算法有两种 1. ISO8601:规定第一个星期四为第一周,默认值2. MSExcel:1月1日所在的周 -->显示第几周(高亮显示周末)：<input id="d121" type="text" onclick="WdatePicker({isShowWeek:true,highLineWeekDay:true})" /><br><br>显示星期几：<input type="text" id="d245" onclick="WdatePicker({dateFmt:'DD, MMMM d, yyyy'})" class="Wdate"/><br><br>设置起始日期2018-05-01（即日历默认在那一天）：<input type="text" id="d221" onclick="WdatePicker({startDate:'2018-05-01'})"/><br><br>年月日使用当年当月的1日,时分秒使用00:00:00作为起始时间：<input type="text" id="d233" onclick="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})"/><br><br>日期限制，限制日期的范围是 2006-09-10到2008-12-20：<input id="d411" class="Wdate" type="text" onclick="WdatePicker({skin:'whyGreen',minDate:'2006-09-10',maxDate:'2008-12-20'})"/><br><br>以“X年X月X日X时X分X秒”的格式来显示日期：<input type="text" id="d241" onclick="WdatePicker({dateFmt:'yyyy年MM月dd日 HH时mm分ss秒'})" class="Wdate" style="width:300px"/><br><br>日期转换：自动把X年X月X日这样的日期，转换成系统可识别的x-x-x：<input id="d244" type="text" class="Wdate" onclick="WdatePicker({dateFmt:'yyyy年M月d日',vel:'d244_2'})"/><input id="d244_2" type="text" /><br><br>双月日历：<input class="Wdate" type="text" onclick="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd'})"/><br><br><br>禁用清空按钮：<input class="Wdate" type="text" id="d15" onclick="WdatePicker({isShowClear:false,readOnly:true})" /><br><br><br>繁体中文:<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'})" /><br><br><br>皮肤搭配（皮肤可下载）:<input id="d322" class="Wdate" type="text" onfocus="WdatePicker({skin:'default'})" /><input id="d322" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen'})" /><input id="d322" class="Wdate" type="text" onfocus="WdatePicker({skin:'blueFresh'})" /><input id="d322" class="Wdate" type="text" onfocus="WdatePicker({skin:'twoer'})" />
</body>
<script language="javascript" type="text/javascript" src="My97DatePicker-4.8/WdatePicker.js"></script></html>

这是一段完整的代码，复制下来，改变文件的引入路径为本机的路径即可使用，就是这么爽快。
每一段代码我都附上了解释，一目了然，想实现是什么效果，直接运行查看即可。

附上这些代码的运行截图：

当然这些都是我们可能经常会使用的，如果想更深入的学习，可以去查看My97DatePicker的官方文档：

My97DatePicker官方文档

日期控件My97DatePicker-4.8的配置与使用演示相关推荐

日期控件My97DatePicker的使用
一. 简介 1. 简介目前的版本是:4.8 文档&演示:http://www.my97.net/dp/demo/index.htm 下载:http://www.my97.net/dp/dow ...
在jsp页面中使用My97DatePicker日期控件
直接看图看代码! My97DatePicker日期控件是一个功能非常强大的日期插件,功能丰富,调用方便,配置也很灵活!至于该日期插件为什么要叫My97DatePicker这个名字呢?这个你们要去问作者 ...
MVC模式下My97DatePicker日期控件引用注意事项
My97DatePicker日期控件之前在用webform模式开发的时候,只要 <script language="javascript" type="text/j ...
My97DatePicker日期控件的使用
本文演示如何在MyEclipse项目中使用My97DatePicker日期控件 1.下载My97DatePicker日期控件, My97DatePicker日期控件下载地址 2.在MyEclipse项 ...
My97DatePicker（WdatePicker）日期控件用法
<code class="language-html">WdatePicker[html] view plain copy print? <meta http-e ...
只需两步带你轻松使用My97DatePicker日期控件
1.下载控件包.页面导入js 网站地址: My97日期控件官方网站 My97 DatePickerMy97日期控件官方网站 My97 DatePicker 1.点击下方按钮 2.选择下载压缩包(这 ...
时间控件My97DatePicker相关配置
今天说一下自己用到的时间控件My97DatePicker. My97日期控件.一个非常好用的日期控件,功能非常优秀,绝对是你一直想要的日期控件.官网地址http://www.my97.net/dp/i ...
My97DatePicker日期控件，强大的日期控件，想怎么控制时间就怎么控制
最近用到My97DatePicker日期控件,深入之中,感觉到它的强大之处. 就写个小例子吧! 要求:前后日期限制在一个月之内,且前边日期不能大于后边日期.用My97DatePicker自带的当然不能 ...
Wdatepicker日期控件的使用指南
示例2-3-1 起始日期简单应用示例2-3-2 alwaysUseStartDate属性应用示例2-3-3 使用内置参数示例 2-4-1: 年月日时分秒示例 2-4-2 时分秒示例 2-4- ...

日期控件My97DatePicker-4.8的配置与使用演示

日期控件My97DatePicker-4.8的配置与使用演示

日期控件My97DatePicker-4.8的配置与使用演示相关推荐

最新文章

热门文章