Skip to content

Latest commit

 

History

History
267 lines (173 loc) · 6.81 KB

README.md

File metadata and controls

267 lines (173 loc) · 6.81 KB
Raw

Code Climate Issue Count dependencies Status devDependencies Status npm Build Status

vue-hotel-datepicker

A responsive date range picker for Vue.js that displays the number of nights selected and allow several useful options like custom check-in/check-out rules, localisation support and more.

demo gif

Demo

https://krystalcampioni.github.io/vue-hotel-datepicker/

Installation

NPM

Install the package:

npm install vue-hotel-datepicker --save

import HotelDatePicker from 'vue-hotel-datepicker'

export default {
  components: {
    HotelDatePicker,
  },
}
<HotelDatePicker />

Props/Options

format

  • Type: String
  • Default: YYYY-MM-DD

The date format string.

startDate

  • Type: Date or String
  • Default: new Date()

The start view date. All the dates before this date will be disabled.

endDate

  • Type: Date or String or Boolean
  • Default: false

The end view date. All the dates after this date will be disabled.

initialCheckIn

  • Type: Date
  • Default: null

The initial check-in date (as if the user selected it).

initialCheckOut

  • Type: Date
  • Default: null

The initial check-out date (as if the user selected it).

alwaysOpenOnDesktop

  • Type: Boolean
  • Default: false

If true calendar is always open on desktop-size screens.

numberOfMonthsToDisplay

  • Type: Number
  • Default: 2

Number of months displayed (only 1 and 2 are supported values).

firstDayOfWeek

  • Type: Number
  • Default: 0

The first day of the week. Where Sun = 0, Mon = 1, ... Sat = 6.

You need to set the right order in i18n.day-names too.

minNightsByDate

  • Type: Array
  • Default: []

Minimum nights required to select a range of dates, by date range.

Example:

[
  {start: '2021-01-01', end: '2021-06-30', minNights: 1},
  {start: '2021-07-01', end: '2021-08-31', minNights: 7},
  {start: '2021-09-01', end: '2021-12-31', minNights: 1}
]

disabledDates

  • Type: Array
  • Default: []

An array of mixed:

  • Date objects

  • strings in YYYY-MM-DD format

  • ranges in format (values can be either Date objects or string in YYYY-MM-DD format):

    {
  start: new Date(),
  end: 'YYYY-MM-DD'
}

All the dates passed to the list (or in ranges passed to this list) will be disabled when choosing the check-in date.

disabledCheckOutDates

  • Type: Array
  • Default: null

An array of mixed:

  • Date objects

  • strings in YYYY-MM-DD format

  • ranges in format (values can be either Date objects or string in YYYY-MM-DD format):

    {
  start: new Date(),
  end: 'YYYY-MM-DD'
}

All the dates passed to the list (or in ranges passed to this list) will be disabled when choosing the check-out date.

If left undefined, disabledDates shifted forward by 1 day will be used.

selectionCanContainDisabledDates

  • Type: Boolean
  • Default: false

If true, users can choose a check-out date even if there are disabled dates between check-in and check-out dates.

If false (default), users will only be able to choose a check-out date before the next disabled date after the check-in date.

hoveringTooltip

  • Type: Boolean or Function
  • Default: true

Shows a tooltip with the number of nights when hovering a date.

staticTooltipMessage

  • Type: String
  • Default null

If provided, it will override the default tooltip ("X nights min." when choosing check-in, "X nights" when choosing check-out) with the text provided. You can use HTML in the string.

showYear

  • Type boolean
  • Default false

Shows the year next to the month

closeDatepickerOnClickOutside

  • Type: boolean
  • Default: true

displayClearButton

  • Type: boolean
  • Default: true

If set to true, displays a clear button on the right side of the input if there are dates set

disableDatesWithoutPrice

  • Type: boolean
  • Default: false

Is set to true, all dates not matching a price range in priceByDate will be disabled.

customI18n

  • Type: Object

Default:

{
  en: {
    nights: { one: '%{count} night', other: '%{count} nights' },
    minNights: { one: '%{count} night minimum', other: '%{count} nights minimum' },
    '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']
  },
  fr: {
    nights: { one: '%{count} nuit', other: '%{count} nuits' },
    minNights: { one: '%{count} nuit minimum', other: '%{count} nuits minimum' },
    'check-in': 'Arrivée',
    'check-out': 'Départ',
    'day-names': ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'],
    'month-names': ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
  }
}

I18n object with multiple languages that completely overrides the default one (see src/i18n.js).

lang

  • Type: String
  • Default: 'en'

Language code to access translation in the (default or custom) i18n object.

API

⚠️ In order to open/close the datepicker from an external element, such as a button make sure to set closeDatepickerOnClickOutside to false

hideDatepicker()

Hide datepicker

showDatepicker()

Show datepicker

toggleDatepicker()

Toggle datepicker

Events

checkInChanged

Emitted every time a new check in date is selected with the new date as payload

checkOutChanged

Emitted every time a new check out date is selected with the new date as payload

Credits

This component was originally built as a Vue wrapper component for the Hotel Datepicker by @benitolopez. Version 2.0.0 was completely rewritten with Vue, removing the original library, removing some features and introducing others.