jQuery EasyUI 測試 : Datebox 日期選擇器

 之前測過 jQuery UI 的日期選擇器, 發現看似簡單的元件, 要操控它還真需要不少的設定. EasyUI 號稱 Easy, 是否較容易設定呢? 今天就來測試看看 How easy it is :

# jQuery EasyUI 參考文件
# jQuery EasyUI datebox
# jQuery UI 的日期選擇器

jQuery EasyUI 的日期選擇器 datebox 是 combo 與 calendar 物件的組合, 它與 jQueryUI 的 Datepicker 元件一樣都是用一個文字欄位來承載,  但不同的地方是, datebox 只要指定樣式類別為 easyui-datebox 即可, 不須呼叫 datebox() 方法來將其初始化 :

<input id="datebox1" type="text" class="easyui-datebox" >

如果沒有指定樣式類別, 則必須呼叫 datebox() 方法才行 :

   <input id="datebox2" type="text" >
   <script language="javascript" >
    $(document).ready(function(){
      $("#datebox2").datebox({required:true});
      });
   </script >

在下面範例 1 中, 我們放置了兩個 datebox, 分別展示這兩種用法 :

測試範例 1 : http://tony1966.xyz/test/easyuitest/datebox_1.htm [看原始碼]

   <input id="datebox1" type="text" class="easyui-datebox" >
   <input id="datebox2" type="text" >
   <script language="javascript" >
    $(document).ready(function(){
      $("#datebox2").datebox();
      });
   </script >

左邊那個是用 class 初始化的, 而右邊那個則是用 Javascript 呼叫 datebox() 方法初始化的. 使用 datebox() 初始化的好處是可以傳入物件實體當參數來操控 datebox 的設定, 例如傳入 required:true 即可將此欄位設為必填欄位, 使其具有欄位驗證功能 (validation), 如下列範例 2 :

測試範例 2 : http://tony1966.xyz/test/easyuitest/datebox_2.htm [看原始碼]

  <input id="datebox1" type="text">
  <script language="javascript">
    $(document).ready(function(){
      $("#datebox1").datebox({required:true});
      });
  </script>

可見, datebox 預設是英文介面, 要如何中文化呢? 之前介紹 EasyUI 環境佈署時, 有提到 EasyUI 解壓縮目錄下有一個 locale 資料夾, 底下有各語言的本地化檔案, 其中 easyui-lang-zh_TW.js 即為繁體中文化語言檔, 只要在 head 中引入即可 :

<script type="text/javascript" src="../jquery/easyui-lang-zh_TW.js"></script>

參考 :

# jQuery EasyUI 環境配置

如下列範例 3 所示, 引入繁體中文化檔後, 除了日曆本身外, 連欄位驗證功能也中文化了 :

測試範例 3 : http://tony1966.xyz/test/easyuitest/datebox_3.htm [看原始碼]

以上範例也顯示 datebox 預設開始日為星期日, 要如何指定開始日呢? 這要透過 Calendar 物件才行, 此物件的使用方法可在官網的 Demo 中找到 :

# EasyUI Calendar 範例
# EasyUI Calendar 物件

初始化 datebox 後, 再次呼叫 datebox(), 並傳入字串 "calendar" 即傳回 Calendar 物件, 然後呼叫此物件的 calendar() 方法, 並傳入 firstDay 屬性即可, 其值 0~6, 分別對應星期日 (0), 星期一 (1) 到星期日 (6), 如下面範例四所示 :

測試範例 4 : http://tony1966.xyz/test/easyuitest/datebox_4.htm [看原始碼]

  <input id="datebox1" type="text">
  <script language="javascript">
    $(document).ready(function(){
      $("#datebox1").datebox();
      var c=$("#datebox1").datebox("calendar");
      c.calendar({firstDay:1});
      });
  </script>

其次, 能不能限制只有某個範圍的日期可選?  jQuery UI 的 datepicker 有 minDate 與 maxDate 可供設定, 但 EasyUI 沒有類似的屬性, 而是透過 callback 方法傳回 true/false 值給 calendar 物件的 validator 屬性來控制該日可選還是不可選, 如範例 5 所示 :

測試範例 5 : http://tony1966.xyz/test/easyuitest/datebox_5.htm [看原始碼]

  <script language="javascript">
    $(document).ready(function(){
      $("#datebox1").datebox();
      var c=$("#datebox1").datebox("calendar");
      c.calendar({
        validator:function(date){
                    var now=new Date();
                    var Y=now.getFullYear();
                    var M=now.getMonth();
                    var D=now.getDate();
                    var start=new Date(Y, M, D);
                    var end=new Date(Y, M, D + 7);
                    var selectable=date >= start && date <= end;
                    return selectable;
                    }    
        });
      });
  </script>

