vue-hotel-datepicker|针对酒店预订场景设计的Vue.js日期范围选择器组件
源码介绍
vue-hotel-datepicker是一个针对酒店预订场景设计的Vue.js日期范围选择器组件。它具有以下特点： 要使用vue-hotel-datepicker插件，你需要先安装它，命令如下： 然后在你的Vue项目中引入并注册它： 最后在你的模板中使用它： 你还可以通过传递一些属性来自定义组件的行为和外观，如： 这样就可以设置最小入住天数为2天，最大入住天数为10天，并且禁止选择2023年2月14日和15日。 以下是vue-hotel-datepicker插件的一些配置参数： 你可以通过传递一个options对象来覆盖组件内部日历实例的默认配置，如： 这个例子中，设置了以下配置参数： periodDates是一个数组，它可以定义一些特殊的日期范围，并为它们设置不同的属性。每个periodDates元素都是一个对象，它可以包含以下属性： 例如： bookings是一个数组，它可以定义一些已预订的日期范围，并为它们设置不同的样式。每个bookings元素都是一个对象，它可以包含以下属性： 例如： i18n用于国际化文字输出，例如： vue-hotel-datepicker有以下可用事件： 例如： vue-hotel-datepicker插件有以下可用方法： 例如：
github网址：https://github.com/ZestfulNation/vue-hotel-datepicker
简要教程
使用方法
安装
npm i vue-hotel-datepicker
使用
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>
配置参数
YYYY-MM-DD或MM/DD/YYYY等。默认值是YYYY-MM-DD。 - 或 to 等。默认值是 - 。
<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>
periodDates
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: [
{
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
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}",
},
}
}
}
事件
<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>
方法
<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>
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » vue-hotel-datepicker|针对酒店预订场景设计的Vue.js日期范围选择器组件
发表评论 取消回复