Skip to content

Latest commit

 

History

History
330 lines (284 loc) · 7.89 KB

index.md

File metadata and controls

330 lines (284 loc) · 7.89 KB
Raw

综述

Calendar是一个为旅行业务量身定制的日历组件

  • 版本：1.2
  • 基于：kissy1.3（兼容kissy1.2，不兼容kissy1.1.6）
  • 作者：昂天

Calendar的特性

  • 支持静态日历展示
  • 支持弹出式日历展示
  • 支持多日历展示
  • 支持节假日信息展示
  • 支持显示节假日前13天，后13天日期信息
  • 支持日期操作范围限定
  • 触发节点支持selector批量设置，共享日历实例

组件Demo

组件快速上手

kissy1.2下需要gallery的包配置：

KISSY.config({
    packages:[
        {
            name   : 'gallery',
            path   : 'http://a.tbcdn.cn/s/kissy/',
            charset: 'utf-8'
        }
    ]
});

kissy1.3就不需要该配置。

1.加载Calendar模块

KISSY.use('gallery/calendar/1.2/index', function(S, Calendar) {

});

提醒：use()的回调，第一个参数是KISSY，第二个参数才是组件实例。

2.初始化Calendar

KISSY.use('gallery/calendar/1.2/index', function(S, Calendar) {
    var calendar = new Calendar(cfg);
});

Calendar类接受一个参数，即组件属性配置。

组件属性说明

参数名 类型 默认值 描述
date Date/String new Date() 日历初始日期
count Number 2 日历个数
selectDate String null 选择的日期
minDate Date/String null 允许操作的最小日期
maxDate Date/String null 允许操作的最大日期
startDate String '' 开始日期
endDate String '' 结束日期
afterDays Number 0 等价于设置minDate和maxDate，minDate未设置时取当前日期
message String '' 提示信息
triggerNode String '' 触发节点，支持批量设置，用半角逗号分隔。弹出式日历必选配置。例('#ID, .className, ...')
finalTriggerNode String '' 触发节点，支持批量设置，用半角逗号分隔。弹出式日历必选配置。例('#ID, .className, ...')
container String '' 放置日历的容器。非弹出式日历必选配置
disabled Array [] 禁止点击的日期数组 ['2013-05-01']
isSelect Boolean false 是否开启下拉列表选择日期，如果开启，日历个数限制为 1
isDateInfo Boolean true 是否显示日期信息
isDateIcon Boolean true 是否显示日期图标
isHoliday Boolean true 是否显示节假日信息
isSameDate Boolean false 是否允许开始时间和结束时间相同

组件事件说明

事件名 回调参数 描述
render {} 渲染日历后触发
show {}.node：触发显示日历的节点 日历显示后触发
hide {}.node：触发隐藏日历的节点 日历隐藏后触发
prevmonth {} 切换至上个月份后触发
nextmonth {} 切换至下个月份后触发
dateclick {}.date：日期字符串
{}.dateInfo：日期信息		 日期点击后触发
showmessage {} 显示提示信息后触发
hidemessage {} 隐藏提示信息后触发
selectchange {}.year：年份
{}.month：月份		 select切换后触发

组件方法说明

render()：设置属性后渲染日历

// 用于设置属性后渲染日历
calendar.render();

prevMonth()：渲染上月日历

// 渲染上月日历
calendar.prevMonth();

nextMonth()：渲染下月日历

// 渲染下月日历
calendar.nextMonth();

show()：显示日历

// 显示日历
calendar.show();

hide()：隐藏日历

// 隐藏日历
calendar.hide();

showMessage()：显示提示信息

// 显示提示信息
calendar.showMessage();

hideMessage()：隐藏提示信息

// 隐藏提示信息
calendar.hideMessage();

getSelectedDate()：获取选择的日期

// 获取选择的日期
calendar.getSelectedDate();

getCurrentNode()：获取当前触发元素节点

// 获取当前触发元素节点
calendar.getCurrentNode();

getDateInfo()：获取指定日期相关信息

// 获取指定日期相关信息
calendar.getDateInfo(‘2013-05-01’); // 劳动节

setDateInfo(date, node)：设置指定触发输入框的日期相关信息

// 设置KissyNode(输入框)的日期信息为劳动节
calendar.setDateInfo(‘2013-05-01’, KissyNode);

syncUI()：同步UI，主要用于动态创建触发元素后使用

//动态创建一个触发元素
S.one('body').append('<input type="text" class=".J_Item" />');
//让新创建的触发元素可以触发日历
calendar.syncUI();