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. Python MRO_C3
			
    class A: pass class B(A): pass class C(A): pass class D(B, C): pass class E(C, A): pass class F(D, E ...
    
			
    2. 
						
  2. CPU对指令长度的判断
			
    译码一般包括:指令预取.指令预分析.解码.预取就是从cache或者内存取一系列的字节(大小可以保证至少包含一条指令),并设置一个待分析的位置,预分析从此位置逐字节分析,如果是前缀就设置分析状态(因为前 ...
    
			
    3. 
						
  3. 【Python】xml 解析
			
    1. XML:指可扩展标记语言,是一种标记语言,用于存储数据和传输数据,但没有像HTML那样具有预定义标签,需要程序猿自定义标签 2. XML的解析:读取XML数据结构中的某些信息,比如读取书的属性  ...
    
			
    4. 
						
  4. 广播多路访问链路上的OSPF
			
    实验要求:配置OSPF 拓扑如下: 配置如下: R1 enableconfigure terminal interface l0ip address 192.168.10.1 255.255.255. ...
    
			
    5. 
						
  5. 常用文本编辑器 editor 的常用插件 ——  CopyEdit
			
    1. CopyEdit http://www.conyedit.com/, 跨平台的文本编辑器插件: 监控粘贴板以及支持命令解析 其官网上有其动图演示:
    
			
    6. 
						
  6. Python学习笔记第十七周
			
    目录: 一.jQuery 内容: 一.jQuery: ps:版本 1.xx (推荐最新版本,兼容性好) 2.xx 3.xx 转换: jQuery对象[0]   =>  DOM对象 $(DOM对象 ...
    
			
    7. 
						
  7. Max(rowid)是否走B树索引
			
    Max(rowid)是否走B树索引 测试:SQL文本Max(rowid)执行计划是否走B树索引测试 一.猜测执行计划 当SQL语句中,执行max(rowid)时,执行计划猜测: A走B树索引全索引范围 ...
    
			
    8. 
						
  8. 豆瓣电影 Top 250
			
    import refrom urllib.request import urlopen def getPage(url): # 获取网页的字符串 response = urlopen(url) ret ...
    
			
    9. 
						
  9. JavaBasic_05
			
    方法 简述:实现特定功能的代码块 格式 修饰符: 返回值类型 方法名(参数类型 参数名1,参数类型 参数名2…){           函数体;           return 返回值;} 方法格式 ...
    
			
    10. 
						
  10. 百练6376-二维数组右上左下遍历-2015正式C题
			
    C:二维数组右上左下遍历 总时间限制:  1000ms 内存限制:  65536kB 描述 给定一个row行col列的整数数组array,要求从array[0][0]元素开始,按从左上到右下的对角线顺 ...
    
			
    11.