酒店价格日历

文档索引

• 快速上手

• 配置参数

  • date
  • data
  • count
  • minDate
  • maxDate
  • depDate
  • endDate
  • afterDays

• 接口

  • render()
  • prevMonth()
  • nextMonth()

• 自定义事件

  • render
  • prevmonth
  • nextmonth
  • checkin
  • checkout
  • confirm
  • cancel

• 配置参数改变事件

  • dateChange
  • dataChange
  • countChange
  • minDateChange
  • maxDateChange
  • depDateChange
  • endDateChange
  • afterDaysChange

快速上手

引入文件

在页面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
      });
  

  注释

  已为此事件绑定render方法，在设置属性后无需再次调用render方法

• dataChange

  概述

  设置data参数触发事件

  示例

  var oCalendar = new Y.PriceCalendar();
      oCalendar.on('dataChange', function(e) {
          //do something
      });
  

  注释

  已为此事件绑定render方法，在设置属性后无需再次调用render方法

• 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
      });