Skip to content
Vue date range picker component
Branch: master
Clone or download
Akira0705 and krystalcampioni Update README.md (#133)
singleDateSelection  -> singleDaySelection
Latest commit 90e0b0d Mar 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github include stale config Nov 24, 2018
build Hotfix/#43 fix css nano config (#95) Oct 6, 2018
src Hotfix/#117 (#129) Mar 2, 2019
tests update test Nov 24, 2018
.babelrc
.codeclimate.yml exclude test path from codeclimate Oct 9, 2017
.eslintignore
.eslintrc.yml pass props to day component as object Sep 13, 2017
.gitignore minor adjustments Sep 29, 2018
.travis.yml include stale config Nov 24, 2018
CODE_OF_CONDUCT.md include CONTRUBUTING.md and CODE_OF_CONDUCT Oct 9, 2017
CONTRIBUTING.md include CONTRUBUTING.md and CODE_OF_CONDUCT Oct 9, 2017
LICENSE Initial commit Jun 27, 2017
README.md Update README.md (#133) Mar 23, 2019
demo.gif update demo gif Oct 11, 2017
issue_template.md Create issue_template.md Oct 24, 2017
package-lock.json Mobile Active Month Fixed (#123) Feb 15, 2019
package.json Hotfix/#117 (#129) Mar 2, 2019
yarn.lock Use px instead of em in media queries Jun 19, 2018

README.md

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.

startingDateValue

  • Type: Date
  • Default: null

The initial value of the start date.

endDate

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

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

endingDateValue

  • Type: Date
  • Default: null

The initial value of the end date.

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.

minNights

  • Type: Number
  • Default: 1

Minimum nights required to select a range of dates.

maxNights

  • Type: Number
  • Default: 0

Maximum nights required to select a range of dates.

disabledDates

  • Type: Array
  • Default: []

An array of strings in this format: YYYY-MM-DD. All the dates passed to the list will be disabled.

disabledDaysOfWeek

  • Type: Array
  • Default: []

An array of strings in this format: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']. All the days passed to the list will be disabled.

allowedRanges

  • Type: Array
  • Default: []

An array of numbers. Example: [7,10,14]. After selecting the start date the calendar will be updated only allowing the checkout 7, 10 or 14 days after.

enableCheckout

  • Type: Boolean
  • Default: false

If true, allows the checkout on a disabled date.

hoveringTooltip

  • Type: Boolean or Function
  • Default: true

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

tooltipMessage

  • Type: String
  • Default null

If provided, it will override the default tooltip "X nights" with the text provided. You can use HTML in the string.

singleDaySelection

  • Type boolean
  • Default false

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

i18n

  • Type: Object

Default:

i18n: {
  night: 'Night',
  nights: 'Nights',
  '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'],
}

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.

You can’t perform that action at this time.