logo

iMAG移动应用开发指南

Calendar

日历控件,用来显示日历视图

标签

标签名 描述 说明
calendar 日历标签 显示日历,可用来开发日程管理功能

属性

属性名 取值 描述
id String id编码
style String
calendar样式,包括:
date String 初始定位的日期,格式为"yyyy-MM-dd",默认为当天
month String 获取当前的月份,格式为"yyyy-MM"
value String 当前选择的日期,格式为"yyyy-MM-dd",默认为空
onselect Javascript 选择某个日期时触发的脚本
onmonthchange Javascript 左右切换月份时触发的事件

方法

方法名 参数 返回值 描述
css(name:String) name:样式名称 String 根据样式名称得到样式的值
css(name:String, value:String)
name:样式名称
value:样式值
None 设置单个样式
css(style:String) style:样式文本,多个样式用分号分隔 None 设置多个样式
css(style:Object) style:样式对象,键值对形式 None 设置多个样式
mark(date:String) date:需要标记的日期,多个用逗号分隔 None 用圆点标记出有事件的日历项

控件详解

● 日历控件

<calendar/>

效果:

<calendar date="2012-12-01"/>

● 隐藏日历

$('test_calendar').css('display', 'none');
$('test_calendar').css('display', 'hidden');

● 显示日历

$('test_calendar').css('display', 'block');

● 创建日历

var calendar = $C('<calendar id="test_calendar" date="1982-10-19"/>');
$('test_content').add(calendar);

● 选择日期

<calendar id="test_calendar" onselect="hint(this.value)"/>

效果:

● 切换月份

<calendar id="test_calendar" onmonthchange="hint(this.month)"/>

● 设置初始日期

<calendar id="test_calendar" date="1982-10-19"/>

效果:

● 标记日历项

$('test_calendar').mark('2013-02-07,2013-02-09,2013-02-21');

效果:

示例下载

请点此下载calendar相关的示例代码:imag-calendar.zip