1.解压后添加My97DatePicker文件夹

2.引入WdatePicker.js文件

日期控件My97DatePicker的使用.html



  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8" />
    5. 

  5. <title>日期控件My97DatePicker的使用</title>
    6. 

  6. <script type="text/javascript" src="js/My97DatePicker4.7.2/WdatePicker.js" ></script>
    7. 

  7. </head>
    8. 

  8. <body>
    9. 

  9. </body>
    10. 

  10. </html>


在使用该日期控件的文件中加入WdatePicker.js (仅这一个文件即可,其他文件会自动引入,请勿删除或改名)


3.在使用的标签上添加


日期控件My97DatePicker的使用.html




  1. <strong><!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8" />
    5. 

  5. <title>日期控件My97DatePicker的使用</title>
    6. 

  6. <script type="text/javascript" src="js/My97DatePicker4.7.2/WdatePicker.js" ></script>
    7. 

  7. </head>
    8. 

  8. <body>
    9. 

  9. <input type="text" onclick="WdatePicker()"  />
    10. 

  10. </body>
    11. 

  11. </html></strong>


效果图：




日期控件My97DatePicker的使用.html




  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8" />
    5. 

  5. <title>日期控件My97DatePicker的使用</title>
    6. 

  6. <script type="text/javascript" src="js/My97DatePicker4.7.2/WdatePicker.js" ></script>
    7. 

  7. </head>
    8. 

  8. <body>
    9. 

  9. <input type="text" onclick="WdatePicker()"  />
    10. 

  10. <input type="text" onclick="WdatePicker({startDate:'%y-%M-%d %h:%m:%s',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})"/>
    11. 

  11. </body>
    12. 

  12. </html>


效果图：




4.日期格式:(可以自定义显示格式)


y 将年份表示为最多两位数字。如果年份多于两位数，则结果中仅显示两位低位数。
yy 同上，如果小于两位数，前面补零。
yyy 将年份表示为三位数字。如果少于三位数，前面补零。
yyyy 将年份表示为四位数字。如果少于四位数，前面补零。
M 将月份表示为从 1 至 12 的数字
MM 同上，如果小于两位数，前面补零。
MMM 返回月份的缩写 一月 至 十二月 (英文状态下 Jan to Dec) 。
MMMM 返回月份的全称 一月 至 十二月 (英文状态下 January to December) 。
d 将月中日期表示为从 1 至 31 的数字。
dd 同上，如果小于两位数，前面补零。
H 将小时表示为从 0 至 23 的数字。
HH 同上，如果小于两位数，前面补零。
m 将分钟表示为从 0 至 59 的数字。
mm 同上，如果小于两位数，前面补零。
s 将秒表示为从 0 至 59 的数字。
ss 同上，如果小于两位数，前面补零。
w 返回星期对应的数字 0 (星期天) - 6 (星期六) 。
D 返回星期的缩写 一 至 六 (英文状态下 Sun to Sat) 。
DD 返回星期的全称 星期一 至 星期六 (英文状态下 Sunday to Saturday) 。
W 返回周对应的数字 (1 - 53) 。
WW 同上，如果小于两位数，前面补零 (01 - 53) 。


格式字符串 值
yyyy-MM-dd HH:mm:ss 2008-03-12 19:20:00
yy年M月 08年3月
yyyyMMdd 20080312
yyyy年M年d HH时mm分 2008年3月12日 19时20分
H:m:s 19:20:0
y年 8年
MMMM d, yyyy 三月 12, 2008


5.config.js配置皮肤


皮肤可以到官网下载


My97DatePicker目录下有个config.js,里面有段代码:




  1. var skinList =
    2. 

  2. [
    3. 

  3. {name:'default', charset:'UTF-8'},
    4. 

  4. {name:'whyGreen', charset:'UTF-8'}
    5. 

  5. ];


这就是皮肤列表,每个项有name和charset两个属性.
name 表示皮肤的名称,在配置的时候,skin属性只能是配置列表里面已有的项,否则将自动返回第一项
charset 表示对应皮肤目录下的css文件:datepicker.css所对应的编码格式
皮肤安装说明


分两步轻松实现:
1 将皮肤文件包拷贝到 skin 目录
2 打开 config.js 配置皮肤列表


6、常用功能及设置方法


参考自：http://jingyan.baidu.com/article/e6c8503c7244bae54f1a18c7.html


