- jQuery EasyUI從零開始學
- 施堯
- 3931字
- 2019-12-06 14:09:01
2.5 快速輸入日期
在之前的章節中已經簡單介紹了部分EasyUI中的日期控件，如時間微調器、日期微調器等。本節將向讀者介紹EasyUI中功能更加強大的日期控件，使用這些日期控件非常簡單，但是如果要完全掌握它們卻非常困難。在學習本節的過程中讀者應該牢牢把握住存儲值和展示值這一核心概念。
2.5.1 日歷（Calendar）
在前面的章節中我們學習了日期微調器控件，這個控件盡管也可以設置日期，但是使用起來卻比較麻煩，例如無法快速地選擇一個日期。日歷提供了一個可供用戶單擊選擇日期的界面，用戶可以使用日歷控件快速選擇日期，日歷控件默認星期天為每周的第一天。
日歷的默認配置定義在$.fn.calendar.defaults中。
1. 創建日歷
使用標記創建日歷的方法如下：
<div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>
使用JavaScript創建日歷的方法如下：
01 <div id="cc" style="width:180px;height:180px;"></div>
02 $('#cc').calendar({
03 current:new Date()
04 });
2. 日歷屬性
日歷常用屬性的說明見表2.37。
表2.37 日歷的常用屬性
在詳細講解日歷的屬性前，先簡單介紹JavaScript中的Date對象。Date對象是JavaScript語言中內置的數據類型，用于提供日期和時間的操作接口。Date類型使用自UTC 1970年1月1日0點開始經過的毫秒數來保存日期。Date默認輸出值格式為：
Tue Feb 13 2018 09:33:27 GMT+0800 (中國標準時間)
Date對象的常用方法如下：
- 創建Date對象：var date = new Date()
- 從Date對象以四位數字返回年份：date.getFullYear()
- 從Date對象返回月份(0～11)：date.getMonth()
- 從Date對象返回一個月中的某一天(1～31)：date.getDate()
- 從Date對象返回一周中的某一天(0～6)：date.getDay()
- 返回Date對象的小時(0～23)：date.getHours()
- 返回Date對象的分鐘(0～59)：date.getMinutes()
- 返回Date對象的秒數(0～59)：date.getSeconds()
- 返回Date對象的毫秒(0～999)：date.getMilliseconds()
- 返回1970年1月1日至今的毫秒數：date.getTime()?返回1970年1月1日午夜到指定日期（字符串）的毫秒數：date.parse()
提示
Data對象是以毫秒數進行創建的，它以毫秒數返回當前的日期，但是一些后臺語言（如PHP等）是通過秒數創建日期對象的，讀者要注意兩者之間的轉換。Date對象也可以通過日期格式進行創建，如new Date('2018/1/1')，但是無法使用中文格式進行創建，例如new Date('2018年1月1日')是非法的。
日歷默認以英文符號來標注月份以及星期，下面我們將對日歷控件進行一次漢化，并演示日歷屬性的用法，部分代碼如下：
01 $('#cc').calendar({
02 /*初始化為當前日期，Date對象可以通過毫秒數以及日期格式進行創建，如果不填寫
03 創建條件的話默認以當前日期進行創建*/
04 current:new Date(),
05 width:400,//日歷控件寬度
06 height:300,//日歷控件的高度
07 showWeek:true,//在日歷控件的最左側顯示當前星期是當年的第幾個星期
08 weekNumberHeader:"星期數",
09 firstDay:"1",//設置星期一為每周的第一天
10 months:['1月', '2月', '3月', '4月', '5月','6月','7月','8月','9月','10
月','11月','12月'],
11 //使用中文標注月份
12 weeks:['周日','周一','周二','周三','周四','周五','周六'],
13 //設置每一天的展示值
14 formatter:function(date){
15 return date.getDate()+"日";
16 },
17 //為展示值添加一個風格
18 styler:function(date){
19 if (date.getDay() == 6){
20 return 'color:red';//將日歷上周六的日期設置成紅色
21 }
22 if (date.getDay() == 0){
23 return 'color:blue';//將日歷上周日的日期設置成藍色
24 }
25 }
26 });
最終運行結果如圖2.20所示。
圖2.20 日歷演示
3. 日歷事件
日歷常用事件說明見表2.38。
表2.38 日歷的常用事件說明
4. 日歷方法
日歷常用方法說明見表2.39所示。
表2.39 日歷的常用方法說明
2.5.2 日期框（DateBox）
日期框由組合和日歷組成，用戶在編輯框中輸入的字符串被轉換成有效的日期顯示在日歷面板上，在日歷上選中的日期也將被轉換成字符串顯示在編輯文本框內。
日期框的依賴關系如下：
- combo
- calendar
日期框擴展于：
- combo
日期框的默認配置定義在$.fn.datebox.defaults中。
1. 日期框的用法
使用標記創建日期框的方法如下：
<input id="db" type="text" class="easyui-datebox" required="required">
使用JavaScript創建日期框的方法如下：
01 <input id="db" type="text">
02 $('#db').datebox({
03 required:true
04 });
2. 日期框屬性
日期框常用屬性的說明見表2.40。
表2.40 日期框常用屬性
下面我們先創建一個日期框，并將日期框的按鈕進行相應漢化，部分代碼如下：
01 <input id="db" type="text" class="easyui-datebox" required="required">
02 <script>
03 $(function(){
04 $('#db').datebox({
05 currentText:" 今天 ",
06 closeText:" 關閉 ",
07 });
08 });
09 </script>
最終運行結果如圖2.21所示。
圖2.21 日期框演示
此時我們已經將按鈕的默認名稱改為對應的中文名稱。EasyUI允許開發者自由地改變按鈕數量以及按鈕的消息響應（消息響應簡單的來說就是按下該按鈕后所運行的一段程序，一般使用handler函數來處理，開發者可以在handler函數體內編寫相應的響應程序），下面我們在“今天”和“關閉”兩個按鈕之間添加一個“確定”按鈕，部分代碼如下：
01 <input id="db" type="text" class="easyui-datebox" required="required">
02 <script>
03 $(function(){
04 $('#db').datebox({
05 currentText:"今天",
06 closeText:"關閉",
07 });
08 var buttons = $.extend([], $.fn.datebox.defaults.buttons);
09 buttons.splice(1, 0, {
10 text: '確定',
11 handler: function(target){
12 alert('當前選擇的日期是'+$(target).val());
13 }
14 });
15 $('#db').datebox({
16 buttons: buttons
17 });
18 });
19 </script>
該例我們創建了一個帶“確定”按鈕的日期框，并且在單擊“確定”按鈕時顯示當前選擇的時間，最終運行結果如圖2.22所示。
圖2.22 設置日期框按鈕
對按鈕的操作在實際開發中十分常用，上述改變日期框按鈕的操作是一個十分通用的方法，下面將對上述代碼進行詳細解析。
先看這段代碼：
var buttons = $.extend([], $.fn.datebox.defaults.buttons);
這段代碼的含義是獲取日期框控件的默認按鈕對象并以數組形式返回。在這里指定控件是日期框（datebox），日期框的默認按鈕是'Today'和'Close'按鈕，因此buttons的值也就是數組['Today按鈕對象','Close按鈕對象']。
提示
所謂的按鈕對象，讀者可以簡單地理解為包含按鈕名稱、消息響應函數等屬性的集合。
接下來看這段代碼：
01 buttons.splice(1, 0, {
02 text: '確定',
03 handler: function(target){
04 alert('當前選擇的日期是'+$(target).val());
05 }
06 });
我們先簡單地學習一下splice函數的用法，splice是JavaScript的一個方法，用于向數組添加或者刪除元素，它的基本語法是：
arrayObject.splice(index,howmany,item1,.....,itemX)
- index：規定添加／刪除元素的位置，使用負數可從數組結尾處規定位置。
- howmany：規定要刪除的元素數量。如果設置為0，則不會刪除元素。
- item1：向數組添加的新元素。
- arrayObject：需要被進行添加／刪除的數組。
提示
index規定的元素位置是從0開始計數的，本例中的位置順序是['0'=>'Today按鈕對象','1'=>'Close按鈕對象']
設置index參數值為1, howmany參數值為0意味著在第二個元素的位置上新增一個item1元素，原先位置上的Close按鈕對象保留并向后退一位，此時buttons.數組的值就變成了['Today按鈕對象'，'新增的按鈕對象'，'Close按鈕對象']。如果設置howmany的值為1，就會刪除原先位置上的Close按鈕對象，此時buttons.數組的值就變成了['Today按鈕對象'，'新增的按鈕對象']。在本例中新增的按鈕對象為：
01 {
02 text: '確定',
03 handler: function(target){
04 alert('當前選擇的日期是'+$(target).val());
05 }
06 }
提示
在JavaScript中使用{}來表示一個對象。
其中text表示按鈕的名稱，handler為按鈕單擊消息的響應函數，參數target為日期框中的編輯框對象，這樣通過jQuery的取值方法就能輕松獲取當前選中的日期。
圖2.21中在文本框內顯示的日期格式為X（月）/X（日）/X（年），這并不符合中國人的閱讀模式，我們更希望將日期格式改為X年X月X日，此時需要使用formatter和parser屬性來設置，許多初學者可能會寫下如下代碼：
01 <input id="db" type="text" class="easyui-datebox" required="required">
02 <script>
03 $(function(){
04 $('#db').datebox({
05 parser:function(s){
06 var t =Date.parse(s);
07 if (!isNaN(t)){
08 return new Date(t);
09 } else {
10 return new Date();
11 }
12 },
13 formatter:function(date){
14 var y = date.getFullYear();
15 var m = date.getMonth()+1;
16 var d = date.getDate();
17 return y+'年'+m+'月'+d+'日';
18 }
19 });
20 });
21 </script>
最終運行結果如圖2.23所示。
圖2.23 設置日期框的展示值
此時會發現日期的格式雖然顯示正常，但是無論單擊哪一天總是會顯示當前日期，這是因為parser屬性是對初始值以及輸入值進行解析的。我們在數字框章節中講到，parser屬性是將初始值以及輸入值解析成合法的存儲值。例如，上述代碼中通過if(!isNaN(t))來判斷輸入框中的值是否是一個合法的日期格式，如果不是合法日期格式就將當前的日期作為存儲值返回。Date對象的parse方法無法解析中文格式的日期，始終返回當前的日期對象，所以我們會發現無論在日歷中選中哪一天，文本框中始終顯示當前的日期。解決這個問題的方法就是，在parser屬性中將中文格式的日期轉化成Date對象的parse方法所接收的日期格式，例如X（月）/X（日）/X（年）。
使用中文格式日期還存在一個問題，我們無法限制用戶在文本框中按照我們規定的格式輸入日期。例如，我們使用parser屬性的方法對X年X月X日格式日期進行解析，此時如果用戶輸入X（年）/X（月）/X日），那么日期框仍然無法正常運作。解決這個問題的方法就是在對用戶輸入進行解析時判斷多種情況，相關代碼如下：
01 parser: function(s){
02 //使用正則表達式解析用戶輸入
03 //第一種解析的格式X年X月X日
04 var m1 = /\d年\d月\d日/;
05 //第二種解析的格式X/X/X;
06 var m2 = /\d\/\d\/\d/;
07 //第三種解析的格式X.X.X
08 var m3 = /\d\.\d\.\d/;
09 if (m1.test(s)){
10 var tmp1 = s.split("年");
11 var year = tmp1[0];
12 var tmp2 = tmp1[1].split("月");
13 var month= tmp2[0];
14 var tmp3 = tmp2[1].split("日");
15 var day = tmp3[0]
16 return new Date(year+"/"+month+"/"+day);
17 }else if(m2.test(s)){
18 return new Date(s);
19 } else if(m3.test(s)){
20 return new Date(s);
21 }
22 else {
23 return new Date();
24 }
25 },
26 formatter:function(date){
27 var y = date.getFullYear();
28 var m = date.getMonth()+1;
29 var d = date.getDate();
30 return y+'年'+m+'月'+d+"日";
31 }
最終運行結果如圖2.24所示。
圖2.24 設置中文格式的日期框
【本節詳細代碼參見隨書源碼：\源碼\easyui\example\c2\dateboxCHN.html】
3. 日期框事件
日期框常用事件說明見表2.41。
表2.41 日期框常用事件
4. 日期框方法
日期框常用方法說明見表2.42。
表2.42 日期框常用方法
5. 日歷的共用
在網站開發中經常會遇到一個頁面中用到多個日期時間框的情況，通常情況下需要通過日期框的calendar方法獲取其日歷對象，然后對日歷對象進行漢化，但是對每個日期框都使用這種方式會使開發變得十分煩瑣，因此我們可以采用多個日期框共用一個日歷的方法來減少開發的難度。日期框可以通過sharedCalendar屬性和cloneFrom方法來共用日歷。其中sharedCalendar屬性是對日歷進行復用，使用方法如下：
01 <input id="dt1" type="text">
02 <input id="dt2" type="text">
03 <div id="cc"></div>
04 <script>
05 $(function(){
06 $('#dt1').datebox({
07 sharedCalendar:"#cc"
08 });
09 $('#dt2').datebox({
10 sharedCalendar:"#cc"
11 });
12 $('#cc').calendar({
13 current:new Date(),
14 width:400,
15 height:300,
16 firstDay:"1",
17 months:['1月','2月','3月','4月','5月','6月','7月','8月',
18 '9月','10月','11月', '12月'],
19 weeks:['周日','周一','周二','周三','周四','周五','周六'],
20 });
21 });
22 </script>
使用該方法時需要先初始化一個日歷，然后使用sharedCalendar屬性使兩個日期框共同使用這個日歷。
使用日期框的cloneFrom方法也可以完成日歷的共享，與sharedCalendar屬性不同的是，cloneFrom方法會共用指定日期框的全部屬性，也可以稱它是完成日期框的復制操作，例如：
01 <input id="dt1" type="text">
02 <input id="dt2" type="text">
03 <script>
04 $(function(){
05 $('#dt1').datebox({
06 width:300,
07 currentText:"今天",
08 closeText:"關閉",
09
10 });
11 $('#dt1').datebox('calendar').calendar({
12 current:new Date(),
13 width:400,
14 height:300,
15 firstDay:"1",
16 months:['1月','2月','3月','4月','5月','6月','7月','8月',
17 '9月','10月', 17 '11月', '12月'],
18 weeks:['周日','周一','周二','周三','周四','周五','周六'],
19 });
20 $('#dt2').datebox("cloneFrom","#dt1");
21 });
22 </script>
最終運行結果如圖2.25所示。
圖2.25 日期框的復制
【本節詳細代碼參見隨書源碼：\源碼\easyui\example\c2\shareCalendar.html】
2.5.3 日期時間框（DateTimeBox）
日期時間框的使用與日期框一樣，與日期框不同的是日期時間框增加了一個時間微調器用于顯示時間。
日期時間框的依賴關系如下：
- datebox
- timespinner
日期時間框擴展于：
- datebox
日期時間框的默認配置定義在$.fn.datetimebox.defaults中。
1. 日期時間框的用法
使用標記創建日期時間框的方法如下：
<input class="easyui-datetimebox" >
使用JavaScript創建日期時間框的方法如下：
01 <input id="dt" type="text">
02 $('#dt').datetimebox();
2. 日期時間框的屬性
日期時間框常用屬性見表2.43。
表2.43 日期時間框常用屬性
3. 日期時間框的事件
日期時間框無新增和重寫的事件。
4. 日期時間框的方法
日期時間框常用方法見表2.44。
表2.44 日期時間框常用方法
