Vue Hotel Datepicker组件 - vue-hotel-datepicker

插件名称	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. 事件。

@booking-clicked(MouseEvent, Date, Object)：每次点击预订时发出。第一个参数是鼠标 javascript 事件，第二个是点击日期，第三个是点击预订。
@check-in-changed：每次选择新的签入日期时发出，新日期作为有效负载。
@check-out-changed：每次选择新的退房日期时发出，新日期作为有效负载。
@clear-selection：每次单击清除日期按钮时发出。
@day-clicked(Date, String, Date|Number|String)：每次点击日期时发出。单击参数：日期、格式和下一个禁用日期。
@handle-checkin-checkout-half-day(Object)：在 [beforeMount, clear-selection, checkout] 上发出。参数：入住-退房日期对象。
@next-month-rendered：每次渲染下个月时发出。
@period-selected(Event, Date, Date)：每次点击签出时发出。参数：鼠标事件、签入、签出