常用功能及设置方法.html




  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <title>常用功能及设置方法.html</title>
    6. 

  6. <script type="text/javascript" src="js/My97DatePicker4.7.2/WdatePicker.js" ></script>
    7. 

  7. </head>
    8. 

  8. <style>
    9. 

  9. ul li{
    10. 

  10. list-style-type:none;
    11. 

  11. border: 1px solid black;
    12. 

  12. width : 470px;
    13. 

  13. height: 320px;
    14. 

  14. display: inline-block;
    15. 

  15. margin: 10px;
    16. 

  16. }
    17. 

  17. </style>
    18. 

  18. <body>
    19. 

  19. <ul>
    20. 

  20. <li>
    21. 

  21. <h5>最简单配置</h5>
    22. 

  22. <input type="text" class="Wdate"  onfocus="WdatePicker({lang:'zh-cn'})"  />
    23. 

  23. </li>
    24. 

  24. <li>
    25. 

  25. <h5>显示年：dateFmt:'yyyy'</h5>
    26. 

  26. <input type="text" class="Wdate"  onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy'})"  />
    27. 

  27. </li>
    28. 

  28. <li>
    29. 

  29. <h5>显示年月：dateFmt:'yyyyMM'</h5>
    30. 

  30. <input type="text" class="Wdate"  onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyyMM'})"  />
    31. 

  31. </li>
    32. 

  32. <li>
    33. 

  33. <h5>显示年月日：dateFmt:'yyyyMMdd'</h5>
    34. 

  34. <input type="text" class="Wdate"  onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyyMMdd'})"  />
    35. 

  35. </li>
    36. 

  36. <li>
    37. 

  37. <h5>显示年月日时分秒：dateFmt:'yyyyMMdd HH:mm:ss'</h5>
    38. 

  38. <input type="text" class="Wdate"  onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyyMMdd HH:mm:ss'})"  />
    39. 

  39. </li>
    40. 

  40. <li>
    41. 

  41. <h5>格式化:年月日时分秒：dateFmt:'yyyy年MM月dd日 HH时:mm分:ss秒'</h5>
    42. 

  42. <input type="text" class="Wdate" style="width: 400px;display: inline-block;"
    43. 

  43. onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy年MM月dd日 HH时:mm分:ss秒'})"  />
    44. 

  44. </li>
    45. 

  45. <li>
    46. 

  46. <h5>设置只读：readOnly:true</h5>
    47. 

  47. <input type="text" class="Wdate"  onfocus="WdatePicker({lang:'zh-cn',readOnly:true})"  />
    48. 

  48. </li>
    49. 

  49. <li>
    50. 

  50. <h5>隐藏清空按钮：isShowClear:false</h5>
    51. 

  51. <input type="text" class="Wdate"  onfocus="WdatePicker({lang:'zh-cn',isShowClear:false})"  />
    52. 

  52. </li>
    53. 

  53. <li>
    54. 

  54. <h5>设置今天为最小日期：minDate:new Date()</h5>
    55. 

  55. <input type="text" class="Wdate"  onfocus="WdatePicker({lang:'zh-cn',minDate:new Date()})"  />
    56. 

  56. </li>
    57. 

  57. <li>
    58. 

  58. <h5>设置今天为最大日期：maxDate:new Date()</h5>
    59. 

  59. <input type="text" class="Wdate"  onfocus="WdatePicker({lang:'zh-cn',maxDate:new Date()})"  />
    60. 

  60. </li>
    61. 

  61. <li>
    62. 

  62. <h5>设置明天为最小日期：minDate:'%y-%M-{%d+1}'</h5>
    63. 

  63. <input type="text" class="Wdate"  onfocus="WdatePicker({lang:'zh-cn',minDate:'%y-%M-{%d+1}'})"  />
    64. 

  64. </li>
    65. 

  65. <li>
    66. 

  66. <h5>只能选择本月第一天到最后一天：minDate:'%y-%M-01',maxDate:'%y-%M-%ld'</h5>
    67. 

  67. <input type="text" class="Wdate"  onfocus="WdatePicker({lang:'zh-cn',minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})"  />
    68. 

  68. </li>
    69. 

  69. <li>
    70. 

  70. <h5>开始日期不能大于结束日期，且都不能大于今天：</h5>
    71. 

  71. <!--开始日期-maxDate:'#F{$dp.$D(\'endDate\')||\'new Date()\'}'
    72. 

  72. 结束日期-minDate:'#F{$dp.$D(\'startDate\')}',maxDate:new Date()-->
    73. 

  73. <input id="startDate" type="text" class="Wdate"
    74. 

  74. onfocus="WdatePicker({lang:'zh-cn',maxDate:'#F{$dp.$D(\'endDate\')||\'new Date()\'}'})"  />
    75. 

  75. <input id="endDate" type="text" class="Wdate"
    76. 

  76. onfocus="WdatePicker({lang:'zh-cn',minDate:'#F{$dp.$D(\'startDate\')}',maxDate:new Date()})"  />
    77. 

  77. </li>
    78. 

  78. <li>
    79. 

  79. <h5>设置显示周</h5>
    80. 

  80. <input type="text" class="Wdate" onfocus="WdatePicker({lang:'zh-cn',isShowWeek:true})"  />
    81. 

  81. </li>
    82. 

  82. </ul>
    83. 

  83. </body>
    84. 

  84. </html>


效果截图：
































附件源码：


