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. git 实现提交远程分支步骤
			
    git clone git branch [分支名] 创建分支 git branch 查看本地所有分支 git checkout [分支名称] 切换分支 ---写代码--- git status (查 ...
    
			
    2. 
						
  2. Java学习笔记32（IO：序列化流）
			
    对象中的数据 ,以流的形式,写入到文件中保存,过程称为写出对象,对象的序列化 ObjectOutputStream将对象写到序列中,实现序列化 在文件中,以流 的形式,将对象读取出来,过程称为读取对象 ...
    
			
    3. 
						
  3. wx小程序使用模板消息
			
    1.直接搜索一个不存在的模板,则可以添加新模板 2.https://developers.weixin.qq.com/miniprogram/dev/api/notice.html#%E5%8F%91 ...
    
			
    4. 
						
  4. css 实现的网页布局
			
      css 实现网页布局,上中下三部分,中间为固定宽度且分为左右两部分 <!DOCTYPE html> <html> <head> <meta charset ...
    
			
    5. 
						
  5. robotframework·RIDE基础
			
    date:2018520 day09 一.学习环境 1.安装python27 2.安装robotframework(cmd→[pip install robotframework]) 3.安装WxPy ...
    
			
    6. 
						
  6. L2-002. 链表去重（数组模拟）
			
    L2-002. 链表去重 因为数值比较小,所以直接用数组来模拟 #include<cstdio> #include<cstring> #include<iostream& ...
    
			
    7. 
						
  7. 利用scrapy下载图片保存到本地
			
    1.先声明一下,起始位置已经是将所有的图片链接都能到pipelines.py中 2.创建一个类,继承于ImagesPipeline,因此也就需要导入ImagesPipeline from scrapy ...
    
			
    8. 
						
  8. [LeetCode&Python] Problem 100. Same Tree
			
    Given two binary trees, write a function to check if they are the same or not. Two binary trees are  ...
    
			
    9. 
						
  9. python三大框架之一flask应用
			
    创建一个python项目 第一步:打开pytharm 第二步:创建pure python 类型的项目 第三步:创建项目完成之后选择之前创建的py3_flack 作为虚拟环境 第四步:路径可以通过在制定 ...
    
			
    10. 
						
  10. react 路由跳转问题
			
    1.采用Link方法跳转 <Link to="/Index2" > 不要用link,回不来,也不能next </Link> 2.用context控制路由跳转 ...
    
			
    11.