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-DD或MM/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
