easyUI Calendar

最新推荐文章于 2019-12-25 15:32:55 发布

雨泽

最新推荐文章于 2019-12-25 15:32:55 发布

阅读量3.1k

点赞数 2

分类专栏： javascript 文章标签： calendar date javascript class border function

javascript 专栏收录该内容

164 篇文章

订阅专栏

本文详细介绍了EasyUI Calendar组件的基本用法、关键属性、事件与方法，包括如何创建Calendar、设置属性如宽度、高度、第一周开始日等，并提供了实例代码演示。此外，还介绍了如何通过事件响应用户操作，以及如何调整Calendar大小和移动到特定日期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@author YHC

覆盖默认值$.fn.calendar.defaults.

calendar 显示一个月份的日历,允许用户选择日期和移动到下一个和上一个月,默认值,一周的第一天设置在星期天,可以允许改变这个默认值,通过设置

'firstDay'属性的值.

使用示例

从标记创建calendar

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

使用javascript创建calendar

<div id="cc" style="width:180px;height:180px;"></div>

$('#cc').calendar({  
    current:new Date()  
});

属性

Name	Type	Description	Default
width	number	calendar 组件的宽度.	180
height	number	calendar 组件的高度.	180
fit	boolean	当设置为true的时候,设置calendar大小适应它的父容器.	false
border	boolean	定义是否显示border(边框).	true
firstDay	number	定义一周的第一天. 星期日是 0, 星期一是1, ...	0
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	calendar的年. 以下示例展示如何使用特定的年和月创建一个calendar . <div class="easyui-calendar" data-options="year:2012,month:6" />	current year(four digits)
month	number	calendar的月.	current month, start with 1
current	Date	当前日期.	current date

事件

Name	Parameters	Description
onSelect	date	当用户选择一个日期的时候触发. 示例代码: $('#cc').calendar({ onSelect: function(date){ alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate()); } });

Name

Parameters

Description

onSelect

date

当用户选择一个日期的时候触发.

示例代码:

$('#cc').calendar({
	onSelect: function(date){
		alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
	}
});

方法

Name	Parameter	Description
options	none	返回options 对象.
resize	none	调整 calendar 大小.
moveTo	date	移动calendar到特定的日期. 示例代码: $('#cc').calendar('moveTo', new Date(2012, 6, 1));

Name

Parameter

Description

options

none

返回options 对象.

resize

none

调整 calendar 大小.

moveTo

date

移动calendar到特定的日期.

示例代码:

$('#cc').calendar('moveTo', new Date(2012, 6, 1));

以上如果有错误信息,请指出,thanks!

easyUI Calendar

使用示例

属性

事件

方法 Name Parameter Description options none 返回options 对象. resize none 调整 calendar 大小. moveTo date 移动calendar到特定的日期. 示例代码: $('#cc').calendar('moveTo', new Date(2012, 6, 1)); ﻿ 以上如果有错误信息,请指出,thanks!

方法

方法

Name Parameter Description
options none 返回options 对象.
resize none 调整 calendar 大小.
moveTo date 移动calendar到特定的日期.
示例代码:

$('#cc').calendar('moveTo', new Date(2012, 6, 1));

以上如果有错误信息,请指出,thanks!