Hotel Booking Date Range Picker For VueJS

Category: Vue.js VueJS Date & Time | July 25, 2021
Author: krystalcampioni
Official Page: Go to website
Last Update: July 24, 2021
License: MIT

vuejs hotel date range picker

Description:

Are creating a application, where you need to integrate date range picker so that, your customer can book the room etc? Then, this component is right for your. This component is specially created for hotel booking.

vue-hotel-datepicker is fully responsive hotel date range picker for VueJS that will show the number of nights selected with availability of several other options such as check-in/check-out feature and multi-language support.

How to use it?

1. Install the component with npm or yarn.

#with npm
npm install vue-hotel-datepicker

#yarn
yarn add vue-hotel-datepicker

2. Import the required component.

import HotelDatePicker from 'vue-hotel-datepicker'
import 'vue-hotel-datepicker/dist/vueHotelDatepicker.css';

3. Now, register the component. Like following:

export default {
  components: {
    HotelDatePicker,
  },
}

4. Date picker template.

<HotelDatePicker />

Available Props:

props: {
    alwaysVisible: {
      type: Boolean,
      default: false,
    },
    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],
    },
    i18n: {
      type: Object,
      default: () => i18nDefaults,
    },
    lastDateAvailable: {
      type: [Number, Date],
      default: Infinity,
    },
    maxNights: {
      type: [Number, null],
      default: null,
    },
    minNights: {
      type: Number,
      default: 1,
    },
    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,
    },
  },

Changelog

v4.3:

  • Improved price styling (fixed #264)
  • Added price currency symbol string, for instance: ‘$’, ‘EUR’. The new prop is priceSymbol, default at empty string

v4.2:

  • Fixed #257: Disabled dates not updating when new dates are added
  • New CHANGELOG.md file

v4.1 – 2021-01-14

  • correct configuration in i18n fecha package
  • Italian added on demo (dev) page
  • new prop yearBeforeMonth

v4.0 – 2021-01-14

Important Fixes!

  • Now is working properly in mobile.

Featured changes

  • Language now is available in a folder with different translations available: es, en, pt, fr (ISO lang codes)
  • New prop disabledWeekDays: An object with the following properties: sundaymondaytuesdaywednesdaythursdayfridaysaturday, the value indicates if that day is disabled (true) or enabled (false).
  • New event next-month-rendered (Beta 11)
  • SCSS now in a separated file
  • Dependencies updated.

Documentation Improvements

  • Props
  • Events

Featured changes

  • New Event next-month-rendered, emitted every time the next month button is pressed and a new month is rendered.
  • #201 UX improvements related to check-in selection.

Deprecation

  • Prop: disabledDaysOfWeek: use the new disabledWeekDays instead. disabledWeekDays and disabledDaysOfWeek both work but disabledWeekDays take precedence.
  • Events: bookingClickeddayClickedhandleCheckIncheckOutHalfDay and periodSelected, now use kebab-case as recommended in Vue documentation (old names still works and will be removed in v5)

Breaking changes

  • showYear now is true by default
  • value now is false by default

Other changes

  • “npm” and “pnpm” lock files with version bump.
  • PR #230: Use relative units instead of px
  • PR #246: Dependencies fixes.
  • PR #241: Add price argument to periodDates doc.
  • PR #259: Dates become disabled when toggling month (singleDaySelection)
  • Improvements
  • value is Boolean as expected.
  • Component renaming (src)
  • fixed range highlight selection showing on “singleDaySelection”
  • fixed startingDateValue cleared when open the datepicker.
  • minor bug fixes