vue-hotel-datepicker|针对酒店预订场景设计的Vue.js日期范围选择器组件


源码介绍

简要教程

vue-hotel-datepicker是一个针对酒店预订场景设计的Vue.js日期范围选择器组件。它具有以下特点:

  • 响应式设计,适配不同的屏幕尺寸和设备。
  • 显示选择的日期范围和入住天数,支持自定义格式。
  • 支持自定义入住和退房规则,如最小或最大入住天数,禁止或高亮某些日期等。
  • 支持多种语言和时区,可根据用户的偏好进行切换。
  • 支持夜间模式,提供更舒适的视觉体验。
  • 支持键盘操作和触摸事件,提高用户的交互效率。

使用方法

安装

要使用vue-hotel-datepicker插件,你需要先安装它,命令如下:

npm i vue-hotel-datepicker
		
使用

然后在你的Vue项目中引入并注册它:

import VueHotelDatepicker from 'vue-hotel-datepicker'
Vue.component('vue-hotel-datepicker', VueHotelDatepicker)
		

最后在你的模板中使用它:

<template>
  <div id="app">
    <vue-hotel-datepicker v-model="dates" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      dates: null
    }
  }
}
</script>
		

你还可以通过传递一些属性来自定义组件的行为和外观,如:

<template>
  <div id="app">
    <vue-hotel-datepicker 
      v-model="dates" 
      :minNights="2" 
      :maxNights="10" 
      :disabledDates="[new Date(2023, 1, 14), new Date(2023, 1, 15)]" />
  </div>
</template>

			
		

这样就可以设置最小入住天数为2天,最大入住天数为10天,并且禁止选择2023年2月14日和15日。

配置参数

以下是vue-hotel-datepicker插件的一些配置参数:

  • autoApply: 是否在选择日期后自动关闭日历。
  • alwaysVisible: 是否让日历始终可见(默认为false)。
  • bookedDays: 一个数组,包含已预订或不可用的日期。
  • bookings: 一个对象,包含每个日期的预订信息,如价格、状态等。
  • checkInLabel: 入住标签的文本。
  • checkOutLabel: 退房标签的文本。
  • closeDatepickerOnClickOutside: 是否在点击日历外部时关闭日历(默认为true)。
  • disabledDates:一个数组或函数,表示禁止选择的日期列表或规则。如果是数组,则包含一些日期对象或字符串;如果是函数,则接收一个参数(date),并返回一个布尔值表示该日期是否可选。默认值是空数组。
  • disabledDaysOfWeek: 一个数组,包含禁用或不可选的星期几。
  • disableCheckoutOnCheckin: 是否在选择入住日期后禁用退房日期(默认为false)。
  • disabledWeekDays: 一个数组,包含禁用或不可选的星期几(默认为空数组)。
  • displayClearButton: 是否显示清除按钮(默认为false)。
  • enableCheckout: 是否允许选择已预订或禁用的日期作为退房日期。
  • endDate: 一个日期对象,表示日历的最后一个可选日期(默认为null)。
  • endingDateValue: 一个日期对象,表示日历的初始退房值(默认为null)。
  • firstDayOfWeek: 星期开始于哪一天(0为周日,6为周六)。
  • format:一个字符串,表示日期的格式,如YYYY-MM-DDMM/DD/YYYY等。默认值是YYYY-MM-DD
  • gridStyle: 日历网格的样式,可以是'fixed'或'flexible'(默认为'fixed')。
  • halfDay: 是否允许半天选择(默认为false)。
  • hoveringTooltip:一个布尔值或函数,表示是否显示鼠标悬停时的入住天数提示。如果是函数,则接收两个参数(hoverDate和currentDateRange),并返回一个字符串或布尔值作为提示内容。默认值是true。
  • i18n:一个对象,包含日期选择器的语言设置。默认值是英文设置。
  • lastDateAvailable: 一个日期对象,表示停止日历分页的月份(默认为null)。
  • minNights:一个数字,表示选择日期范围所需的最小夜晚数。0或null表示无限制。默认值是null。
  • maxNights:一个数字,表示选择日期范围所需的最大夜晚数。0或null表示无限制。默认值是null。
  • monthLabels: 一个数组,包含月份标签(默认为英文)。
  • moveBothMonths: 是否同时移动两个月份视图(仅在双日历模式下有效)。
  • onlyCheckInAfterToday: 是否只允许今天之后作为入住日期(默认为true)。
  • periodDates: 一个数组,包含特殊时期的开始和结束日期,如节假日、旺季等。每个元素都是一个对象,包含start、end和color属性。例如:[{start: '2020/12/24', end: '2020/12/31', color: '#f00'}]表示从12月24日到12月31日是红色时期。
  • positionRight: 是否将日历定位在右侧(默认为false)。
  • priceDecimals: 价格显示的小数位数(默认为0)。
  • priceSymbol: 价格显示的货币符号(默认为'$')。
  • separator:一个字符串,表示日期范围之间的分隔符,如 - to 等。默认值是 -
  • showCloseButton: 是否显示关闭按钮。
  • showMonthArrow: 是否显示月份箭头。
  • singleDaySelection: 是否允许选择单个日期而不是日期范围。
  • singleMonthMode: 是否只显示一个月份视图(默认为false)。
  • startOfWeek: 一个字符串,表示一周的开始(默认为'monday')。
  • startingDateValue: 一个日期对象,表示日历的初始值(默认为null)。
  • showPrice: 是否在每个日期上显示价格(默认为false)。
  • showSingleMonth: 是否只显示一个月份视图(默认为false)。
  • showWeekNumbers: 是否显示周数(默认为false)。
  • showYear: 是否在月份标签上显示年份(默认为true)。
  • singleDaySelection: 是否允许选择单个日期而不是日期范围(默认为false)。
  • startDate: 一个日期对象,表示日历的第一个可选日期(默认为null)。
  • startingDateValue: 一个日期对象,表示日历的初始入住值(默认为null)。
  • tooltipMessage: 悬停提示框的文本(默认为'Number of nights: ')。你可以使用{nights}占位符来插入夜晚数量。例如:'Stay for {nights} nights.'。
  • value: 一个数组,包含初始选择的入住和退房日期。例如:['2020/12/01', '2020/12/05']表示从12月1日到12月5日入住4晚。
  • weekendDays: 一个数组,包含周末的星期几(默认为[0,6])。
  • yearBeforeMonth: 是否在月份标签上先显示年份再显示月份(默认为false)。例如:2020年12月 vs. 十二月2020年。

