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. wx小程序 使用字体
			
    1.下载项目下的字体库 2.解压复制iconfont.css中的代码到,小程序 app.wxss 3.使用: //icon-begindate表示开始时间的图标 <text class=&quo ...
    
			
    2. 
						
  2. Electron_01
			
    1.通过 https://electron.atom.io/  下载  electron-v1.4.15-win32-x64.zip 之后 2.通过 asar pack “你的项目文件夹” app.a ...
    
			
    3. 
						
  3. HDU 6075 Questionnaire  17多校4 水题
			
    Problem Description In order to get better results in official ACM/ICPC contests, the team leader co ...
    
			
    4. 
						
  4. [转]An Intuitive Explanation of Convolutional Neural Networks
			
    An Intuitive Explanation of Convolutional Neural Networks https://ujjwalkarn.me/2016/08/11/intuitive ...
    
			
    5. 
						
  5. https://stackoverflow.com/questions/40949967/running-storm-from-intellij-nimbus-error
			
    https://stackoverflow.com/questions/40949967/running-storm-from-intellij-nimbus-error 0down votefavo ...
    
			
    6. 
						
  6. 安装最新nginx
			
    另外:http://nginx.org/en/linux_packages.html#mainline https://blog.csdn.net/hiram/article/details/5178 ...
    
			
    7. 
						
  7. [LeetCode&Python] Problem 167. Two Sum II - Input array is sorted
			
    Given an array of integers that is already sorted in ascending order, find two numbers such that the ...
    
			
    8. 
						
  8. 改变html中的内容
			
    $("#id").html()            获取内容 $("#id").html(xiugai)    修改内容
    
			
    9. 
						
  9. 软工实践——结对作业2【wordCount进阶需求】
			
    附录: 队友的博客链接 本次作业的博客链接 同名仓库项目地址 一.具体分工 我负责撰写爬虫爬取信息以及代码整合测试,队友子恒负责写词组词频统计功能的代码. 二.PSP表格 PSP2.1 Persona ...
    
			
    10. 
						
  10. freemarker的template用法
			
    package cn.itcast.ssm.util; import com.alibaba.fastjson.JSONObject; import freemarker.cache.StringTe ...
    
			
    11.