首先附上原文地址：http://www.cnblogs.com/weiqt/articles/2012169.html
修改My97DatePicker空間的配置，在My97DatePicker.js中。$crossFrame 更改爲false即可。
附上My97DatePicker.js配置詳解：
1. 簡介
目前的版本是:4.72
2. 注意事項
- My97DatePicker目錄是一個整體,不可破壞裏面的目錄結構,也不可對裏面的文件改名,可以改目錄名
- My97DatePicker.htm是必須文件,不可刪除
- 各目錄及文件的用途:
WdatePicker.js 配置文件,在調用的地方僅需使用該文件,可多個共存,以xx_WdatePicker.js方式命名
config.js 語言和皮膚配置文件,無需引入
calendar.js 日期庫主文件,無需引入
My97DatePicker.htm 臨時頁面文件,不可刪除
目錄lang 存放語言文件,你可以根據需要清理或添加語言文件
目錄skin 存放皮膚的相關文件,你可以根據需要清理或添加皮膚文件包 - 當WdatePicker.js裏的屬性:$wdate=true時,在input里加上class="Wdate"就會在選擇框右邊出現日期圖標,如果您不喜歡這個樣式,可以把class="Wdate"去掉,另外也可以通過修改skin目錄下的WdatePicker.css文件來修改樣式
3. 支持的瀏覽器
IE 6.0+ , Firefox 2.0+ , Chrome, Opera 9.5+ , Safari 3.0+
注意:IE 8.0是完美支持的,如果你在IE8上使用遇到問題,請與我取得聯繫,務必附上能再現你的問題的純HTML代碼包
三. 配置說明
1. 屬性配置
- 屬性表
屬性 類型 默認值 說明 靜態屬性:只能在WdatePicker.js中配置,一般情況下,不建議您修改靜態屬性的值 $wdate bool true 是否自動引入Wdate類 設置爲true時,可直接在引入WdatePicker.js的頁面裏使用 class="Wdate"
Wdate可在skin目錄下的WdatePicker.css文件中定義
建議使用默認值$dpPath string '' 是否顯示指定程序包的絕對位置,一般情況下爲空即可(程序自動創建),該屬性是爲防止極其少數的情況下程序創建出錯而設置的
設置方法:
如果,程序包所在http中的地址爲 http://localhost/proName/My97DatePicker/
則 $dpPath = '/proName/My97DatePicker/';
建議使用默認值$crossFrame bool true 是否跨框架,一般設置爲true即可,遇到跨域錯誤時可以將此功能關閉 可配置屬性:可以在WdatePicker方法是配置 el Element 或 String null 指定一個控件或控件的ID,必須具有value或innerHTML屬性(如input,textarea,span,div,p等標籤都可以),用戶存儲日期顯示值(也就是dateFmt格式化後的值) vel Element 或 String null 指定一個控件或控件的ID,必須具有value屬性(如input),用於存儲真實值(也就是realDateFmt和realTimeFmt格式化後的值) doubleCalendar bool false 是否是雙月模式,如果該屬性爲true,則彈出同時顯示2個月的日期框 enableKeyboard bool true 鍵盤控制開關 enableInputMask bool true 文本框輸入啓用掩碼開關 autoUpdateOnChanged bool null 在修改年月日時分秒等元素時,自動更新到el,默認是關閉的(即:需要點擊確定或點擊日期才更新)
爲false時 不自動更新
爲true時 自動更新
爲null時(默認值) 如果有日元素且不隱藏確定按鈕時 爲false,其他情況爲truewhichDayIsfirstWeek int(1-7之間任何一個數字) 4 周算法不同的地方有一些差異
常見算法有三種
1. ISO8601:規定第一個星期四爲第一週,默認值: 4
2. MSExcel:1月1日所在的周: 可以填寫: 7
3. 自己根據需要自定義,每年的第一個星期X作爲第一週,可以填寫: X (X可以是1-7之間任何一個數字)
相關鏈接:http://en.wikipedia.org/wiki/ISO_week_dateposition object {} 日期選擇框顯示位置
注意:座標默認單位是px,是相對當前框架座標(不受滾動條),left屬性只接受數字,top屬性除接受數字外還可以接受 'above' 上方顯示, 'under' 下方顯示, 'auto' 系統根據頁面大小自動選擇(默認)
如:
{left:100,top:50}表示固定座標[100,50]
{top:50}表示橫座標自動生成,縱座標指定爲 50
{left:100}表示縱座標自動生成,橫座標指定爲 100
{top:'above'}表示上方顯示
{top:'under'}表示下方顯示
請參考示例lang string 'auto' 當值爲'auto'時 自動根據客戶端瀏覽器的語言自動選擇語言
當值爲 其他 時 從langList中選擇對應的語言
你可以參考語言配置skin string 'default' 皮膚名稱 默認自帶 default和whyGreen兩個皮膚
另外如果你的css夠強的話,可以自己做皮膚
你可以參考皮膚配置dateFmt string 'yyyy-MM-dd' 日期顯示格式
你可以參考自定義格式realDateFmt string 'yyyy-MM-dd' 計算機可識別的,真正的日期格式
無效日期設置(disabledDates),最大日期(maxDate),最小日期(minDate)以及快速日期都必須與它們相匹配
建議使用默認值realTimeFmt string 'HH:mm:ss' realFullFmt string '%Date %Time' minDate string '1900-01-01 00:00:00' 最小日期(注意要與上面的real日期相匹配) maxDate string '2099-12-31 23:59:59' 最大日期(注意要與上面的real日期相匹配) startDate string '' 起始日期,既點擊日期框時顯示的起始日期
爲空時,使用今天作爲起始日期(默認值)
否則使用傳入的日期作爲起始日期(注意要與上面的real日期相匹配)
你可以參考起始日期示例firstDayOfWeek int 0 周的第一天 0表示星期日 1表示星期一 isShowWeek bool false 是否顯示周
你可以參考周顯示示例highLineWeekDay bool true 是否高亮顯示 週六 週日 isShowClear bool true 是否顯示清空按鈕 isShowToday bool true 是否顯示今天按鈕 isShowOthers bool true 爲true時,第一行空白處顯示上月的日期，末行空白處顯示下月的日期,否則不顯示 readOnly bool false 是否只讀 errDealMode int 0 糾錯模式設置 可設置3中模式 0 - 提示 1 - 自動糾錯 2 - 標記 autoPickDate bool null 爲false時 點日期的時候不自動輸入,而是要通過確定才能輸入
爲true時 即點擊日期即可返回日期值
爲null時(推薦使用) 如果有時間置爲false 否則置爲trueqsEnabled bool true 是否啓用快速選擇功能 autoShowQS bool false 是否默認顯示快速選擇 quickSel Array null 快速選擇數據,可以傳入5個快速選擇日期
注意:日期格式必須與 realDateFmt realTimeFmt realFullFmt 相匹配
你可以參考快速選擇示例disabledDays Array null 可以使用此功能禁用週日至週六所對應的日期
0至6 分別代表 週日至週六
你可以參考無效天示例disabledDates Array null 可以使用此功能禁用所指定的一個或多個日期
你可以參考無效日期示例opposite bool false 默認爲false, 爲true時,無效日期變成有效日期
注意:該屬性對無效天特殊天不起作用
你可以參考有效日期示例specialDates Array null 特殊日期,對指定的日期進行高亮顯示
你可以參考特殊天與特殊日期示例specialDays Array null 特殊天,使用此功能禁用週日至週六所對應的日期進行高亮顯示
0至6 分別代表 週日至週六
你可以參考特殊天與特殊日期示例onpicking function null 此四個參數爲事件參數
你可以參考自定義事件示例onpicked function null onclearing function null oncleared function null ychanging ychanged
Mchanging Mchanged
dchanging dchanged
Hchanging Hchanged
mchanging mchanged
schanging schangedfunction null (4.6Beta3新增)
y M d H m s 分別表示年月日時分秒
changing 事件發生在屬性改變之前
changed 事件發生在屬性改變之後
你可以參考示例5-4-1 - 配置全局默認值
通過配置WdatePicker.js的屬性可以避免每次調用都傳入配置值,爲變成帶來很多方便.
在默認情況下My97爲每個屬性都配置了默認值,這些默認值都可以在WdatePicker.js中修改的
你可以根據你個人的喜好更改這些值
比如你比較不喜歡默認的皮膚default 而更喜歡 whyGreen 這個皮膚,
你可以直接在WdatePicker.js把skin值改爲 whyGreen
這樣,你就不必每次調用控件的時候都傳入 skin:'whyGreen' 了
你學會了嗎? - 配置單個控件
在控件裏面你可以使用 onfocus 或 onclick 事件來調用WdatePicker函數來觸發日期控件
WdatePicker({})其中{}中的內容都是隻對當前實例有效,你可以任意配置屬性表裏有的所有屬性
你可以隨意的組合這些屬性,達到你的需求
My97日期控件在這方面是做得非常靈活的. - 多套配置快速切換
您可以設置多個WdatePicker.js文件,如 cn_WdatePicker.js,en_WdatePicker.js,simple_WdatePicker.js等
在不同的頁面引入不同的 WdatePicker.js 達到配置快速切換的目的.
注意:文件必須以 _WdatePicker.js(大小寫不限制) 爲後綴,形如 <yourname>_WdatePicker.js
2. 語言配置
- 語言列表
My97DatePicker目錄下有個config.js,裏面有段代碼:
var langList =
[
{name:'en', charset:'UTF-8'},
{name:'zh-cn', charset:'gb2312'},
{name:'zh-tw', charset:'GBK'}
];
這就是語言列表,每個項有name和charset兩個屬性.
name 表示語言的名稱(必須與瀏覽器的語言字符串命名相同),在配置的時候,lang屬性只能是配置列表裏面已有的項,否則將自動返回第一項
charset 表示對應語言目錄下的js文件所對應的編碼格式 - 語言安裝說明
分兩步輕鬆實現:
1 將語言文件拷貝到 lang 目錄
2 打開 config.js 配置語言列表
3. 皮膚配置
- 皮膚列表
My97DatePicker目錄下有個config.js,裏面有段代碼:
var skinList =
[
{name:'default', charset:'gb2312'},
{name:'whyGreen', charset:'gb2312'},
{name:'blue', charset:'gb2312'},
{name:'simple', charset:'gb2312'}
];
這就是皮膚列表,每個項有name和charset兩個屬性.
name 表示皮膚的名稱,在配置的時候,skin屬性只能是配置列表裏面已有的項,否則將自動返回第一項
charset 表示對應皮膚目錄下的css文件:datepicker.css所對應的編碼格式 - 皮膚安裝說明
分兩步輕鬆實現:
1 將皮膚文件包拷貝到 skin 目錄
2 打開 config.js 配置皮膚列表
注意:安裝過多的皮膚會影響性能,一般只安裝自己使用的皮膚,3個以下比較適宜
四. 如何使用
1. 在使用該日期控件的文件中加入JS庫(僅這一個文件即可,其他文件會自動引入,請勿刪除或改名), 代碼如下 <script language="javascript" type="text/javascript" src="datepicker/WdatePicker.js"></script>
注:src="datepicker/WdatePicker.js" 請根據你的實際情況改變路徑
2. 加上主調函數 WdatePicker
關於 WdatePicker 的用法:
如果您是新手,對js還不是很瞭解的話一定要多看看這份文檔
基本上每一個演示的示例下面都有相關代碼,並且 關鍵屬性用藍字標出,關鍵值用紅字標出 應該很容易看明白
如果您有一定的水準
希望能從頭到尾把功能介紹好好看一遍,這樣大部分功能你都會用了
如果您是高手
建議您通讀配置說明和內置函數
五. 內置函數和屬性
| 函數名 | 返回值類型 | 作用域 | 參數 | 描述 |
|---|---|---|---|---|
| $dp.show | void | 全局 | 無 | 顯示日期選擇框 |
| $dp.hide | void | 全局 | 無 | 隱藏日期選擇框 |
| $dp.$D | String | 全局 |
id [string]: 對象的ID arg [object]: 日期差量,可以設置成 {y:[值],M:[值],d:[值],H:[值],m:[值],s:[值]} 屬性 y,M,d,H,m,s 分別代表 年月日時分秒 {M:3,d:7} 表示 3個月零7天 {d:1,H:1} 表示1天多1小時 |
將id對應的日期框中的日期字符串,加上定義的日期差量,返回使用real格式化後的日期串 參考 示例 4-3-2 |
| $dp.$DV | String | 全局 |
v [string]: 日期字符串 arg [object]: 同上例的arg |
將傳入的日期字符串,加上定義的日期差量,返回使用real格式化後的日期串 參考 示例 4-3-3 |
| 以下函數只在事件自定義函數中有效 | ||||
| $dp.cal.getP | String | 事件function |
p [string]: 屬性名稱 yMdHmswWD分別代表年,月,日,時,分,秒,星期(0-6),周(1-52),星期(一-六) f [string]: format 格式字符串 設置方法參考 1.4 自定義格式 |
返回所指定屬性被格式字符串格式化後的值[單屬性],在changing,picking,clearing事件中返回選擇前的值 參考 示例 1-2-2 |
| $dp.cal.getDateStr | String | 事件function |
f [string]: 格式字符串,爲空時使用dateFmt |
返回所指定屬性被格式字符串格式化後的值[整個值],在changing,picking,clearing事件中返回選擇前的值 |
| $dp.cal.getNewP | String | 事件function | 用法同$dp.cal.getP | 返回所指定屬性被格式字符串格式化後的值[單屬性],在changing,picking,clearing事件中返回選擇後的值 |
| $dp.cal.getNewDateStr | String | 事件function | 用法同$dp.cal.getDateStr | 返回所指定屬性被格式字符串格式化後的值[整個值],在changing,picking,clearing事件中返回選擇後的值 |
| 屬性名 | 返回值類型 | 作用域 | 參數 | 描述 |
|---|---|---|---|---|
| $dp.cal.date | object | 事件function |
$dp.cal.date.y:返回 年 $dp.cal.date.M:返回 月 $dp.cal.date.d:返回 日 $dp.cal.date.H:返回 時 $dp.cal.date.m:返回 分 $dp.cal.date.s:返回 秒 |
在changing,picking,clearing事件中返回選擇前的日期對象 |
| $dp.cal.newdate | object | 事件function | 用法同$dp.cal.date | 在changing,picking,clearing事件中返回選擇後的日期對象 |