Vue Hotel Datepicker组件 - vue-hotel-datepicker

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):每次点击签出时发出。参数:鼠标事件、签入、签出

变更日志:

v4.4.3 (08/09/2021)

  • 固定关闭图标不加载

v4.4.2 (07/17/2021)

  • 现在价格可以是字符串或浮动。定义了一个新的 priceDecimals 道具
  • 将 i18n 资产添加到公共

v4.3.1 (06/25/2021)

  • 修复了渲染中的移动视图错误

v4.3.0 (02/13/2021)

  • 改进的价格样式
  • 添加了价格货币符号字符串,例如:’$’、’EUR’。新道具是 priceSymbol,默认为空字符串

v4.2.0(02/09/2021)

  • 固定:禁用日期不会在添加新日期时更新

v4.1.0(01/14/2021)

  • i18n fecha软件包中的正确配置
  • 意大利语已添加到演示(dev)页面
  • 新道具yearBeforeMonth

v3.0.10(06/10/2020)

  • Safari风格的修补程序