Release 1.3.3

Breacking change on latest version

https://github.com/joffreyBerrier/vue-hotel-datepicker/releases/tag/1.3.3

vue-hotel-datepicker@2

👊👊👊An easier Calendar in Vue.js 👊👊👊

Vue3 version => https://github.com/joffreyBerrier/vue-datepicker

What I did:

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 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 <br/> %{minNightInPeriod} %{night} is required."
},
```
Add showSingleMonth which allows to show 1 month
Trigger window.resize on desktop, mobile, tablet
Add event clicked Esc for clearSelection
Add invalid class on checkIn date
Breakings changes: removed allowedRanges, use periods if you want to have a range of disableDates
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 countOfMobileMonth / 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 <Day /> unify pagination for desktop and mobile
Create a ` component for not duplicate content
Add a countOfTotalMonthByDefaultprops for generate x month on a created
Remove duplicate useless <baseInput />
Refacto the style of <baseInput />
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

What I will improve

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.

Sandbox example

Open this link on a new tab

Contributing to development

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

If you have rights to merge

Once the pr is merged, go to the master branch
Launch this command :

Pull master

git pull origin master

Build source files for npm package

yarn run build-package

Push to npm

npm publish // push to npm

Installation

NPM / YARN

Install the package:

npm install vue-hotel-datepicker2 --save
yarn add vue-hotel-datepicker2

import HotelDatePicker from "vue-hotel-datepicker2";
import "vue-hotel-datepicker2/dist/vueHotelDatepicker2.css";

export default {
  components: {
    HotelDatePicker,
  },
};

<HotelDatePicker />

Props/Options

lastDateAvailable

Type: Date
Default: null

Allows to stop calendar pagination after the month of that date

halfDay

Type: Boolean
Default: true

Allows to have half a day, if you have check in at noon and checkout before noon

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.

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

disableCheckoutOnCheckin

Type: boolean
Default: false

If set to true, disable checkout on the same date has checkin

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'],
  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."
  },
  week: "week",
  weeks: "weeks",
}

periodDates

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
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
  },
  {
    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

showSingleMonth

Type: Boolean
Default: false

If set to true, display one month only

positionRight

Type: Boolean
Default: false

Display calendar on the right or the left of the input (left by default)

alwaysVisible

Type: Boolean
Default: false

Display calendar in the page without an input

bookings

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:

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"
    }
  }
],

clickOutsideElementId

Type: String
Default: ''

Id of an element outside the DatePIcker that shouldn't close the calendar on click

Example:

<template>
  <button id="clickOutsideElement" @click="toggleDatePickerOutside">
    Open Outside
  </button>
  <DatePicker
    ref="DatePicker"
    clickOutsideElementId="clickOutsideElement"
    ...
  />
</template>
<script>
...
methods: {
  toggleDatePickerOutside() {
    this.$refs.DatePicker.showDatepicker();
  }
}
</script>

countOfMobileMonth

Type: Number
Default: 10

Number of month you want to display on mobile

countOfDesktopMonth

Type: Number
Default: 2

Number of month you want to display on desktop

countOfTotalMonthByDefault

Type: Number
Default: 12

Number of month you want to have already created, the next month countOfTotalMonthByDefault + 1 will be created directly after you click on pagination button

Timezone

Type : String
Default: Europe/Paris

Define the timezone of the Calendar for manage periods and disabled dates in the correct timezone

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

dayClicked

Emitted every time when day is clicked

Params:

name	Description
date	new Date()
formatDate	YYYY-MM-DD
nextDisabledDate	Date, Number, String

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

clearSelection

Emitted every time you clicked on clearDate button

handleCheckIncheckOutHalfDay

Emitted on [beforeMount, clearSelection, checkOut]

Params:

name	Description
checkIncheckOutHalfDay	Object of checkinCheckout date

bookingClicked

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:

{
  checkInDate: "YYYY-MM-DD",
  checkOutDate: "YYYY-MM-DD",
  style: {
    backgroundColor: "#399694",
  }
}

periodSelected

Emitted every time when a checkOut is clicked

name	Type	Description
event	MouseEvent	Mouse javascript event
checkIn	Date	checkIn
checkIn	Date	checkOut

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.

Name		Name	Last commit message	Last commit date
Latest commit History 443 Commits
.github/ISSUE_TEMPLATE		.github/ISSUE_TEMPLATE
src		src
tests		tests
.browserslistrc		.browserslistrc
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
babel.config.js		babel.config.js
demo.gif		demo.gif
issue_template.md		issue_template.md
jest.config.js		jest.config.js
package.json		package.json
travis.yml		travis.yml
vue.config.js		vue.config.js
yarn.lock		yarn.lock

License

joffreyBerrier/vue-hotel-datepicker

Folders and files

Latest commit

History

Repository files navigation

Release 1.3.3

Breacking change on latest version

vue-hotel-datepicker@2

What I did:

What I will improve

Sandbox example

Contributing to development

If you have rights to merge

Installation

NPM / YARN

Props/Options

lastDateAvailable

halfDay

format

startDate

startingDateValue

endDate

endingDateValue

firstDayOfWeek

minNights

maxNights

disabledDates

disabledDaysOfWeek

enableCheckout

hoveringTooltip

tooltipMessage

singleDaySelection

showYear

closeDatepickerOnClickOutside

displayClearButton

disableCheckoutOnCheckin

i18n

periodDates

MinimumDuration with a periodType weekly-~ equals to a week

showSingleMonth

positionRight

alwaysVisible

bookings

clickOutsideElementId

countOfMobileMonth

countOfDesktopMonth

countOfTotalMonthByDefault

Timezone

API

hideDatepicker()

showDatepicker()

toggleDatepicker()

Events

dayClicked

checkInChanged

checkOutChanged

clearSelection

handleCheckIncheckOutHalfDay

bookingClicked

periodSelected

Credits

About

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases 16

Packages 0

Languages

`MinimumDuration` with a periodType `weekly-~` equals to a week

Packages