第二百一十四節，jQuery EasyUI，Calendar(日曆)組件

jQuery EasyUI，Calendar(日曆)組件

 

學習要點：

　　1.加載方式

　　2.屬性列表

　　3.事件列表

　　4.方法列表

 

本節課重點了解 EasyUI 中 Canlendar(日曆)組件的使用方法，這個組件不依賴於其 他組件。

 

一．加載方式

class 加載方式

<div id="box" class="easyui-calendar" style="width:200px;height:200px;"></div>

calendar()將一個元素執行日曆組件

 

JS 加載調用

$(function () {
    $('#box').calendar({

    });
});

 

 

二．屬性列表

 

width   number 日曆控件寬度。默認值180。

$(function () {
    $('#box').calendar({
        width:400,
        height:300
    });
});

 

height   number 日曆控件高度。默認值180。

$(function () {
    $('#box').calendar({
        width:400,
        height:300
    });
});

 

fit   boolean 當設置爲 true 的時候，將設置日曆控件大小自適應父容器。默認值 false。

$(function () {
    $('#box').calendar({
        width:400,
        height:300,
        fit:true        //當設置爲 true 的時候，將設置日曆控件大小自適應父容器。默認值 false。
    });
});

 

border   boolean 定義是否顯示邊框。默認值 true。

$(function () {
    $('#box').calendar({
        width:400,
        height:300,
        border:false    //定義是否顯示邊框。默認值 true。
    });
});

 

firstDay   number 定義一週的第一天是星期幾。0=星期日、1=星期一 等。定義星期幾的排序0從星期日排序1從星期一排序

$(function () {
    $('#box').calendar({
        width:400,
        height:300,
        firstDay:1  //定義星期幾的排序0從星期日排序1從星期一排序
    });
});

 

weeks   array顯 示 的 周 列 表 內 容 。 默 認 值 ：['S','M','T','W','T','F','S']，定義星期幾的顯示文字

$(function () {
    $('#box').calendar({
        width:400,
        height:300,
        weeks:['S','M','T','W','T','F','S']  //定義星期幾的顯示文字
    });
});

 

months   array顯示的月列表內容。默認值：['Jan','Feb', 'Mar', 'Apr', 'May','Jun', 'Jul', 'Aug','Sep', 'Oct', 'Nov', 'Dec']，定義月份顯示文字

$(function () {
    $('#box').calendar({
        width:400,
        height:300,
        months:['Jan','Feb', 'Mar', 'Apr', 'May','Jun', 'Jul', 'Aug','Sep', 'Oct', 'Nov', 'Dec']
    });
});

 

year   number 年日曆。下面的例子顯示瞭如何使用指定的年份和月份建立一個日曆。設置默認年份

$(function () {
    $('#box').calendar({
        width:400,
        height:300,
        year:1984,      //設置默認年份
        month:9,        //設置默認月份
    });
});

 

month   number 月日曆。設置默認月份

$(function () {
    $('#box').calendar({
        width:400,
        height:300,
        year:1984,      //設置默認年份
        month:9,        //設置默認月份
    });
});

 

current   date 當前日期，設置默認當前日期

$(function () {
    $('#box').calendar({
        width:400,
        height:300,
        year:1984,      //設置默認年份
        month:9,        //設置默認月份
        current:new Date(1984,8,25)  //設置默認當前日期,月份從0開始因此9月就寫8月
    });
});

 

formatter   date 格式化日期，就是能夠給每一個日期添加自定義字符

$(function () {
    $('#box').calendar({
        width:400,
        height:300,
        formatter:function (date) {
            return '#' + date.getDate(); }
    });
});

 

styler   date 設置指定日期的樣式，設置日期的樣式

$(function () {
    $('#box').calendar({
        width: 400,
        height: 300,
        styler: function (date) {
            if (date.getDate() == 1) {  //將每個月1日改變樣式
                return 'background-color:#ccc'; } }
    });
});

 

validator   date 設置指定日期是否能夠選擇

$(function () {
    $('#box').calendar({
        width: 400,
        height: 300,
        validator: function (date) {
            if (date.getDay() == 1) {  //將每一個星期一設置爲不可用
                return false
            }else {
                return true } }
    });
});

 

 

三．事件列表

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

$(function () {
    $('#box').calendar({
        width: 400,
        height: 300,
        onSelect: function (date) {
            alert(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate());
            // date.getFullYear()用戶選擇的年
            // date.getMonth()用戶選擇的月
            // date.getDate()用戶選擇的日
 }
    });
});

 

onChange   newDate, oldDate 在用戶改變選擇的時候觸發。

 

$(function () {
    $('#box').calendar({
        width: 400,
        height: 300,
        onChange: function (newDate, oldDate) {
            alert(newDate + '|' + oldDate);
            // newDate改變後的日期
            // oldDate改變前的日期
 }
    });
});

 

 

 

四．方法列表

options   none 返回參數對象。

$(function () {
    $('#box').calendar({
        width: 400,
        height: 300,
    });
    alert($('#box').calendar('options'));  //返回參數對象
});

 

resize   none 調整日曆大小。就是若是日曆變形後重置

$(function () {
    $('#box').calendar({
        width: 400,
        height: 300,
    });
    $('#box').calendar('resize');  //調整日曆大小。
});

 

moveTo   date 移動日曆到指定日期。默認選擇日期

$(function () {
    $('#box').calendar({
        width: 400,
        height: 300,
    });
    $('#box').calendar('moveTo',new Date(2015,1,1));  //移動日曆到指定日期
});

 

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