My97DatePicker时间控件的使用

梦里梦外; 2022-05-30 02:26 227阅读 0赞

# 文章转自与：https://www.cnblogs.com/sharpest/p/6082770.html #

# [My97DatePicker基本用法][My97DatePicker] #

My97DatePicker是一款非常灵活好用的日期控件。使用非常简单。

1、下载My97DatePicker组件包

下载地址：[http://download.csdn.net/detail/emoven/8249073][http_download.csdn.net_detail_emoven_8249073]

2、在页面中引入该组件js文件：

3、例子

![复制代码][copycode.gif]

1     <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
     2     <%@ taglib prefix="s"  uri="/struts-tags"%>  
     3       
     4     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
     5     <html>  
     6       <head>  
     7         <title>My97DatePicker日期控件使用</title>  
     8       </head>  
     9       <body>  
    10         <center>  
    11             <h2>My97DatePicker日期控件的使用</h2>  
    12         </center>  
    13                 基本用法：  
    14         <input id="" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true})" /><br><br>  
    15                 
    16                 只能选择今天以前的日期：  
    17         <input id="" class="Wdate" onfocus="WdatePicker({readOnly:true,maxDate:'%y-%M-%d'})" /><br><br>         
    18                  
    19                使用运算表达式 只能选择 20小时前 至 30小时后 的日期    
    20         <input id="" class="Wdate" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d {%H-20}:%m:%s',maxDate:'%y-%M-%d {%H+30}:%m:%s'})" /><br><br>              
    21                   
    22                 开始，结束日期：  
    23         <input id="sdate" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,maxDate:'#F{$dp.$D(\'edate\')}'})" />  
    24         -  
    25         <input id="edate" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,minDate:'#F{$dp.$D(\'sdate\')}',startDate:'#F{$dp.$D(\'sdate\',{d:+1})}'})" /><br><br>  
    26            
    27       </body>  
    28       <script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>  
    29     </html>

![复制代码][copycode.gif]

4.如需修改配置信息，只需WdatePicker(\{dateFmt:'yyyy-MM-dd',readOnly:true,maxDate:'\#F\{$dp.$D(\\'edate\\')\}'\})" 加上相关配置信息即可

4、常用的配置信息。

配置信息主要在οnfοcus="WdatePicker(\{dateFmt:'yyyy-MM-dd',readOnly:true\})" 的 WdatePicker 方法的 \{ \} 对象中定义。

常用的配置信息在 WdatePicker.js 文件中定义了。

![复制代码][copycode.gif]

1     var $dp,WdatePicker;(function(){var _={  
     2     $wdate:true,  
     3     $dpPath:"",  
     4     $crossFrame:true,  
     5     doubleCalendar:false, //是否双月日历  
     6     autoUpdateOnChanged:false,  
     7     position:{}, //位置如：position:{left:100,top:50}  
     8     lang:"auto",  
     9     skin:"default", //皮肤  
    10     dateFmt:"yyyy-MM-dd", //日期格式  
    11     realDateFmt:"yyyy-MM-dd",  
    12     realTimeFmt:"HH:mm:ss",  
    13     realFullFmt:"%Date %Time",  
    14     minDate:"1900-01-01 00:00:00", //最小日期  
    15     maxDate:"2099-12-31 23:59:59", //最大日期  
    16     startDate:"", //起始日期  
    17     alwaysUseStartDate:false, //当日期框无论是何值,始终使用 startDate 做为起始日期  
    18     yearOffset:1911,  
    19     firstDayOfWeek:0, //自定义星期的第一天  
    20     isShowWeek:false, //是否显示周  
    21     highLineWeekDay:true, //高亮周日  
    22     isShowClear:true, //是否显示清空  
    23     isShowToday:true, //是否显示今天  
    24     isShowOK:true,  //是否显示OK  
    25     isShowOthers:true,  
    26     readOnly:false, //是否只读  
    27     qsEnabled:true,  
    28     errDealMode:0, //自动纠错功能  
    29     //0 在输入错误日期时,会先提示   
    30     //1 在输入错误日期时,自动恢复前一次正确的值  
    31     //2 在输入错误日期时,不做提示和更改,只是做一个标记,但此时日期框不会马上隐藏  
    32     autoPickDate:null, //点两次才能选择日期的原因  
    33     //为false时 点日期的时候不自动输入,而是要通过确定才能输入  
    34     //为true时 即点击日期即可返回日期值  
    35     //为null时(推荐使用) 如果有时间置为false 否则置为true  
    36     specialDates:null, //特殊日期  
    37     specialDays:null,  //特殊天  
    38     disabledDates:null, //无效日期 如：disabledDates:['5$']  
    39     disabledDays:null, //无效天 如：disabledDays:[6]  
    40     opposite:false, //有效日期

![复制代码][copycode.gif]

[My97DatePicker]: http://www.cnblogs.com/sharpest/p/6082770.html
[http_download.csdn.net_detail_emoven_8249073]: http://download.csdn.net/detail/emoven/8249073
[JavaScript]: http://lib.csdn.net/base/javascript
[copycode.gif]: /images/20220530/36b597d4b7134d609b3912b043123c80.png