下载地址：https://gitee.com/KingXin666/My97DatePickerDemo
												


											
日期控件My97 DatePicker 的使用的更多相关文章
	

    
						
  1. 做最好的日期控件,My97 DatePicker 4.8 Beta4
		
    4.8更新的内容 [新增]preload预载选项 [新增]时分秒选择菜单的定制功能,详见hmsMenuCfg属性[beta4] [新增]$dp.unbind函数,允许用户手动接触日期控件绑定[beta ...
    
		
    2. 
								
  2. js中的日期控件My97 DatePicker
		
    使用WdatePicker插件来渲染日期类型的页面. 以下代码用到的属性有: isShowClear是否显示清空按钮 skin皮肤的样式 readOnly是否只读 maxDate:最大的选择时间 &l ...
    
		
    3. 
						
  3. 日期控件——my97
		
    一.官网 http://www.my97.net/index.asp 下载: //下文已更新与bootstrap样式的结合 二.demo演示 实际使用时请注意文件引入的实际位置: [补充] 数据库字段 ...
    
		
    4. 
						
  4. js中的日期控件My97 DatePicker---那些打酱油的日子
		
    使用WdatePicker插件来渲染日期类型的页面. 以下代码用到的属性有: isShowClear是否显示清空按钮 skin皮肤的样式 readOnly是否只读 maxDate:最大的选择时间 &l ...
    
		
    5. 
						
  5. angular--bootstrap实例日期控件【datepicker】
		
    head部分: <!--Bootstrap--> <link rel="stylesheet" href="/supProdom/script/boot ...
    
		
    6. 
						
  6. bootstrop 日期控件 datepicker被弹出框dialog覆盖的解决办法
		
    筒子们在使用bootstrap的日期控件(datepicker , 现在官网提供的名称叫 datetimepicker)时可能会遇到如上图的问题这是啥原因造成的呢? 答案很简单时输出的优先级造成的(z ...
    
		
    7. 
						
  7. 【日期控件】JQueryUI的datepicker日期控件
		
    在输入日期的时候我们经常需要日期控件,jQueryUI的datapicker就是一个很好的日期控件. 1.简单的datepicker控件 目录结构:(要将images图片放到css目录下面)
    
		
    8. 
						
  8. WEB日期控件
		
    http://www.cnblogs.com/jiangbei/p/7270788.html 日期控件——my97 <div class="form-group">   ...
    
		
    9. 
						
  9. my97日期控件
		
    http://www.seabroad.cn/cq/datepick/demo.htm 但是由于某些原因,担心这个网站不稳定,所以复制一下 一. 简介 1. 简介 目前的版本是:4.0 Prerele ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. win系统 Mysql 5.7.19 zip 安装
			
    1 安装运行环境 VC++ 2013 2 下载 https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.19-winx64.zip 3 解压 4 ...
    
			
    2. 
						
  2. Homebrew&Mongod
			
    Homebrew官网:http://brew.sh Homebrew installs the stuff you need that Apple didn't Homebrew的安装非常简单,打开终 ...
    
			
    3. 
						
  3. HDU2717-Catch That Cow （BFS入门）
			
    题目传送门:http://acm.hdu.edu.cn/showproblem.php?pid=2717 Catch That Cow Time Limit: 5000/2000 MS (Java/O ...
    
			
    4. 
						
  4. Spring Boot 揭秘与实战（五） 服务器篇 - Tomcat 启用 HTTPS
			
    文章目录 1. 生成证书 2. 配置 HTTPS 支持 3. 启动与测试 4. 源代码 Spring Boot 内嵌的 Tomcat 服务器可以启用 HTTPS 支持. 生成证书 使用第三方 CA 证 ...
    
			
    5. 
						
  5. 启发式搜索A-Star算法   【寻找  最短路径 算法】【地理几何位置  可利用的情况】
			
    在处理最短路径问题时,有一种启发式算法是我们应该了解的,由于其有着优秀的探索效率在各自现实项目中多有应用,它就是 A-star 算法,或  A*  算法. 个人观点: A*  算法并不保证找到的路径一 ...
    
			
    6. 
						
  6. C高级第三次作业
			
    C高级第三次作业(1) 6-1 输出月份英文名 1.设计思路 (1)算法: 第一步:定义整型变量n,字符指针s,输入一个数赋给n. 第二步:调用函数getmonth将值赋给s. 第三步:在函数getm ...
    
			
    7. 
						
  7. Flask中的Templates
			
    1.什么是模板 模板 , 在Flask 中就是允许响应给用户看的网页 在模板中,允许包含"占位变量"来表示动态的内容 模板最终也会被解析成字符串再响应给客户端,这一过程通常称为&q ...
    
			
    8. 
						
  8. 用纯JS实现，点击一个列表时，输出对应的索引（不能用JQuery哦）
			
    你运行一下代码会发现,无论你点击哪个列表,控制台都是输出10.这是因为var声明的变量是函数作用域的,而不是块级作用域的.也就是说,for循环10次,每次都是改变同一个i,所以它的值会从0一直加到10 ...
    
			
    9. 
						
  9. apache 和 php 整合、apache配制虚拟机
			
    如何 把apache 和 php 整合起来 ?   (关闭防火墙或在防火墙内添加80端口,关闭selinux)   修改:apache的配制文件:/usr/local/apache2.4/conf/h ...
    
			
    10. 
						
  10. Spark各个版本新特性
			
    后续会添加spark生态系统中各个组件的兼容支持情况... Spark2.0.0 * 2016-07-27正式发布 * 它是2.x版本线的上的第一个版本. * 300位contributors的超过2 ...
    
			
    11.