Skip to content

fugm/PriceCalendar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#酒店价格日历

####基于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

    概述

    点击确定按钮事件

    示例

     var oCalendar = new Y.PriceCalendar();
     	oCalendar.on('confirm', function(e) {
         	//do something
     	});
    
  • ####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
     	});
    

About

酒店价格日历

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published