My97DatePicker基本用法

標籤：datepicker   控制項   js   function   html   

 My97DatePicker是一款非常靈活好用的日期控制項。使用非常簡單。 
1、下載My97DatePicker組件包 
2、在頁面中引入該組件js檔案： 

    <script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script> 

3、例子

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="s"  uri="/struts-tags"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>My97DatePicker日期控制項使用</title>  </head>  <body>    <center>    <h2>My97DatePicker日期控制項的使用</h2>    </center>            基本用法：    <input id="" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true})" /><br><br>                      只能選擇今天以前的日期：    <input id="" class="Wdate" onfocus="WdatePicker({readOnly:true,maxDate:'%y-%M-%d'})" /><br><br>                             使用運算運算式 只能選擇 20小時前 至 30小時後 的日期      <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>                                    開始，結束日期：<!-- $dp.$ 相當於 document.getElementById 函數. -->    <input id="sdate" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,maxDate:'#F{$dp.$D(\'edate\')}'})" />    -    <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>       </body>  <script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script></html>

4、常用的配置資訊。配置資訊主要在onfocus="WdatePicker({dateFmt:‘yyyy-MM-dd‘,readOnly:true})" 的WdatePicker 方法的 { } 對象中定義。常用的配置資訊在 WdatePicker.js 檔案中定義了。

var $dp,WdatePicker;(function(){var _={$wdate:true,$dpPath:"",$crossFrame:true,doubleCalendar:false, //是否雙月日曆autoUpdateOnChanged:false,position:{}, //位置如：position:{left:100,top:50}lang:"auto",skin:"default", //皮膚dateFmt:"yyyy-MM-dd", //日期格式realDateFmt:"yyyy-MM-dd",realTimeFmt:"HH:mm:ss",realFullFmt:"%Date %Time",minDate:"1900-01-01 00:00:00", //最小日期maxDate:"2099-12-31 23:59:59", //最大日期startDate:"", //起始日期alwaysUseStartDate:false, //當日期框無論是何值,始終使用 startDate 做為起始日期yearOffset:1911,firstDayOfWeek:0, //自訂星期的第一天isShowWeek:false, //是否顯示周highLineWeekDay:true, //高亮周日isShowClear:true, //是否顯示清空isShowToday:true, //是否顯示今天isShowOK:true,  //是否顯示OKisShowOthers:true,readOnly:false, //是否唯讀qsEnabled:true,errDealMode:0, //自動錯誤修正功能//0 在輸入錯誤日期時,會先提示 //1 在輸入錯誤日期時,自動回復前一次正確的值//2 在輸入錯誤日期時,不做提示和更改,只是做一個標記,但此時日期框不會馬上隱藏autoPickDate:null, //點兩次才能選擇日期的原因//為false時 點日期的時候不自動輸入,而是要通過確定才能輸入//為true時 即點擊日期即可返回日期值//為null時(推薦使用) 如果有時間置為false 否則置為truespecialDates:null, //特殊日期specialDays:null,  //特殊天disabledDates:null, //無效日期 如：disabledDates:['5$']disabledDays:null, //無效天 如：disabledDays:[6]opposite:false, //有效日期

My97DatePicker基本用法