EasyUI中Calendar日历的简单使用

最新推荐文章于 2020-04-10 20:53:06 发布

霸道流氓气质

最新推荐文章于 2020-04-10 20:53:06 发布

阅读量1.1k

点赞数

分类专栏：前端那些骚操作文章标签： Calendar

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/93227598

版权

前端那些骚操作专栏收录该内容

471 篇文章 16 订阅

订阅专栏

场景

效果

属性

名称	类型	描述	默认值
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>

霸道流氓气质

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
EasyUI中Calendar日历的简单使用

场景效果属性名称类型描述默认值 width number 日历（calendar）组件的宽度。 180 height number 日历（calendar）组件的高度。 180 fit boolean 当设置为 true 时，则设置日历的尺寸以适应它的父容器。 false border ...
复制链接

扫一扫