第二百一十四节，jQuery EasyUI，Calendar(日历)组件

Posted 2020-09-08 林贵秀

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 重写默认值对象。