场景

效果

属性

名称	类型	描述	默认值
width	number	日历（calendar）组件的宽度。	180
height	number	日历（calendar）组件的高度。	180
fit	boolean	当设置为 true 时，则设置日历的尺寸以适应它的父容器。	false
border	boolean	定义是否显示边框。	true
firstDay	number	定义每星期的第一天。星期日（Sunday）是 0，星期一（Monday）是 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	日历的年。下面的实例演示如何使用指定的年和月来创建一个日历。 <div class="easyui-calendar" data-options="year:2012,month:6" />	当前年份（4 位）
month	number	日历的月。	当前月份（从 1 开始）
current	Date	当前的日期。	当前日期

事件

名称	参数	描述
onSelect	date	当用户选择一个日期时触发。代码实例： $('#cc').calendar({ onSelect: function(date){ alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate()); } });

名称

参数

描述

onSelect

date

当用户选择一个日期时触发。
代码实例：

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

方法

名称	参数	描述
options	none	返回选项（options）对象。
resize	none	调整日历的尺寸。
moveTo	date	移动日历到一个指定的日期。代码实例： $('#cc').calendar('moveTo', new Date(2012, 6, 1));

名称

参数

描述

options

none

返回选项（options）对象。

resize

none

调整日历的尺寸。

moveTo

date

移动日历到一个指定的日期。
代码实例：

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

实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>
<div id="cc1"></div>
<script type="text/javascript">$('#cc1').calendar({onSelect: function(date){alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());}});
</script>
</body>
</html>

EasyUI中Calendar日历的简单使用相关推荐

element-ui组件库中Calendar日历组件使用心得（可能用到的常用方法和如何添加监听）
最近接触到一个需求,做一个值班排班表,拿到低保真之后一直在考虑是如何实现这个排班表,考虑过自己写,也考虑过@fullcalendar/vue插件,经过一些评估之后最终选择了项目本身使用的element ...
EasyUI中layout布局的简单使用
场景效果布局选项(Layout Options) 名称类型描述默认值 fit boolean 当设置为 true 时,就设置布局(layout)的尺寸适应它的父容器.当在 'body' 标签 ...
EasyUI中Dialog对话框的简单使用
场景效果属性该属性扩展自窗口(window)下面是为对话框(dialog)重写的属性. 名称类型描述默认值 title string 对话框的标题文本. New Dialog collap ...
EasyUI中菜单Menu的简单使用
场景效果菜单项菜单项(menu item)代表一个显示在菜单中的单独的项目.它包含下列属性: 名称类型描述默认值 id string 菜单项(menu item)的 id 属性. te ...
EasyUI中Panel面板的简单使用
场景效果属性名称类型描述默认值 id string 面板(panel)的 id 属性. null title string 显示在面板(panel)头部的标题文字. null iconCl ...
Java中Calendar日历类
首先我们使用这个类可以用来获取到日历我们要使用一个类首先就是实例化,方法如下: 成员方法: Date getTime() 获取当前时间使用默认方式: void setTime(D ...
EasyUI中Window窗口的简单使用
场景效果属性该属性扩展自面板(panel),下面是为窗口(window)重写和添加的属性. 名称类型描述默认值 title string 窗口的标题文本. New Window colla ...
EasyUI中进度条的简单使用
场景效果属性名称类型描述默认值 width string 设置进度条(progressbar)的宽度. auto height number 组件的高度.该属性自版本 1.3.2 起可用. ...
EasyUI中搜索框的简单使用
场景基本搜索框流式搜索框搜索框类别实现基本搜索框 <!DOCTYPE html> <html lang="en"> <head>< ...

EasyUI中Calendar日历的简单使用

场景

效果

属性

事件

方法

实现

EasyUI中Calendar日历的简单使用相关推荐

最新文章

热门文章