可見只有 11/5 ~ 11/12 這 7 天可被選擇. 此例中我們是要讓即日起之 7 日為可選擇之日期, 同樣先取得 datebox 中的 calendar 物件, 然後以一個 callback 方法的傳回值來更新 validator 屬性值. 此 callback 方法會傳入日曆中的日期, 利用 Date 物件製作今日與 7 日後之日期物件, 若日期落在此區間傳回 true, 否則傳回 false.

如果要限制周休兩日不能選該怎麼做呢? 這就要用到 calendar 物件的 getDay() 方法, 它會傳回星期幾 (0~6, 0 為星期日), 判斷其值為 0 或 6 時傳回 false 即可, 如下面範例 5-1 所示 :

測試範例 5-1 : http://tony1966.xyz/test/easyuitest/datebox_5_1.htm [看原始碼]

  <input id="datebox1" type="text">
  <script language="javascript">
    $(document).ready(function(){
      $("#datebox1").datebox();
      var c=$("#datebox1").datebox("calendar");
      c.calendar({
        validator:function(date){
                    var day=date.getDay();
                    if (day==0||day==6){return false;}
                    else {return true;}
                    }    
        });
      });
  </script>

由以上的範例可知, datebox 預設是將今日日期高亮度顯示 (預設日期), 這可以利用 setValue 參數來更改設定, 如下面範例 6 所示 :

測試範例 6 : http://tony1966.xyz/test/easyuitest/datebox_6.htm [看原始碼]

  <input id="datebox1" type="text">
  <script language="javascript">
    $(document).ready(function(){
      $("#datebox1").datebox(); //先初始化
      $("#datebox1").datebox("setValue","11/25/2014");
      });
  </script>

接下來是最重要的日期格式, datebox 預設是 MM/DD/YYYY 格式, 但我的資料庫設計習慣用 YYYY-MM-DD 格式, 該怎麼改呢? 這需要用到 formatter 與 parser 這兩個屬性, 如下列範例 7 所示 :

測試範例 7 : http://tony1966.xyz/test/easyuitest/datebox_7.htm [看原始碼]

  <input id="datebox1" type="text">
  <script language="javascript">
    $(document).ready(function(){
      $("#datebox1").datebox({
        formatter:function(date){
          var y=date.getFullYear();
          var m=date.getMonth()+1;
          var d=date.getDate();
          return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);      
          },
          },
        parser:function(s){
          var t=Date.parse(s);
          if (!isNaN(t)) {return new Date(t);}
          else {return new Date();}
          }    
        });
      });
  </script>

此處的 formatter 屬性用來格式化要輸出在文字欄位中的日期字串, 此字串由 callback 方法傳回, 它會傳入所選之 Date 物件, 我們利用 getYear(), getMonth(), 與 getDate() 來取得所選日期之年月日, 然後組成所要的日期字串格式後傳回即可. 其中 getMonth() 要加一是因為其值為 0~11, 對應 1~12 月就要加 1. 其次, parse 屬性則是用來剖析日期字串, 如果不是數字, 就傳回該日期, 否則就傳回今日.

如果要讀取 datebox 的內容 (選取的日期), 使用 jQuery 的 val() 方法是無法取得的, 必須使用 datebox 的 getValue 參數才行, 如下列範例 8 所示 :

測試範例 8 : http://tony1966.xyz/test/easyuitest/datebox_8.htm [看原始碼]

  <input id="datebox1" type="text">
  <a href="#" id="val" class="easyui-linkbutton">用 val() 讀取</a>
  <a href="#" id="getValue" class="easyui-linkbutton">用 getValue 讀取</a>
  <script language="javascript">
    $(document).ready(function(){
      $("#datebox1").datebox({
        formatter:function(date){
          var y=date.getFullYear();
          var m=date.getMonth()+1;
          var d=date.getDate();
          return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);      
          },
        parser:function(s){
          var t=Date.parse(s);
          if (!isNaN(t)) {return new Date(t);}
          else {return new Date();}
          }    
        });
      $('#val').bind('click', function(){
        var date=$("#datebox1").val();
        $.messager.alert("您選取的日期 val()", date);
        });
      $('#getValue').bind('click', function(){
        var date=$("#datebox1").datebox("getValue");
        $.messager.alert("您選取的日期 getValue", date);
        });
      });
  </script>

可見用 jQuery 的 val() 讀到空字串, 而用 getValue 參數則可成功讀取, 這是必須特別注意之處.

參考資料 :

# JQuery easyui and Datejs date conflict
# jquery easyui datebox 的使用