Vue date range picker component

Overview

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.

a date-range-picker follows the Material Design spec powered by vue.js (alpha)

Document | 中文文档 If the document is not accessible, please open an issue, I will fix it right away. v-md-date-range-picker Material Design DateRangePic

小小鲁班 67 Oct 27, 2021
A date-range-picker follows the Material Design spec powered by vue.js

A date-range-picker follows the Material Design spec powered by vue.js

小小鲁班 67 Oct 27, 2021
Range date picker with simple usage

VueRangedatePicker Date picker with range selection Demo https://bliblidotcom.github.io/vue-rangedate-picker/demo/ Installation npm install --save vue

Blibli.com 216 Dec 15, 2021
A vue component using Bootstrap 4 styles for date range selection

vue-date-range-picker A vue component using Bootstrap 4 styles for date range selection Live demo (jsfiddle) Features Date range selection Compare fea

Antoine Matyja 30 Mar 31, 2021
A vue date picker component inspired by material design

Vue Date Picker A vue date picker component inspired by material design Contents Installing Examples Formatting Selected Date API Installing $ npm ins

Trevor Stacy 57 Nov 6, 2021
An easy-to-use and customizable date picker component powered by Vue js

vue-datepicker An easy-to-use and customizable date picker component powered by Vue js Demo:s https://codesandbox.io/s/eager-rubin-5zcm9 Install npm i

Krijan Niroula 2 Dec 4, 2021
Mobile friendly datetime picker for Vue. Supports date and datetime modes, i18n and more.

vue-datetime Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and more. Demo Go to demo. Installation Bundler (We

Mario Juárez 984 Jan 6, 2022
A Vue project - single date picker

A Vue project - single date picker

null 16 Jun 11, 2021
Lightweight and mobile friendly date time picker based on Vue.

Vue date pick Lightweight and mobile friendly date time picker based on Vue. Vue date pick emphasizes performance, elegant and usable UI on all screen

Damir Brekalo 230 Jan 10, 2022
VueJS component to select dates & time, including a range mode

VueCtkDateTimePicker A vue component for select dates (range mode available) & time This documentation is for v2.*. Find v1 documentation here Dark mo

Chronotruck 790 Jan 16, 2022
A vue2 range datepicker

A simple range datepicker based on Vue2

HC 3 Sep 13, 2021
Datepicker component for vue.js built with Tailwind CSS, and the day.js date library.

Datepicker component for vue.js build with Tailwind CSS & dayjs date library

Ken 183 Dec 15, 2021
A vue plugin to select jalali date and time

vue-persian-datetime-picker A vue plugin to select jalali date and time See documentation and demo at vue-persian-datetime-picker Installation browser

Mohamad Talkhabi 498 Jan 16, 2022
A vue plugin to select jalali date and time

vue3-persian-datetime-picker A vue plugin to select jalali date and time See documentation and demo at vue-persian-datetime-picker. If you are using v

Mohamad Talkhabi 26 Jan 11, 2022
vue 3 datepicker. supports disabling, highlighting of dates and programmatic access of date.

Vue 3 Datepicker A datepicker Vue component. Compatible with Vue 3 Only Demo Install Usage Date Formatting Props Events Disabled dates Highlighted dat

shubhadip 19 Jan 16, 2022
Not your ordinary datepicker. A Vuejs draggable date selector with a fresh responsive design, mobile ready and 0 dependencies, 17kb gzipped

DraggableCal A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Available Languages Dev & Build Licence Thanks Demo To view a demo

Tom 82 Jan 5, 2022
Vue.js component for Flatpickr datetime picker :calendar:

Vue FlatPickr Component Vue.js component for Flatpickr date-time picker. Demo or JSFiddle Version matrix Vue.js version Package version Branch 2.x 8.x

Ankur Kumar 842 Jan 13, 2022
A Color Picker Component Based on Vue And Element-UI Supports Drag And Drop

@toc Introduction 简介 This is a color picker component based on vue and element-ui. It is powerful and supports drag and drop, color picking and other

null 0 Dec 7, 2021
VueJS Monthly Picker component

vue-monthly-picker Vue Monthly Picker Components Checkout demo at https://ittus.github.io/vue-monthly-picker/ Support Install npm install vue-monthly-

Thang Minh Vu 63 Jan 2, 2022