一直以來，用的最多的就是my97DatePicker獲得年月日的方法，今天突然逛到了這篇文章，留下來，以備以後使用

自己寫的一個：獲取年月，並從下個月開始計算

1. <asp:TextBoxID=“txt_date_1”runat=“server”Width=“90%”onClick=“WdatePicker({dateFmt:’yyyy-MM’,minDate:’%y-#{%M+1}-%ld’})”class=“date-picker”></asp:TextBox>

<asp:TextBox ID="txt_date_1" runat="server" Width="90%" onClick="WdatePicker({dateFmt:'yyyy-MM',minDate:'%y-#{%M+1}-%ld'})" class="date-picker"></asp:TextBox>
 

原文轉載自：http://lipeng200819861126-126-com.iteye.com/blog/2069322

原文轉載自：http://blog.csdn.NET/tototuzuoquan/article/details/46343615

My97DatePicker是一款非常靈活好用的日期控制元件。使用非常簡單。 

下面總結下使用該日曆控制元件選擇年、季度、月、周、日的方法。

1、選擇年

<input id=”d1212” class=”Wdate” type=”text” onfocus=”WdatePicker({dateFmt:’yyyy年’})”/>

2、選擇季度：

<input id=”d1213” class=”Wdate” type=”text” onfocus=”WdatePicker({dateFmt:’yyyy年MM季度’,disabledDates:[‘….-0[5-9]-..’,’….-1[0-2]-..’,startDate:’%y-01-01’]})”/>

這種情況還需要修改calendar.js檔案init方法中加一句

hide(d.MI,d.leftImg, $d.rightImg);

3、選擇月度

<input id=”d1212” class=”Wdate” type=”text” onfocus=”WdatePicker({dateFmt:’yyyy年MM月’})”/>

4、選擇周

<input id=”d121” class=”Wdate” type=”text” onfocus=”WdatePicker({isShowWeek:true,onpicked:funccc,errDealMode:3})”/>

加一個js方法

function funccc(){

dp.(‘d121’).value=dp.cal.getP(′y′)+dp.cal.getP(‘W’,’WW’);

}

5、選擇日

<input id=”d1212” class=”Wdate” type=”text” onfocus=”WdatePicker({dateFmt:’yyyy年MM月dd日’})”/>

日期控制元件支援平面顯示功能,只要設定一下eCont屬性就可以把它當作日曆來使用了,無需觸發條件,直接顯示在頁面上

示例2-1 平面顯示演示
<div id=”div1 “></div>
<script>
WdatePicker({eCont: ‘div1’ ,onpicked:function(dp){alert(‘你選擇的日期是:’+dp.cal.getDateStr())}})
</script>

$dp.cal.getDateStr 用法詳見內建函式和屬性

支援多種容器 
除了可以將值返回給input以外,還可以通過配置el屬性將值返回給其他的元素(如:textarea,div,span)等,帶有innerHTML屬性的HTML元素

示例2-2 將日期返回到<span>中
2008-01-01 

程式碼:
<span id=”demospan “>2008-01-01</span> 
<img onClick=”WdatePicker({el: ‘demospan’ })” src=”../../My97DatePicker/skin/datePicker.gif” width=”16” height=”22” align=”absmiddle” style=”cursor:pointer” />

起始日期功能 
注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致 
有時在專案中需要選擇生日之類的日期,而預設點開始日期都是當前日期,導致年份選擇非常麻煩,你可以通過起始日期功能加上配置alwaysUseStartDate屬性輕鬆解決此類問題

示例2-3-1 起始日期簡單應用 
預設的起始日期為 1980-05-01
當日期框為空值時 ,將使用 1980-05-01 做為起始日期

 
<input type=”text” id=”d221” onFocus=”WdatePicker({startDate: ‘1980-05-01’ })”/>

示例2-3-2 alwaysUseStartDate屬性應用
預設的起始日期為 1980-05-01
當日期框無論是何值 ,始終使用 1980-05-01 做為起始日期

 
<input type=”text” id=”d222” onFocus=”WdatePicker({startDate: ‘1980-05-01’ ,alwaysUseStartDate: true })”/>

示例2-3-3 使用內建引數
除了使用靜態的日期值以外,還可以使用動態引數(如:%y,%M分別表示當前年和月)

下例演示,年月日使用當年當月的1日,時分秒使用00:00:00作為起始時間

 
<input type=”text” id=”d233” onFocus=”WdatePicker({startDate: ‘%y-%M-01 00:00:00’ ,dateFmt:’yyyy-MM-dd HH:mm:ss’,alwaysUseStartDate: true })”/>

自定義格式 
yMdHmswW分別代表年月日時分秒星期周,你可以任意組合這些元素來自定義你個性化的日期格式.

日期格式表 格式 說明 
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

示例 2-4-1: 年月日時分秒
 
<input type=”text” id=”d241” onfocus=”WdatePicker({dateFmt: ‘yyyy年MM月dd日 HH時mm分ss秒’ })” class=”Wdate” style=”width:300px”/>

注意: 點兩次才能選擇日期的原因,詳見 autoPickDate 屬性

示例 2-4-2 時分秒
 
<input type=”text” id=”d242” onfocus=”WdatePicker({skin:’whyGreen’,dateFmt: ‘H:mm:ss’ })” class=”Wdate”/>

注意: 這裡提前使用了面板(skin)屬性,所以你會看到一個不同的面板,面板屬性詳見自定義和動態切換面板

示例 2-4-3 年月
 
<input type=”text” id=”d243” onfocus=”WdatePicker({skin:’whyGreen’,dateFmt: ‘yyyy年MM月’ })” class=”Wdate”/>

示例 2-4-4 取得系統可識別的日期值(重要) 
類似於 1999年7月5日 這樣的日期是不能夠被系統識別的,他必須轉換為能夠識別的型別如 1999-07-05

 真實的日期值是:  
<input id=”d244” type=”text” class=”Wdate” onfocus=”WdatePicker({dateFmt: ‘yyyy年M月d日’ ,vel: ‘d244_2’ })”/>
<input id=”d244_2 ” type=”text” />

注意: 在實際應用中,一般會把vel指定為一個hidden控制元件 ,這裡是為了把真實值展示出來,所以使用文字框
關鍵屬性: vel 指定一個控制元件或控制元件的ID,必須具有value屬性(如input),用於儲存真實值(也就是realDateFmt和realTimeFmt格式化後的值)

示例 2-4-5 星期, 月 日, 年(4.6Beta2新增) 
 
<input type=”text” id=”d245” onfocus=”WdatePicker({dateFmt: ‘DD, MMMM d, yyyy’ })” class=”Wdate”/>

雙月日曆功能(4.6Beta2新增) 
可以同時彈出兩個月的日曆

示例2-5 雙月日曆功能
 
<input class=”Wdate” type=”text” onfocus=”WdatePicker({doubleCalendar: true ,dateFmt:’yyyy-MM-dd’})”/>

注意: 雙月日曆一般只用於包含年月日三個元素的場景,另外設定該屬性時,autoPickDate自動設定為true

自動糾錯功能 
糾錯處理可設定為3種模式:提示(預設) 自動糾錯 標記,當日期框中的值不符合格式時,系統會嘗試自動修復,如果修復失敗會根據您設定的糾錯處理模式進行處理,錯誤判斷功能非常智慧它可以保證使用者輸入的值是一個合法的值

示例2-6-1 不合法的日期演示
請在下面的日期框中填入一個不合法的日期(如:1997-02-29) ,再嘗試離開焦點 
使用預設容錯模式 提示模式 errDealMode = 0 在輸入錯誤日期時,會先提示 
 

注意: 1997年不是閏年哦

示例2-6-2 超出日期限制範圍的日期也被認為是一個不合法的日期
最大日期是2000-01-10 ,如果在下框中填入的日期 大於 2000-01-10(如2000-01-12)也會被認為是不合法的日期 
自動糾錯模式 errDealMode = 1 在輸入錯誤日期時,自動恢復前一次正確的值 
 

示例2-6-3 使用無效天和無效日期功能限制的日期也被認為是一個不合法的日期
如:
2008-02-20 無效日期限制
2008-02-02 2008-02-09 2008-02-16 2008-02-23 無效天限制
都是無效日期
您可以嘗試在下框中輸入這些日期,並離開焦點

標記模式 errDealMode = 2 在輸入錯誤日期時,不做提示和更改,只是做一個標記,但此時日期框不會馬上隱藏 
 

注意: 標記類:WdateFmtErr是在skin目錄下WdatePicker.css中定義的

跨無限級框架顯示 
無論你把日期控制元件放在哪裡,你都不需要擔心會被外層的iframe所遮擋進而影響客戶體驗,因為My97日期控制元件是可以跨無限級框架顯示的

示例2-7 跨無限級框架演示
可無限跨越框架iframe,無論怎麼巢狀框架都不必擔心了,即使有滾動條也不怕

民國年日曆和其他特殊日曆 
當年份格式設定為yyy格式時,利用年份差量屬性yearOffset(預設值1911民國元年),可實現民國年日曆和其他特殊日曆

示例2-8 民國年演示
 
<input type=”text” id=”d28” onClick=”WdatePicker({dateFmt: ‘yyy/MM/dd’ })”/>

注意: 年份格式設定成yyy時,真正的日期將會減去一個差量yearOffset(預設值為:1911) ,如果是民國年使用預設值即可無需另外配置,如果是其他的差量,可以通過引數的形式配置

編輯功能 
當日期框裡面有值時,修改完某個屬性後,只要點選這個按鈕就可以實現時間和日期的編輯

示例2-9 日期和時間的編輯演示
您可以嘗試對下面框中的月份改為1,然後點選更新 ,你會發現日期由 2000-02 -29 01:00:00 變為 2000-01 -29 01:00:00
 

為程式設計帶來方便 
如果el的值是this,可省略,即所有的el:this都可以不寫 
日期框設定為disabled時,禁止更改日期(不彈出選擇框) 
如果沒有定義onpicked事件,自動觸發文字框的onchange事件 
如果沒有定義oncleared事件,清空時,自動觸發onchange事件

其他屬性 
設定readOnly屬性,可指定日期框是否只讀 
設定highLineWeekDay屬性,可指定是否高亮週末 
設定isShowOthers屬性,可指定是否顯示其他月的日期 
加上class=”Wdate”就會在選擇框右邊出現日期圖示

4. 日期範圍限制 
靜態限制 
注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致 
你可以給通過配置minDate(最小日期),maxDate(最大日期)為靜態日期值,來限定日期的範圍

示例4-1-1 限制日期的範圍是 2006-09-10到2008-12-20
 
<input id=”d411” class=”Wdate” type=”text” onfocus=”WdatePicker({skin:’whyGreen’,minDate: ‘2006-09-10’, maxDate: ‘2008-12-20’ })”/>

示例4-1-2 限制日期的範圍是 2008-3-8 11:30:00 到 2008-3-10 20:59:30
 
<input type=”text” class=”Wdate” id=”d412” onfocus=”WdatePicker({skin:’whyGreen’,dateFmt: ‘yyyy-MM-dd HH:mm:ss’, minDate: ‘2008-03-08 11:30:00’, maxDate: ‘2008-03-10 20:59:30’ })” value=”2008-03-09 11:00:00”/>

示例4-1-3 限制日期的範圍是 2008年2月 到 2008年10月
 
<input type=”text” class=”Wdate” id=”d413” onfocus=”WdatePicker({dateFmt: ‘yyyy年M月’, minDate: ‘2008-2’, maxDate: ‘2008-10’ })”/>

示例4-1-4 限制日期的範圍是 8:00:00 到 11:30:00
 
<input type=”text” class=”Wdate” id=”d414” onfocus=”WdatePicker({dateFmt: ‘H:mm:ss’, minDate: ‘8:00:00’, maxDate: ‘11:30:00’ })”/>

動態限制 
注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致 
你可以通過系統給出的動態變數,如%y(當前年),%M(當前月)等來限度日期範圍,你還可以通過#{}進行表示式運算,如:#{%d+1}:表示明天

動態變量表

格式 說明 
%y  當前年 
%M  當前月 
%d  當前日 
%ld 本月最後一天 
%H  當前時 
%m  當前分 
%s  當前秒