第二百一十九節，jQuery EasyUI，DateTimeBox(日期時間輸入框)組件

jQuery EasyUI，DateTimeBox(日期時間輸入框)組件

學習要點：

　　1.加載方式

　　2.屬性列表

　　3.方法列表

 

本節課重點了解 EasyUI 中 DateTimeBox(日期時間輸入框)組件的使用方法，這個組 件依賴於 DateBox(日期輸入框)組件和 TimeSpinner(時間微調)組件。

 

一．加載方式

class 加載方式

<input id="box" class="easyui-datetimebox">

datetimebox()將一個輸入框執行日期時間輸入框組件方法

JS 加載調用

$(function () {
    $('#box').datetimebox({
        value: '2015-6-1 15:11:12',
    });
});

 

 

二．屬性列表

DataTimeBox 屬性，擴展自 DateBox(日期輸入框)組件

showSeconds   boolean 定義是否顯示秒鐘信息。默認值爲 false。

$(function () {
    $('#box').datetimebox({
        showSeconds:true
    });
});

 

timeSeparator   String 定義在小時、分鐘和秒之間的時間分割線。默認爲「：」。

$(function () {
    $('#box').datetimebox({
        showSeconds:true,
        timeSeparator:'/'
    });
});

 

 

三．方法列表

DateTimeBox 方法，擴展自 DateBox(驗證框)

 

options   none 返回屬性對象。

$(function () {
    $('#box').datetimebox({
        showSeconds:true,
    });
    alert($('#box').datetimebox('options'));
});

 

setValue   value 設置日期時間輸入框的值。

$(function () {
    $('#box').datetimebox({
        showSeconds: true,
    });
    //取值賦值
    $('#box').datetimebox('setValue', '2015-6-1 11:11:11');
    alert($('#box').datetimebox('getValue'));
});

 

spinner   None 返回時間微調器對象。

 

$(function () {
    $('#box').datetimebox({
        showSeconds: true,
    });
    $('#box').datetimebox('spinner').spinner('getValue');  //返回時間微調器對象,設置時間微調值
});

 

 

 

咱們可使用$.fn.datetimebox.defaults 重寫默認值對象。