第二百一十五節，jQuery EasyUI，DateBox(日期輸入框)組件

jQuery EasyUI，DateBox(日期輸入框)組件

 

學習要點：

　　1.加載方式

　　2.屬性列表

　　3.事件列表

　　4.方法列表

 

本節課重點了解 EasyUI 中 DateBox(日期輸入框)組件的使用方法，這個組件依賴於 Combo(自定義下拉框)和 Calendar(日歷)。

 

一．加載方式

class 加載方式

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

datebox()將一個輸入框元素執行日期輸入框方法

 

JS 加載調用

$('#box').datebox({
});

 

二．屬性列表

Datebox 屬性，擴展自 Combo(自定義下拉框)組件，所以Combo(自定義下拉框)組件的屬性也是有效的

 

panelWidth   number 下拉日歷面板寬度。默認值180。

$(function () {
    $('#box').datebox({
        panelWidth:147,
        panelHeight:200
    });
});

 

panelHeight   number 下拉日歷面板高度。默認值 auto。

$(function () {
    $('#box').datebox({
        panelWidth:147,
        panelHeight:200
    });
});

 

currentText   string 顯示當天按鈕。默認值 Today。設置今天按鈕文字

$(function () {
    $('#box').datebox({
        panelWidth:147,
        panelHeight:200,
        currentText:'T',
        closeText:'C'
    });
});

 

closeText   string 顯示關閉按鈕。默認值 Close。設置關閉按鈕文字

$(function () {
    $('#box').datebox({
        panelWidth:147,
        panelHeight:200,
        currentText:'T',
        closeText:'C'
    });
});

 

okText   string 顯示 OK 按鈕。默認值 Ok。異常

 

disabled   boolean 該屬性值為 true 時禁用該字段。默認值 false。

$(function () {
    $('#box').datebox({
        panelWidth:147,
        panelHeight:200,
        disabled:true   //該屬性值為 true 時禁用該字段。默認值 false。
    });
});

 

buttons   array 在日歷下面的按鈕。拓展日歷下面的按鈕

$(function () {
    //插入拓展按鈕
    var buttons = $.extend([], $.fn.datebox.defaults.buttons);
    buttons.splice(1, 0, {
        text: '確定',   //按鈕名稱
        handler: function (target) {
            alert('確定'); } });

    $('#box').datebox({
        panelWidth: 147,
        panelHeight: 200,
        buttons: buttons //自定義拓展按鈕
    });
});

 

sharedCalendar   string,selector 將 一 個 日 歷 控 件 共 享 給 多 個datebox 控件使用。默認值 null。就是將一個設置好的日歷組件共用到多個輸入框

 html

<input class="box">
<input class="box">
<!--一個div-->
<div id="sc"></div>

js

$(function () {
    $('.box').datebox({             //將兩個輸入框，執行日期輸入框方法
        panelWidth: 147,
        panelHeight: 200,
        sharedCalendar:'#sc'        //將日歷控件指向id為sc的元素
    });
    $('#sc').calendar({             //將id為sc元素執行日歷方法
        firstDay:1
    })
});

 

formatter   function該函數用於格式化日期，它有一個'date'參數並且會返回一個字符串類型的值。下面的一個例子展示了如何重寫默認的 formatter 函數。格式化日期

$(function () {
    $('#box').datebox({             
        panelWidth: 147,
        panelHeight: 200,
        formatter:function (date) {  //重新格式化如果，以/作為分隔符
            return date.getFullYear() + '/' + date.getMonth() + 1 + '/' + date.getDate(); }
    });
});

 

parser   function該函數用於解析一個日期字符串，它有一個'date'字符串參數並且會返回一個日期類型的值。將輸入框的日期固定一個日期值，無論怎么選擇它都是這個值

$(function () {
    $('#box').datebox({
        panelWidth: 147,
        panelHeight: 200,
        parser:function (date) {
            return new Date(2015,6,1); }
    });
});

 

 

三．事件列表

onSelect   date 在用戶選擇一天的時候觸發。

$(function () {
    $('#box').datebox({
        panelWidth: 147,
        panelHeight: 200,
        onSelect:function (date) {      //在用戶選擇一天的時候觸發
            alert(date.getFullYear() + ":" + (date.getMonth() + 1) + ":" + date.getDate());
        }
    });
});

 

 

四．方法列表

 

options   none 返回參數對象。

$(function () {
    $('#box').datebox({
        panelWidth: 147,
        panelHeight: 200,
    });
    alert($('#box').datebox('options'));
});

 

calendar   none 返回日歷對象。

$(function () {
    $('#box').datebox({
        panelWidth: 147,
        panelHeight: 200,
    });
    //得到日歷對象，再將日歷的星期一放到最前面
    $('#box').datebox('calendar').calendar({
        firstDay: 1,
    });
});

 

setValue   value 設置日期輸入的值。初始化日歷輸入框里的value值

 

$(function () {
    $('#box').datebox({
        panelWidth: 147,
        panelHeight: 200,
    });
    $('#box').datebox('setValue','2015-6-1');   //初始化日歷輸入框里的value值
});

 

 

我們可以使用$.fn.databox.defaults 重寫默認值對象。