酒店价格日历控件

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

  • 组件名称:Y.PriceCalendar
  • 依赖模块:['node', 'base-base', 'event-mouseenter']

源代码:price-calendar.js
demo:http://fgm.cc/learn/calendar/price-calendar
github:https://github.com/fugm/PriceCalendar

引入文件

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

配置

使用

配置参数

  • date

    概述
    (默认值:当前日期) 日历初始日期
    类型
    Date (日期对象) 或 String (日期字符串)
  • data

    概述
    (默认值:null) 酒店房态数据
    类型
    Object
  • 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事件
    示例
  • prevmonth

    概述
    点击上月按钮事件
    示例
  • nextmonth

    概述
    点击下月按钮事件
    示例
  • checkin

    概述
    点击入住日期事件
    示例
  • checkout

    概述
    点击离店日期事件
    示例
  • confirm

    概述
    点击确定按钮事件
    示例
  • cancel

    概述
    点击取消按钮事件
    示例

     

配置参数改变事件

  • dateChange

    概述
    设置date参数触发事件
    示例
    注释
    已为此事件绑定render方法,在设置属性后无需再次调用render方法
  • dataChange

    概述
    设置data参数触发事件
    示例
    注释
    已为此事件绑定render方法,在设置属性后无需再次调用render方法
  • countChange

    概述
    设置count参数触发事件
    示例
  • minDateChange

    概述
    设置minDate参数触发事件
    示例
  • maxDateChange

    概述
    设置maxDate参数触发事件
    示例
  • depDateChange

    概述
    设置depDate参数触发事件
    示例
  • endDateChange

    概述
    设置endDate参数触发事件
    示例
  • afterDaysChange

    概述
    设置afterDays参数触发事件
    示例



评论 (0)