一、My97DatePicker
當前最新版本: 4.8
官網：http://www.my97.net/
csdn下載地址: http://download.csdn.net/detail/czw2010/8585183
1. 使用說明:
My97DatePicker目錄是一個整體,不可破壞裏面的目錄結構,也不可對裏面的文件改名,可以改目錄名
My97DatePicker.htm是必須文件,不可刪除(4.8以後不存在此文件)
各目錄及文件的用途:
WdatePicker.js 配置文件,在調用的地方僅需使用該文件（其它的文件可自動引入）,可多個共存,以xx_WdatePicker.js方式命名
config.js 語言和皮膚配置文件,無需引入(4.8以後合併入WdatePicker.js)
calendar.js 日期庫主文件,無需引入
My97DatePicker.htm 臨時頁面文件,不可刪除(4.8以後不存在此文件)
目錄lang 存放語言文件,你可以根據需要刪除或添加語言文件
目錄skin 存放皮膚的相關文件,你可以根據需要刪除或添加皮膚文件包
當WdatePicker.js裏的屬性:$wdate=true時,在input里加上class=”Wdate”就會在選擇框右邊出現日期圖標,如果您不喜歡這個樣式,可以把class=”Wdate”去掉,另外也可以通過修改skin目錄下的WdatePicker.css文件來修改樣式
2. 支持的瀏覽器
IE 6.0+ , Firefox 2.0+ , Chrome, Opera 9.5+ , Safari 3.0+
3. 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>simple示例</title>
<script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
</head>
<body>
<input class="Wdate" type="text" onClick="WdatePicker()"/>
</body>
</html>效果圖:
4. 屬性表
note: 控件中的幾個事件中的指針指向:
this: 指向文本框
dp: 指向$dp
dp.cal: 指向日期控件對象
5. 內置函數和屬性
6. 日期格式表
| 格式 | 說明 |
|---|---|
| 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) 。 |
7. 動態變量表
注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致而不是與 dateFmt 一致
你可以通過系統給出的動態變量,如%y(當前年),%M(當前月)等來限度日期範圍,你還可以通過{}進行表達式運算,如:{%d+1}:表示明天
| 格式 | 說明 |
|---|---|
| %y | 當前年 |
| %M | 當前月 |
| %d | 當前日 |
| %ld | 本月最後一天 |
| %H | 當前時 |
| %m | 當前分 |
| %s | 當前秒 |
| {} | 運算表達式,如:{%d+1}:表示明天 |
| F{} | {}之間是函數可寫自定義JS代碼 |
8. example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>simple示例</title>
<script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
</head>
<body>
<!-- eg no1:
firstDayOfWeek:2 以星期二爲第一列
position:{left:100,top:50} 日期面板顯示進行偏移
startDate: '%y-%M-01 00:00:00' 初始顯示當前年當前月的1日 00:00:00
minDate:'%y-%M-{%d+1}' 只能選擇今天以後的時間
'%y-%M-{%d+30} %H:%m:%s' 只能選擇距當前30天前的時間
disabledDates:['5$'] 使用正則,禁用5結尾的日期
disabledDays:[0,6] 禁用週日與週六
specialDays:[1,5] 特殊天設置--週一與週五,高亮顯示,這裏有個bug,如果設置了firstDayOfWeek屬性,那麼高亮的行會出現偏移
specialDates:['....-..-01','....-..-15'] 高亮每月的1到15號
-->
<input class="Wdate" type="text" onfocus="WdatePicker({firstDayOfWeek:2,position:{left:100,top:50},startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true,minDate:'%y-%M-{%d+1}',maxDate:'%y-%M-{%d+30} %H:%m:%s',disabledDates:['5$'],disabledDays:[0,6],specialDays:[1,5],specialDates:['....-..-01','....-..-15']})"/>
<!--eg no2:
oubleCalendar:true 支持雙月曆
-->
<input class="Wdate" type="text" onfocus="WdatePicker({doubleCalendar:true})"/>
<!--eg no3:
2個日期控件間的關聯示例:前面的日期不能大於後面的日期且兩個日期都不能大於 2020-10-01
-->
<input id="d4311" class="Wdate" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')||\'2020-10-01\'}'})"/>
<input id="d4312" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}',maxDate:'2020-10-01'})"/>
</body>
</html>效果圖：
| no1 | no2 |
|---|---|
 |
 |
後續補充