藍橋軟件學(xué)院日期

1、日期課程目標(biāo)· 了解DateBox、DateTimeBox和Calendar的基本屬性、方法和事件· 靈活掌握日期的相關(guān)操作DateBoxDateBox簡介日期輸入框結(jié)合了一個可編輯的文本框控件和允許用戶選擇日期的下拉日歷面板控件。選擇的日期會自動轉(zhuǎn)變?yōu)橐粋€有效的日期然后填充到文本框中。選定的日期也可以被格式化為預(yù)定格式。效果如下圖：開發(fā)DateBox程序復(fù)制1. <input id="dd" type="text" class="easyui-datebox" required="required

2、"></input> 參考代碼:26/datebox01.html效果如上圖。DateBox常用屬性屬性名屬性值類型描述默認值panelWidthnumber下拉日歷面板寬度。180panelHeightnumber下拉日歷面板高度。autocurrentTextstring顯示當(dāng)天按鈕。TodaycloseTextstring顯示關(guān)閉按鈕。CloseokTextstring顯示OK按鈕。OKdisabledboolean該屬性值為true時禁用該字段。falsebuttonsarray在日歷下面的按鈕。sharedCalendarstring,selector將一

3、個日歷控件共享給多個datebox控件使用。nullformatterfunction該函數(shù)用于格式化日期。parserfunction該函數(shù)用于解析一個日期字符串。DateBox常用方法方法名方法參數(shù)描述optionsnone返回屬性對象。calendarnone獲取日歷對象。setValuevalue設(shè)置日期輸入框的值。DateBox常用事件事件名事件參數(shù)描述onSelectdate在用戶選擇了一個日期的時候觸發(fā)。案例一：設(shè)置指定的日期復(fù)制1. <a href="javascript:void(0);" onclick="set();" cla

4、ss="easyui-linkbutton">設(shè)置值 </a>2. <a href="javascript:void(0);" onclick="alert($('#input1').datebox('getValue');" class="easyui-linkbutton">獲取值 </a>3. <script type="text/javascript">4. function set()5. $.mes

5、mpt('提示信息', '請輸入要設(shè)置的數(shù)值：', function(value)6. if (value)7. $('#input1').datebox('setValue', value);8. 9. );10. 11. </script>參考代碼:26/datebox01.html效果如下圖：案例二：設(shè)置日期范圍復(fù)制1. <input id="dd"></input>2. <script>3. $(function()4. $('#

6、dd').datebox().datebox('calendar').calendar(5. validator: function(date)6. var now = new Date();7. /當(dāng)前日期8. var d1 = new Date(now.getFullYear(), now.getMonth(), now.getDate();9. /下月1號10. var d2 = new Date(now.getFullYear(), now.getMonth()+1, 1);11. /只能選擇今天到本月最后一天12. return d1<=date &am

7、p;& date<d2;13. 14. );15. );16. </script>參考代碼:26/datebox02.html效果如下圖：案例三： 修改日期樣式復(fù)制1. <h2>Date Format</h2>2. <p>formatter方法用于將Date類型轉(zhuǎn)換成String,parser方法用于將String轉(zhuǎn)換成Date</p>3. <div style="margin:20px 0;"></div>4. <input class="easyui-dat

8、ebox"></input><br/><br/>5. <input id="input1" class="easyui-datebox" data-options="formatter:myformatter,parser:myparser"></input>6. <br/><br/><br/>7. <a href="javascript:void(0);" onclick="set();

