https://github.com/joffreyBerrier/vue-hotel-datepicker/releases/tag/0.5.7
https://github.com/joffreyBerrier/vue-hotel-datepicker/projects/1?fullscreen=true
- forked https://github.com/krystalcampioni/vue-hotel-datepicker
- Use vue-cli
- Remove the pug html, use html
- Remove some useless dependencies
- Rewrite code
- Add eslint airbnb + prettier
- Remove useless condition like empty if or else
- Add return for all computed
- Add a bind key on
v-for
- Rewrite jest test
- Remove v-html / v-text use
{{ }}
- Add emit when clearSelection
- Remove querySelector, use refs
- Fix bug: impossible to open the calendar when clearselection is triggered
- Allow to have half a day, in order to enable checkIn on a checkOut day
- Refacto the paginate infinite scroll on mobile
- Prevent checkOut on the same day as checkIn
- Add periodDates array for specific periods with different minimumStay / Price or periodType
- Show price of your Object periodDates
- Review style
- Add a
--hovering
class - When there are checkIn and checkOut => Click on new date makes a new checkIn and clears checkOut
- If there is a periodDates, automatically update minNights
- Create a not allowed status which is different from the disabled status
- NotAllowed inside a weekly period
- NotAllowed inside a nightly period right before a weekly period (to respect min nights)
- Remove useless props on the DateInput component
- Change
<span>
to<button>
on pagination and put adisabled
attribute when activeMonthIndex equal to 0 - Fix disable calcul of minNightsCount when checkout
- Add the lastDateAvailable
- Create a content slot
- Mobile:
- CheckIn - CheckOut scroll to current month
- If CheckIn, click on CheckIn clearSelection
- Review the style of the modal cross
- Rewrite the ReRender function
- Rewrite the clickOnDay function
- Rewrite the clickOutside function
- Create a dynamic array for disabled dates of the nextPeriod
- Sort in ascending order periodDates (startAt)
- Add handleCheckIncheckOutHalfDay to get a checkIncheckOutHalfDay
- Rethink UI/UX of the calendar thank's to Elsa Morand
- Cancel prefill disabled days
- Review the tooltip on mobile -- Remove the tooltip on mobile, show the content text at the top of the calendar to display several types of messages according to your needs.
- Review the tooltip on desktop -- How the tooltip appears
- Add some i18n translations
tooltip: { halfDayCheckIn: "Available CheckIn", halfDayCheckOut: "Available CheckOut", saturdayToSaturday: "Only Saturday to Saturday", sundayToSunday: "Only Sunday to Sunday", minimumRequiredPeriod: "A minimum of <br/> %{minNightInPeriod} %{night} is required." },
- Add
showSingleMonth
which allows to show 1 month - Trigger
window.resize
on desktop, mobile, tablet - Add
event clicked Esc
forclearSelection
- Add
invalid
class on checkIn date
project: https://github.com/joffreyBerrier/vue-hotel-datepicker/projects/1?fullscreen=true
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.
https://krystalcampioni.github.io/vue-hotel-datepicker/
Install the package:
npm install vue-hotel-datepicker2 --save
import HotelDatePicker from 'vue-hotel-datepicker2'
import 'vue-hotel-datepicker2/dist/vueHotelDatepicker2.css';
export default {
components: {
HotelDatePicker,
},
}
<HotelDatePicker />
- Type:
Date
- Default:
null
Allows to stop calendar pagination after the month of that date
- Type:
Boolean
- Default:
false
Allows to have half a day, if you have check in at noon and checkout before noon
- Type:
String
- Default:
YYYY-MM-DD
The date format string.
- Type:
Date
orString
- Default:
new Date()
The start view date. All the dates before this date will be disabled.
- Type:
Date
- Default:
null
The initial value of the start date.
- Type:
Date
orString
orBoolean
- Default:
false
The end view date. All the dates after this date will be disabled.
- Type:
Date
- Default:
null
The initial value of the end date.
- 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.
- Type:
Number
- Default:
1
Minimum nights required to select a range of dates.
- Type:
Number
- Default:
0
Maximum nights required to select a range of dates.
- Type:
Array
- Default:
[]
An array of strings in this format: YYYY-MM-DD
. All the dates passed to the list will be disabled.
- 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.
- 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.
- Type:
Boolean
- Default:
false
If true
, allows the checkout on a disabled date.
- Type:
Boolean
orFunction
- Default:
true
Shows a tooltip with the number of nights when hovering a date.
- 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.
- Type
boolean
- Default
false
- Type
boolean
- Default
false
Shows the year next to the month
- Type:
boolean
- Default:
true
- Type:
boolean
- Default:
true
If set to true, displays a clear button on the right side of the input if there are dates set
- Type:
boolean
- Default:
false
If set to true, disable checkout on the same date has checkin
- 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'],
tooltip: {
halfDayCheckIn: "Available CheckIn",
halfDayCheckOut: "Available CheckOut",
saturdayToSaturday: "Only Saturday to Saturday",
sundayToSunday: "Only Sunday to Sunday",
minimumRequiredPeriod: "A minimum of <br/> %{minNightInPeriod} %{night} is required."
},
}
- Type:
Array
If you want to have specific startAt and endAt period with different duration or price or type of period-
Key | Type | Description |
---|---|---|
endAt | String | YYYY-MM-DD |
startAt | String | YYYY-MM-DD |
minimumDuration | Number | Minimum stay (Type: weekly => per_week |
periodType | String | nightly, weekly_by_saturday, weekly_by_sunday |
Example:
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
}
],
- Type:
Boolean
- Default:
false
If set to true, displays a price contains on your periodDates
- Type:
Boolean
- Default:
false
If set to true, display one month only
closeDatepickerOnClickOutside
to false
Hide datepicker
Show datepicker
Toggle datepicker
Emitted every time when day is clicked
Params:
name | Description |
---|---|
date | new Date() |
formatDate | YYYY-MM-DD |
nextDisabledDate | Date, Number, String |
Emitted every time a new check in date is selected with the new date as payload
Emitted every time a new check out date is selected with the new date as payload
Emitted every time you clicked on clearDate button
Emitted on [beforeMount, clearSelection, checkOut]
Params:
name | Description |
---|---|
checkIncheckOutHalfDay | Object of checkinCheckout date |
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.