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 数据处理库 pandas 入门教程
			
    Python 数据处理库 pandas 入门教程2018/04/17 · 工具与框架 · Pandas, Python 原文出处: 强波的技术博客 pandas是一个Python语言的软件包,在我们使 ...
    
			
    2. 
						
  2. Bug02_MyBatis_org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)
			
    我出现问题的原因是: 映射xml文件名写错了. 查资料,可以有以下解决办法 按以下步骤一一执行: 1:检查xml文件所在的package名称是否和interface对应的package名称一一对应 2 ...
    
			
    3. 
						
  3. SpringMvc使用FastJson做为json的转换器（注解方式）
			
    在使用XML方式配置项目,使用fastjson做为Json转换器时通常的在XML内添加如下的配置: <mvc:message-converters register-defaults=" ...
    
			
    4. 
						
  4. JAVA修饰符、关键字和继承（一）
			
    一.静态修饰符----static static可以修饰内部类.块.属性.方法,经static修饰过的元素储存地址唯一,不会改变 public class Test{ static int a=1;  ...
    
			
    5. 
						
  5. 2.14 加载Firefox配置
			
    2.14 加载Firefox配置(略,已在2.1.8讲过,请查阅2.1.8节课) 回到顶部 2.14-1 加载Chrome配置 一.加载Chrome配置chrome加载配置方法,只需改下面一个地方,u ...
    
			
    6. 
						
  6. 调整Windows XP 输入法顺序
			
    執行 Regedit.exe 至 HKEY_CURRENT_USER＼Keyboard Layout＼Preload 調整輸入法順序,右邊欄中名稱為 1 的鍵值就是內定的輸入法,其值一般為 00000 ...
    
			
    7. 
						
  7. 20165228 预备作业3 Linux安装及学习
			
    (一)安装虚拟机 根据娄老师给的Ubuntu版本和安装教程,我曾遇到如下问题: Q1:首先遇到的问题是没有开启虚拟化 解决方法:在重启电脑时进入BIOS>Configuratio > In ...
    
			
    8. 
						
  8. 2018.4.23  深入理解java虚拟机(转)
			
    深入理解java虚拟机 精华总结(面试) 一.运行时数据区域 Java虚拟机管理的内存包括几个运行时数据内存:方法区.虚拟机栈.本地方法栈.堆.程序计数器,其中方法区和堆是由线程共享的数据区,其他几个 ...
    
			
    9. 
						
  9. linux系统lnmp环境包搬家教程
			
    打包搬家apt-get install zip unzip -yyum install zip unzip -y# debian ubuntu 用apt-get,centos用yumcd /home/ ...
    
			
    10. 
						
  10. jenkins安装教程
			
    首先部署java环境 然后部署tomacat(部署之后无需开启tomcat服务) sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenk ...
    
			
    11.