9、" class="easyui-linkbutton">設(shè)置值 </a>8. <a href="javascript:void(0);" onclick="alert($('#input1').datebox('getValue');" class="easyui-linkbutton">獲取值 </a>9. <script type="text/javascript">10. function my

10、formatter(date)11. var y = date.getFullYear();12. var m = date.getMonth()+1;13. var d = date.getDate();14. return y+'年'+(m<10?('0'+m):m)+'月'+(d<10?('0'+d):d)+"日"15. 16. function myparser(s)17. if (!s) return new Date();18. if(s.indexOf('-') >

11、; 0)19. var ss = s.split('-');20. 21. else if(s.indexOf('/') > 0)22. ss = s.split('/');23. else24. return;25. 26. var y = parseInt(ss0,10);27. var m = parseInt(ss1,10);28. var d = parseInt(ss2,10);29. if (!isNaN(y) && !isNaN(m) && !isNaN(d)30. return new Da

12、te(y,m-1,d);31. else 32. return new Date();33. 34. 35. function set()36. $.mpt('提示信息', '請輸入要設(shè)置的數(shù)值：', function(value)37. if (value)38. $('#input1').datebox('setValue', value);39. 40. );41. 42. </script>參考代碼:26/datebox03.htmlDateTimeBoxDateTimeBox簡介下拉列

13、表框顯示一個可編輯文本框和下拉式列表，用戶可以選擇一個值或多個值。用戶可以直接輸入文本到列表頂部或選擇一個或多個當(dāng)前列表中的值。效果如下圖：開發(fā)DateTimeBox程序復(fù)制1. <input id="dd" type="text" class="easyui-datetimebox" required="required"></input> 參考代碼:26/datetimebox01.html效果如上圖。DateTimeBox常用屬性屬性名屬性值類型描述默認值spinnerWidthnum

14、ber定義datetimebox組件嵌入的時間微調(diào)器的寬度。100%showSecondsboolean定義是否顯示秒鐘信息。truetimeSeparatorstring定義在小時、分鐘和秒之間的時間分割字符。:DateTimeBox常用方法方法名方法參數(shù)描述optionsnone返回屬性對象。spinnernone返回時間微調(diào)器對象。setValuevalue設(shè)置日期時間輸入框值。案例一： 修改日期樣式復(fù)制1. <input id="input1" class="easyui-datetimebox" data-options="fo

15、rmatter:myformatter,parser:myparser"></input>2. <a href="javascript:void(0);" onclick="set();" class="easyui-linkbutton">設(shè)置值 </a>3. <a href="javascript:void(0);" onclick="alert($('#input1').datetimebox('getValue

16、9;);" class="easyui-linkbutton">獲取值 </a>4. <script type="text/javascript">5. function myparser(s)6. if (!s) return new Date();7. var ss;8. if(s.indexOf('-') > 0)9. ss = s.split('-');10. 11. else if(s.indexOf('/') > 0)12. ss = s.sp

17、lit('/');13. else if(s.indexOf('年') > 0)14. ss = s.split('年');15. var y = parseInt(ss0,10);16. ss = ss1.split('月');17. var m = parseInt(ss0,10);18. ss = ss1.split('日');19. var d = parseInt(ss0,10);20. ss = ss1.split(' ');21. ss = ss1.split(':

18、9;);22. var h1 = parseInt(ss0);23. var m1 = parseInt(ss1);24. var s1 = parseInt(ss2);25. if (!isNaN(y) && !isNaN(m) && !isNaN(d) && !isNaN(h1) && !isNaN(m1) && !isNaN(s1)26. return new Date(y,m-1,d,h1,m1,s1);27. else 28. return new Date();29. 30. 31. var y = p

19、arseInt(ss0,10);32. var m = parseInt(ss1,10);33. ss = ss2.split(' ');34. var d = parseInt(ss0,10);35. ss = ss1.split(':');36. var h1 = parseInt(ss0);37. var m1 = parseInt(ss1);38. var s1 = parseInt(ss2);39. if (!isNaN(y) && !isNaN(m) && !isNaN(d) && !isNaN(h1)

20、 && !isNaN(m1) && !isNaN(s1)40. return new Date(y,m-1,d,h1,m1,s1);41. else 42. return new Date();43. 44. 45. 46. function myformatter(date)47. if(date)48. var y1 = date.getFullYear();49. var m1 = date.getMonth()+1;50. var d1 = date.getDate();51. var h2 = date.getHours();52. var m2 =

21、date.getMinutes();53. var s2 = date.getSeconds();54. var message = y1+'年'+(m1<10?('0'+m1):m1)+'月'+(d1<10?('0'+d1):d1)+"日 "+h2+":"+m2+":"+s2;55. return message;56. 57. 58. 59. function set()60. $.mpt('提示信息', '

22、請輸入要設(shè)置的數(shù)值：', function(value)61. if (value)62. $('#input1').datetimebox('setValue', value);63. 64. );65. 66. </script>參考代碼:26/datetimebox02.htmlCalendarCalendar簡介日歷控件顯示一個月的日歷，允許用戶選擇日期和移動到下一個或上一個月。默認情況下，一周的第一天是周日。它可以通過設(shè)置firstDay屬性的值來更改設(shè)置。效果如下圖：開發(fā)Calendar程序復(fù)制1. <div id=&quo

23、t;cc" class="easyui-calendar" style="width:180px;height:180px;"></div> 參考代碼:26/calendar01.html效果如上圖。Calendar常用屬性屬性名屬性值類型描述默認值widthnumber日歷控件寬度。180heightnumber日歷控件高度。180fitboolean當(dāng)設(shè)置為true的，將設(shè)置日歷控件大小自適應(yīng)父容器。falseborderboolean定義是否顯示邊框。trueshowWeekboolean當(dāng)設(shè)置為true時，將顯示周數(shù)。falseweekNumberHeaderstring周數(shù)的標(biāo)簽顯示在頭部。getWeekNumberfunction(date)該函數(shù)用于返回周數(shù)值。firstDaynumber定義一周的第一天是星期幾。0=星期日、1=星期一 等。0weeksarray顯示的周列表內(nèi)容。'S','M','T','W','T&