你可以通过传递一个options对象来覆盖组件内部日历实例的默认配置,如:

<template>
  <div id="app">
    <vue-hotel-datepicker
      :bookings="bookings"
      :closeDatepickerOnClickOutside="false"
      :disabledWeekDays="[0]"
      :displayClearButton="true"
      :endDate="endDate"
      :gridStyle="'flexible'"
      :halfDay="true"
      :lastDateAvailable="lastDateAvailable"
      :periodDates="periodDates"
      :positionRight="true"
      :priceDecimals="2"
      :priceSymbol="'€'"
      :showPrice="true"
      :showSingleMonth="true"
      @checkInChanged="(date) => checkInChanged(date)"
    />
  </div>
</template>

			
		

这个例子中,设置了以下配置参数:

  • bookings: 包含每个日期的预订信息,如价格、状态等。
  • closeDatepickerOnClickOutside: 不在点击日历外部时关闭日历。
  • disabledWeekDays: 禁用星期天。
  • displayClearButton: 显示清除按钮。
  • endDate: 设置日历的最后一个可选日期为2021年2月。
  • gridStyle: 设置日历网格的样式为'flexible'。
  • halfDay: 允许半天选择。
  • lastDateAvailable: 设置停止日历分页的月份为2021年3月。
  • periodDates: 设置从12月24日到12月31日为红色时期。
  • positionRight: 将日历定位在右侧。
  • priceDecimals: 设置价格显示的小数位数为2位。
  • priceSymbol: 设置价格显示的货币符号为欧元符号(€)。
  • showPrice: 在每个日期上显示价格。
  • showSingleMonth: 只显示一个月份视图。

periodDates

periodDates是一个数组,它可以定义一些特殊的日期范围,并为它们设置不同的属性。每个periodDates元素都是一个对象,它可以包含以下属性:

  • endAt: 一个字符串或日期对象,表示日期范围的结束日期。
  • startAt: 一个字符串或日期对象,表示日期范围的开始日期。
  • minimumDuration: 一个数字,表示选择该日期范围所需的最小夜晚数。
  • periodType: 一个字符串,表示该日期范围的类型。目前只支持"closed"和"open"两种类型。如果设置为"closed",则该日期范围内的所有日期都不可用。如果设置为"open",则该日期范围内的所有日期都可用。
  • price: 一个数字或函数,表示该日期范围内每晚的价格。如果是函数,则接收一个参数date,并返回对应的价格。

例如:

periodDates: [
    {
      startAt: '2023-02-01',
      endAt: '2023-02-10',
      minimumDuration: 3,
      periodType: 'closed',
    },
    {
      startAt: '2023-03-01',
      endAt: '2023-03-10',
      price(date) {
        return date.getDay() === 0 || date.getDay() === 6 ? 120 : 100;
      },
    },
]		
	

bookings

