酒店价格日历

基于YUI3开发的价格日历组件

@name：Y.PriceCalendar
@requires：['node', 'base-base', 'event-mouseenter']

快速上手

引入文件

在页面head引入YUI3.x.x种子

<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>

配置

var config = {

    modules: {

        'price-calendar': {

            fullpath: 'price-calendar.js', //根据项目路径调整

            type    : 'js',

            requires: ['price-calendar-css']

        },

        'price-calendar-css': {

            fullpath: 'price-calendar.css', //根据项目路径调整

            type    : 'css'

        }

    }

};

使用

YUI(config).use('price-calendar', function(Y) {

    var oCalendar = new Y.PriceCalendar();    

    //do something

});

配置参数

date

概述

(默认值：当前日期) 日历初始日期

类型

{Date|String}

data

概述

(默认值：null) 酒店房态数据

类型

{Object}

{

 "2012-05-01": {

 "price"  : "100",

     "roomNum": "10"

 },

 "2012-05-02": {

     "price"  : "120",

     "roomNum": "1"

 },

 "2012-05-03": {

     "price"  : "150",

     "roomNum": "25"

 }

 }

count

概述

(默认值：2) 日历个数

类型

{Number}

minDate

概述

(默认值：null) 允许操作的最小日期

类型

{Date|String}

maxDate

概述

(默认值：null) 允许操作的最大日期

类型

{Date|String}

depDate

概述

(默认值：空) 入住时间

类型

{String}

endDate

概述

(默认值：空) 离店时间

类型

{String}

afterDays

概述

(默认值：0) 等价于设置minDate和maxDate，minDate未设置时取当前日期

类型

{Number}

接口

render()

概述

用于设置参数后渲染日历UI

返回值

日历对象，可做链式操作

prevMonth()

概述

渲染上月日历UI

返回值

日历对象，可做链式操作

nextMonth()

概述

渲染下月日历UI

返回值

日历对象，可做链式操作

自定义事件

render

概述

渲染日历UI事件

示例

var oCalendar = new Y.PriceCalendar();

 oCalendar.on('render', function(e) {

     //do something

});

prevmonth

概述

点击上月按钮事件

示例

var oCalendar = new Y.PriceCalendar();

 oCalendar.on('prevmonth', function(e) {

     //do something

});

nextmonth

概述

点击下月按钮事件

示例

var oCalendar = new Y.PriceCalendar();

 oCalendar.on('nextmonth', function(e) {

     //do something

});

checkin

概述

点击入住日期事件

示例

var oCalendar = new Y.PriceCalendar();

 oCalendar.on('checkin', function(e) {

     //do something

});

checkout

概述

点击离店日期事件

示例

var oCalendar = new Y.PriceCalendar();

 oCalendar.on('checkout', function(e) {

     //do something

 });

confirm

概述

点击确定按钮事件

示例

概述

点击取消按钮事件

cancel

概述

点击取消按钮事件

示例

var oCalendar = new Y.PriceCalendar();

 oCalendar.on('cancel', function(e) {

     //do something

});

配置参数改变事件

dateChange

概述

设置date参数触发事件

示例

var oCalendar = new Y.PriceCalendar();

 oCalendar.on('dateChange', function(e) {

     //do something

});

dataChange

概述

设置data参数触发事件

示例

var oCalendar = new Y.PriceCalendar();

 oCalendar.on('dataChange', function(e) {

     //do something

});

countChange

概述

设置count参数触发事件

示例

var oCalendar = new Y.PriceCalendar();

 oCalendar.on('countChange', function(e) {

     //do something

});

minDateChange

概述

设置minDate参数触发事件

示例

var oCalendar = new Y.PriceCalendar();

 oCalendar.on('minDateChange', function(e) {

     //do something

});

maxDateChange

概述

设置maxDate参数触发事件

示例

var oCalendar = new Y.PriceCalendar();

 oCalendar.on('maxDateChange', function(e) {

     //do something

});

depDateChange

概述

设置depDate参数触发事件

示例

var oCalendar = new Y.PriceCalendar();

 oCalendar.on('depDateChange', function(e) {

     //do something

});

endDateChange

概述

设置endDate参数触发事件

示例

var oCalendar = new Y.PriceCalendar();

 oCalendar.on('endDateChange', function(e) {

     //do something

});

afterDaysChange

概述

设置afterDays参数触发事件

示例

var oCalendar = new Y.PriceCalendar();

 oCalendar.on('afterDaysChange', function(e) {

     //do something

});