EasyUI 日历

来源：互联网发布：有网络无法连接编辑：程序博客网时间：2024/06/05 11:08

日历（calendar）显示允许用户选择日期的一个月份日历，并允许移动到上一月和下一页。默认情况下，每星期的第一天设置为星期日。这可以通过设置 'firstDay' 属性的值来改变。

1、用法

（1）、从标记创建日历（calendar）。

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

（2）、使用 javascript 创建日历（calendar）。

<div id="cc" style="width:180px;height:180px;"></div>$('#cc').calendar({    current:new Date()});

2、属性

名称

类型

描述

默认值

width

number

日历（calendar）组件的宽度。

180

height

number

日历（calendar）组件的高度。

180

fit

boolean

当设置为 true 时，则设置日历的尺寸以适应它的父容器。

false

border

boolean

定义是否显示边框。

true

firstDay

number

定义每星期的第一天。星期日（Sunday）是 0，星期一（Monday）是 1，...

weeks

array

显示星期的列表。

['S','M','T','W','T','F','S']

months

array

显示月份的列表。

['Jan', 'Feb', 'Mar', 'Apr',

'May', 'Jun', 'Jul', 'Aug',

'Sep', 'Oct','Nov', 'Dec']

year

number

日历的年。下面的实例演示如何使用指定的年和月来创建一个日历。

当前年份（4 位）

month

number

日历的月。

当前月份（从 1 开始）

current

Date

当前的日期。

当前日期

3、事件

名称

参数

描述

onSelect

date

当用户选择一个日期时触发。

4、方法

名称

参数

描述

options

none

返回选项（options）对象。

resize

none

调整日历的尺寸。

moveTo

date

移动日历到一个指定的日期。

5、实例

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Basic Calendar - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../css/easyui.css"><link rel="stylesheet" type="text/css" href="../css/icon.css"><link rel="stylesheet" type="text/css" href="../css/demo.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script></head><body><div style="float:left;width:auto"><div style="margin:20px 0"></div><h2>基本日历</h2><div class="easyui-calendar" style="width:250px;height:250px;"></div><div style="margin:20px 0"></div><h2>自定义日历</h2><div class="easyui-calendar" style="width:250px;height:250px;" data-options="formatter:formatDay"></div><script>var d1 = Math.floor((Math.random()*30)+1);var d2 = Math.floor((Math.random()*30)+1);function formatDay(date){var m = date.getMonth()+1;var d = date.getDate();var opts = $(this).calendar('options');if (opts.month == m && d == d1){return '<div class="icon-ok md">' + d + '</div>';} else if (opts.month == m && d == d2){return '<div class="icon-search md">' + d + '</div>';}return d;}</script><style scoped="scoped">.md{height:16px;line-height:16px;background-position:2px center;text-align:right;font-weight:bold;padding:0 2px;color:red;}</style></div><div style="float:left;width:auto;height:auto;margin-left:10px;"><div style="margin:20px 0"></div><h2>禁用的日历日期</h2><div class="easyui-calendar" style="width:250px;height:250px;" data-options="validator: function(date){if (date.getDay() == 1){return true;} else {return false;}}"></div><div style="margin:20px 0"></div><h2>每周的第一天</h2><div style="margin:20px 0"><select onchange="$('#cc').calendar({firstDay:this.value})"><option value="0">Sunday</option><option value="1">Monday</option><option value="2">Tuesday</option><option value="3">Wednesday</option><option value="4">Thursday</option><option value="5">Friday</option><option value="6">Saturday</option></select></div><div id="cc" class="easyui-calendar" style="width:250px;height:250px;"></div></div></body></html>

0 0