插件名称 | vue-hotel-datepicker |
---|---|
版本号 | v4.4.3 |
发布时间 | 2021年2月10日 |
插件作者 | krystalcampioni |
基于Hotel Datepicker的Vue日期范围选择器组件 。
npm install vue-hotel-datepicker
1. 导入并注册组件。
import HotelDatePicker from 'vue-hotel-datepicker'
import 'vue-hotel-datepicker/dist/vueHotelDatepicker.css';
export default {
components: {
HotelDatePicker,
},
}
2. 将日期选择器组件添加到模板中。
<HotelDatePicker/></<HotelDatePicker>
3. 可用道具来配置酒店日期选择器。
alwaysVisible: {
type: Boolean,
default: false,
},
/* e.g.
bookings: [
{
event: true,
checkInDate: "2020-08-26",
checkOutDate: "2020-08-29",
style: {
backgroundColor: "#399694"
}
},
{
event: false,
checkInDate: "2020-07-01",
checkOutDate: "2020-07-08",
style: {
backgroundColor: "#9DC1C9"
}
}
],
*/
bookings: {
type: Array,
default() {
return []
},
},
closeDatepickerOnClickOutside: {
type: Boolean,
default: true,
},
disableCheckoutOnCheckin: {
type: Boolean,
default: false,
},
disabledDates: {
type: Array,
default() {
return []
},
},
disabledDaysOfWeek: {
type: Array,
default() {
return []
},
},
disabledWeekDays: {
type: Object,
default() {
return {}
},
},
displayClearButton: {
type: Boolean,
default: true,
},
enableCheckout: {
type: Boolean,
default: false,
},
endDate: {
type: [Date, String, Number],
default: Infinity,
},
endingDateValue: {
type: [Date, null],
default: null,
},
firstDayOfWeek: {
type: Number,
default: 0,
},
format: {
type: String,
default: 'YYYY-MM-DD',
},
gridStyle: {
type: Boolean,
default: true,
},
halfDay: {
type: Boolean,
default: true,
},
hoveringTooltip: {
default: true,
type: [Boolean, Function],
},
/* e.g.
i18n: {
"night": "Night",
"nights": "Nights",
"week": "week",
"weeks": "weeks",
"day-names": ["Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat"],
"check-in": "Check-in",
"check-out": "Check-out",
"month-names": [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
],
"tooltip": {
"halfDayCheckIn": "Available CheckIn",
"halfDayCheckOut": "Available CheckOut",
"saturdayToSaturday": "Only Saturday to Saturday",
"sundayToSunday": "Only Sunday to Sunday",
"minimumRequiredPeriod": "%{minNightInPeriod} %{night} minimum.",
},
}
*/
i18n: {
type: Object,
default: () => i18nDefaults,
},
lastDateAvailable: {
type: [Number, Date],
default: Infinity,
},
maxNights: {
type: [Number, null],
default: null,
},
minNights: {
type: Number,
default: 1,
},
/* e.g.
periodDates: [
{
startAt: "2020-06-09",
endAt: "2020-07-26",
minimumDuration: 4,
periodType: "nightly"
},
{
startAt: "2020-07-26",
endAt: "2020-09-30",
minimumDuration: 1,
periodType: "weekly_by_saturday"
},
{
startAt: "2020-09-30",
endAt: "2020-11-30",
minimumDuration: 2,
periodType: "weekly_by_sunday",
price: 4000.0
}
],
*/
periodDates: {
type: Array,
default() {
return []
},
},
positionRight: {
type: Boolean,
default: false,
},
priceSymbol: {
type: String,
default: '',
},
showPrice: {
type: Boolean,
default: false,
},
showSingleMonth: {
type: Boolean,
default: false,
},
showYear: {
type: Boolean,
default: true,
},
singleDaySelection: {
type: Boolean,
default: false,
},
startDate: {
type: [Date, String],
default() {
return new Date()
},
},
startingDateValue: {
type: [Date, null],
default: null,
},
tooltipMessage: {
type: [String, null],
default: null,
},
value: {
type: Boolean,
default: true,
},
yearBeforeMonth: {
type: Boolean,
default: false,
},
4. API 方法。
// 显示日期选择器
showDatepicker()
// 切换日期选择器
toggleDatepicker()
// 隐藏日期选择器
hideDatepicker()
5. 事件。
v4.4.3 (08/09/2021)
v4.4.2 (07/17/2021)
v4.3.1 (06/25/2021)
v4.3.0 (02/13/2021)
v4.2.0(02/09/2021)
v4.1.0(01/14/2021)
v3.0.10(06/10/2020)