bookings是一个数组,它可以定义一些已预订的日期范围,并为它们设置不同的样式。每个bookings元素都是一个对象,它可以包含以下属性:

  • checkInDate: 一个字符串或日期对象,表示预订的入住日期。
  • checkOutDate: 一个字符串或日期对象,表示预订的退房日期。
  • style: 一个字符串或对象,表示预订的样式。如果是字符串,则应该是一个有效的CSS类名。如果是对象,则应该包含以下属性:
    • backgroundColor: 一个字符串,表示预订的背景颜色。
    • color: 一个字符串,表示预订的文字颜色。
    • tooltipText: 一个字符串,表示预订的提示文字。

例如:

bookings: [
    {
      checkInDate: '2023-02-05',
      checkOutDate: '2023-02-08',
      style: 'booked',
    },
    {
      checkInDate: '2023-03-01',
      checkOutDate: '2023-03-05',
      style: {
        backgroundColor: '#ff0000',
        color: '#ffffff',
        tooltipText: '已满房'
      },
    },
]		
	

i18n

i18n用于国际化文字输出,例如:

data() {
    return {
        cn: {
            "night": "晚",
            "nights": "晚",
            "week": "星期",
            "weeks": "星期",
            "day-names": ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            "check-in": "入住",
            "check-out": "离店",
            "month-names": [
                "一月",
                "二月",
                "三月",
                "四月",
                "五月",
                "六月",
                "七月",
                "八月",
                "九月",
                "十月",
                "十一月",
                "十二月",
            ],
            "tooltip": {
                "halfDayCheckIn": "可用checkin",
                "halfDayCheckOut": "可用CheckOut",
                "saturdayToSaturday": "仅周六至周六",
                "sundayToSunday": "仅周日至周日",
                "minimumRequiredPeriod": "最少入住 %{minNightInPeriod} %{night}",
            },
        }
    }
}		
	

事件

vue-hotel-datepicker有以下可用事件:

  • booking-clicked是一个事件,参数有三个:MouseEvent、Date和Object。它在每次点击一个预订时触发。
  • check-in-changed: 当入住日期改变时触发,传递一个参数date,表示新的入住日期。
  • check-out-changed: 当退房日期改变时触发,传递一个参数date,表示新的退房日期。
  • clear-selection: 当清除选择时触发,没有参数。
  • day-clicked: 当点击某个日期时触发,传递一个参数date,表示被点击的日期。
  • handle-checkin-checkout-half-day: 当处理半天入住或退房时触发,传递两个参数checkInDate和checkOutDate,表示新的日期范围。
  • input: 当入住或退房日期改变时触发,传递一个对象{checkInDate, checkOutDate},表示新的日期范围。
  • month-changed: 当月份改变时触发,传递两个参数month和year,表示新的月份和年份。
  • next-month-rendered: 当渲染下一个月份时触发,没有参数。
  • period-selected: 当选择一个日期范围时触发,传递两个参数checkInDate和checkOutDate,表示选择的日期范围。

例如:

<template>
  <div id="app">
    <vue-hotel-datepicker :bookings="bookings"
      @booking-clicked="handleBookingClicked"
      @check-in-changed="handleCheckInChanged"
      @check-out-changed="handleCheckOutChanged"
      @clear-selection="handleClearSelection"
      @day-clicked="handleDayClicked"
      @handle-checkin-checkout-half-day="handleCheckinCheckoutHalfDay"
      @input="handleInput"
      @month-changed="handleMonthChanged"
      @next-month-rendered="handleNextMonthRendered"
      @period-selected="handlePeriodSelected"
    />
  </div>
</template>

		
	

方法

vue-hotel-datepicker插件有以下可用方法:

  • clearSelection: 清除当前的日期范围选择。
  • closeDatepicker: 关闭日期选择器。
  • getCheckInDateFormatted: 返回一个字符串,表示格式化后的入住日期。
  • getCheckOutDateFormatted: 返回一个字符串,表示格式化后的退房日期。
  • getNights: 返回一个数字,表示选择的夜晚数。
  • openDatepicker: 打开日期选择器。
  • setCheckInDate(date): 设置入住日期为给定的date参数,date可以是一个字符串或者一个日期对象。
  • setCheckOutDate(date): 设置退房日期为给定的date参数,date可以是一个字符串或者一个日期对象。

例如:

<template>
  <div id="app">
    <vue-hotel-datepicker
      ref="datepicker"
      @period-selected="handlePeriodSelected"
    />
    <button @click="clearSelection">清除选择</button>
    <button @click="closeDatepicker">关闭选择器</button>
    <button @click="openDatepicker">打开选择器</button>
    <button @click="setCheckInDate('2023-02-10')">设置入住为2023年2月10日</button>
    <button @click="setCheckOutDate('2023-02-15')">设置退房为2023年2月15日</button>
  </div>
</template>

		
	

github网址:https://github.com/ZestfulNation/vue-hotel-datepicker



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部