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