Vue date range picker component fork of vue-hotel-datepicker create by krystalcampioni
npm install vue-hotel-datepicker2https://github.com/joffreyBerrier/vue-hotel-datepicker/releases/tag/1.3.3
👊👊👊An easier Calendar in Vue.js 👊👊👊
---
Vue3 version => https://github.com/joffreyBerrier/vue-datepicker
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 to on pagination and put a disabled 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
%{minNightInPeriod} %{night} is required."
},
- Add which allows to show 1 monthwindow.resize
- Trigger on desktop, mobile, tabletevent clicked Esc
- Add for clearSelection
- Add class on checkIn dateallowedRanges
- Breakings changes: removed , use periods if you want to have a range of disableDatescountOfMobileMonth
- Refactoring _tooltip_, show on _hover_ / show on _click_
- Review the tooltips when there is periods array #50
- Display the calendar in full size without input #61
- Add a range of bookings #65
- Review the pagination on mobile side:
-- remove pagination with scroll add a button for more smooth
-- use the same logique on desktop side increment an index and create month only when the index is superior to / countOfDesktopMonth
- Review some style of mobile calendar
- Add v-if on when day.belongsToThisMonth === false to avoid 10 day per month load for nothing at all
- Increase the performance on mobile side
- Remove duplicate unify pagination for desktop and mobile
- Create a
- Add a countOfTotalMonthByDefaultprops for generate x month on a created
- Remove duplicate useless
- Refacto the style of
- Create / refacto the function for create month and put on a mounted part not created for get the correct device
- Add a v-if="months.length" around the v-for
- Review periods management
---
---
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.
_Open this link on a new tab_
- Create issue with your fix / features / chore
- Clone repo and run: yarn or npm i
- Then, make your changes on any branch you want and push it.
- Naming your branch with this convention:
- Feature branches? [feature/id-of-issue]
- Chore branches? [chore/id-of-issue]
- Hotfix branches? [hotfix/id-of-issue]
- Example : feat/84-naming-your-development
- Naming your commit with this convention:
- feat/chore/fix(scope): [#id-of-issue] your developement
- Example : feat(BookingBullet): [#84] your developement
- Finally, open a pull request on this repo and associate your issue to the pull-request
- Once the pr is merged, go to the master branch
- Launch this command :
Pull master
``bash`
git pull origin master
Build source files for npm package
`bash`
yarn run build-package
Push to npm
`bash`
npm publish // push to npm
---
#### NPM / YARN
Install the package:
`
npm install vue-hotel-datepicker2 --save
yarn add vue-hotel-datepicker2
`javascript
import HotelDatePicker from "vue-hotel-datepicker2";
import "vue-hotel-datepicker2/dist/vueHotelDatepicker2.css";
export default {
components: {
HotelDatePicker,
},
};
`
`html`
- Type: Date
- Default:
Allows to stop calendar pagination after the month of that date
- Type: Boolean
- Default:
Allows to have half a day, if you have check in at noon and checkout before noon
- Type: String
- Default:
The date format string.
- Type: Date or String
- Default:
The start view date. All the dates before this date will be disabled.
- Type: Date
- Default:
The initial value of the start date.
- Type: Date or String or Boolean
- Default:
The end view date. All the dates after this date will be disabled.
- Type: Date
- Default:
The initial value of the end date.
- Type: Number
- Default:
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:
Minimum nights required to select a range of dates.
- Type: Number
- Default:
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: Boolean
- Default:
If true, allows the checkout on a disabled date.
- Type: Boolean or Function
- Default:
Shows a tooltip with the number of nights when hovering a date.
- Type: String
- Default
If provided, it will override the default tooltip "X nights" with the text provided. You can use HTML in the string.
- Type boolean
- Default
- Type boolean
- Default
Shows the year next to the month
- Type: boolean
- Default:
- Type: boolean
- Default:
If set to true, displays a clear button on the right side of the input if there are dates set
- Type: boolean
- Default:
If set to true, disable checkout on the same date has checkin
- Type: Object
Default:
`js`
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
%{minNightInPeriod} %{night} is required."
},
week: "week",
weeks: "weeks",
}
- Type: Array
- Default:
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 | Type: nightly => per night) |
| periodType | String | _nightly_, _weekly_by_saturday_, _weekly_by_sunday_ |
Example:
`js`
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
},
{
startAt: "2023-11-27",
endAt: "2023-12-25",
minimumDuration: 1,
periodType: "weekly_by_monday",
price: 4000.0
}
],
#### MinimumDuration with a periodType weekly-~ equals to a week
- Type: Boolean
- Default:
If set to true, display one month only
- Type: Boolean
- Default:
Display calendar on the right or the left of the input (left by default)
- Type: Boolean
- Default:
Display calendar in the page without an input
- Type: Array
- Default:
If you want to show bookings
| Key | Type | Description |
| ------------ | ------ | ------------------------ |
| checkInDate | String | YYYY-MM-DD |
| checkOutDate | String | YYYY-MM-DD |
| style | Object | Style, (see the example) |
Example:
`js`
bookings: [
{
event: true,
checkInDate: "2020-08-26",
checkOutDate: "2020-08-29",
style: {
backgroundColor: "#399694"
}
},
{
event: false,
checkInDate: "2020-07-01",
checkOutDate: "2020-07-08",
style: {
backgroundColor: "#9DC1C9"
}
}
],
- Type: String
- Default:
Id of an element outside the DatePIcker that shouldn't close the calendar on click
Example:
`vue`
clickOutsideElementId="clickOutsideElement"
...
/>
- Type: Number
- Default:
Number of month you want to display on mobile
- Type: Number
- Default:
Number of month you want to display on desktop
- Type: Number
- Default:
Number of month you want to have already created, the next month countOfTotalMonthByDefault + 1 will be created directly after you click on pagination button
- Type : String
- Default:
Define the timezone of the Calendar for manage periods and disabled dates in the correct timezone
⚠️ In order to open/close the datepicker from an external element, such as a button make sure to set 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
Emitted every time a booking is clicked
Params:
name | Type | Description
--------------------|-------------------------
event | MouseEvent | Mouse javascript event
date | Date | Clicked Date
currentBooking | Object | Clicked Booking
Example of currentBooking:
`js``
{
checkInDate: "YYYY-MM-DD",
checkOutDate: "YYYY-MM-DD",
style: {
backgroundColor: "#399694",
}
}
Emitted every time when a checkOut is clicked
| name | Type | Description |
| ------- | ---------- | ---------------------- |
| event | MouseEvent | Mouse javascript event |
| checkIn | Date | checkIn |
| checkIn | Date | checkOut |
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.