jQuery EasyUI 表单插件 - Calendar 日历

jQuery EasyUI 教程 · 2019-04-07 18:56:57

通过 $.fn.calendar.defaults 重写默认的 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()
});

属性

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

方法

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

点击查看所有 jQuery EasyUI 教程 文章: https://codercto.com/courses/l/42.html

查看所有标签

因计算机而强大

因计算机而强大

[美]西摩 佩珀特 Seymour Papert / 梁栋 / 新星出版社 / 2019-1 / 38

本书有两个中心主题—— 孩子可以轻松自如地学习使用计算机; 学习使用计算机能够改变他们学习其他知识的方式。 (前苹果公司总裁 约翰·斯卡利) 最有可能带来文化变革的就是计算机的不断普及。 计算机不仅是一个工具,它对我们的心智有着根本和深远的影响。 计算机不仅帮助我们学习 ,还帮助我们学习怎样学习。 计算机是一种调解人与人之间关系的移情对象。 一个数学的头脑......一起来看看 《因计算机而强大》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

SHA 加密
SHA 加密

SHA 加密工具