vue-hotel-datepicker
Advanced tools
vue-hotel-datepicker - npm Package Compare versions
Comparing version 4.0.0-beta.10 to 4.0.0-beta.11
| { | ||
| "name": "vue-hotel-datepicker", | ||
| "version": "4.0.0-beta.10", | ||
| "version": "4.0.0-beta.11", | ||
| "description": "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, localization support and more", | ||
@@ -5,0 +5,0 @@ "author": "krystalcampioni <hello@krystalcampioni.com>", |
311
README.md
@@ -1,2 +0,3 @@ | ||
| [](https://david-dm.org/krystalcampioni/vue-hotel-datepicker) [](https://david-dm.org/krystalcampioni/vue-hotel-datepicker?type=dev) | ||
| [](https://david-dm.org/krystalcampioni/vue-hotel-datepicker) [](https://david-dm.org/krystalcampioni/vue-hotel-datepicker?type=dev) | ||
| [](vue-hotel-datepicker) | ||
@@ -54,143 +55,36 @@ [](https://travis-ci.org/krystalcampioni/vue-hotel-datepicker) | ||
| ### lastDateAvailable | ||
| - Type: `Date` | ||
| - Default: `null` | ||
| | Name | Type | Default | Description | | ||
| |--|--|--|--| | ||
| |**alwaysVisible**|`Boolean`|`false`|If true shows display calendar in the page without an input. | ||
| |**bookings**|`Array`|`[]`|If you want to show bookings. | ||
| |**closeDatepickerOnClickOutside**|`Boolean`|`true`|Closes the date picker when the user clicks outside the date picker. | ||
| |**disableCheckoutOnCheckin**|`Boolean`|`false`|If set to true, disable checkout on the same date has checkin. | ||
| |**disabledDates**|`Array`|`[]`|An array of strings in this format: `YYYY-MM-DD`. All the dates passed to the list will be disabled. | ||
| |**disabledDaysOfWeek**|`Array`|`[]`|An array of strings in this format: `['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']`. All the days passed to the list will be disabled. (Before final release it will be changed to lower case english names). | ||
| |**displayClearButton**|`Boolean`|`true`|If set to true, displays a clear button on the right side of the input if there are dates set. | ||
| |**enableCheckout**|`Boolean`|`false`|If `true`, allows the checkout on a disabled date. | ||
| |**endDate**|`[Date, String, Number]`|`Infinity`|The end view date. All the dates after this date will be disabled. | ||
| |**endingDateValue**|`Date`|`null`|The initial value of the end date. | ||
| |**firstDayOfWeek**|`Number`|`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. | ||
| |**format**|`String`|`'YYYY-MM-DD'`|The date format string. | ||
| |**gridStyle**|`Boolean`|`true`|If false hides the grid around the days. | ||
| |**halfDay**|`Boolean`|`true`|Allows to have half a day, if you have check in at noon and checkout before noon | ||
| |**hoveringTooltip**|`[Boolean, Function]`|`true`|Shows a tooltip with the number of nights when hovering a date. | ||
| |**i18n**|`Object`| see below | Holds the traslation of the date picker. | ||
| |**lastDateAvailable**|`[Number, Date]`|`Infinity`|Allows to stop calendar pagination after the month of that date | ||
| |**maxNights**|`Number`|`null`|Maximum nights required to select a range of dates. `0` or `null` for no limit. | ||
| |**minNights**|`Number`|`1`|Minimum nights required to select a range of dates. | ||
| |**periodDates**|`Array`| `[]` | If you want to have specific startAt and endAt period with different duration or price or type of period. See below for more information | ||
| |**positionRight**|`Boolean`|`false`|If true shows the calendar on the **right** of the input. | ||
| |**showPrice**|`Boolean`|`false`|If set to true, displays a price contains on your `periodDates`. | ||
| |**showSingleMonth**|`Boolean`|`false`|If set to true, display one month only | ||
| |**showYear**|`Boolean`|`true`|Shows the year next to the month. | ||
| |**singleDaySelection**|`Boolean`|`false`|When true only one day can be selected instead of a range. | ||
| |**startDate**|`[Date, String]`|`new Date()`|The start view date. All the dates before this date will be disabled. | ||
| |**startingDateValue**|`Date`|`null`|The initial value of the start date. | ||
| |**tooltipMessage**|`String`|`null`|If provided, it will override the default tooltip "X nights" with the text provided. You can use HTML in the string. | ||
| |**value**|`Boolean`|`false`| The v-model prop, controls the visibility of the date picker. | ||
| Allows to stop calendar pagination after the month of that date | ||
| ## i18n Defaults: | ||
| ### 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: | ||
| ```js | ||
@@ -229,6 +123,5 @@ i18n: { | ||
| ### periodDates | ||
| ## periodDates | ||
| - Type: `Array` | ||
| - Default: `[]` | ||
| If you want to have specific startAt and endAt period with different duration or price or type of period- | ||
@@ -240,3 +133,3 @@ | ||
| startAt | String | YYYY-MM-DD | ||
| minimumDuration | Number | Minimum stay (Type: weekly => per_week | Type: nightly => per night) | ||
| minimumDuration | Number | Minimum stay (Type: weekly => per_week \| Type: nightly => per night) | ||
| periodType | String | *nightly*, *weekly_by_saturday*, *weekly_by_sunday* | ||
@@ -246,3 +139,3 @@ price | Float | Price displayed on each day for this period | ||
| Example: | ||
| **Example:** | ||
| ```js | ||
@@ -274,49 +167,14 @@ periodDates: [ | ||
| ### showPrice | ||
| - Type: `Boolean` | ||
| - Default: `false` | ||
| If set to true, displays a price contains on your periodDates | ||
| ### showSingleMonth | ||
| - Type: `Boolean` | ||
| - Default: `false` | ||
| If set to true, display one month only | ||
| ### gridStyle | ||
| - Type: `Boolean` | ||
| - Default: `true` | ||
| **Show** or **hide** a grid around the days | ||
| ### 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 | ||
| ## bookings | ||
| If you want to show 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) | ||
| Key | Type | Description | ||
| --------------------------------------|-------------|------------------------- | ||
| checkInDate | String | YYYY-MM-DD | ||
| checkOutDate | String | YYYY-MM-DD | ||
| style | Object | Style, (see the example) | ||
| Example: | ||
| **Example:** | ||
| ```js | ||
@@ -344,57 +202,25 @@ bookings: [ | ||
| ## API | ||
| ⚠️ In order to open/close the datepicker from an external element, such as a button make sure to set `closeDatepickerOnClickOutside` to false | ||
| ## Methods | ||
| ⚠️ In order to open/close the datepicker from an external element, such as a button make sure to set `closeDatepickerOnClickOutside` to `false` | ||
| ### hideDatepicker() | ||
| | Name | Description | | ||
| |--|--| | ||
| |`hideDatepicker` | Hides the datepicker | ||
| |`showDatepicker` | Shows the datepicker | ||
| |`toggleDatepicker`| Toggles (shows or hides) the datepicker | ||
| Hide datepicker | ||
| ### showDatepicker() | ||
| Show datepicker | ||
| ### toggleDatepicker() | ||
| Toggle datepicker | ||
| ## Events | ||
| ### dayClicked | ||
| Emitted every time when day is clicked | ||
| | Name | Params enum | Description | | ||
| |--|--|--| | ||
| |`booking-clicked`|`MouseEvent`, `Date`, `Object`|Emitted every time a booking is clicked. The first param is the mouse javascript event, the second is the clicked Date and the third is the clicked booking. | ||
| |`check-in-changed`| | Emitted every time a new check in date is selected with the new date as payload. | ||
| |`check-out-changed`| | Emitted every time a new check out date is selected with the new date as payload. | ||
| |`clear-selection`| | Emitted every time you clicked on clear Date button. | ||
| |`day-clicked`| `Date`, `String`, `Date\|Number\|String` | Emitted every time when day is clicked. The params are clicked: date, format and next disabled date. | ||
| |<span style="white-space: pre;">`handle-checkin-checkout-half-day`</span>| `Object` | Emitted on [`beforeMount`, `clear-selection`, `checkout`]. Param: Object of checkin-checkout date. | ||
| |`next-month-rendered`| | Emitted every time the next month is rendered. | ||
| |`period-selected`| `Event`, `Date`, `Date` | Emitted every time when a checkOut is clicked. Params: Mouse Event, checkIn, checkOut | ||
| 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: | ||
| ### `booking-clicked` examples | ||
| ```js | ||
@@ -410,14 +236,3 @@ { | ||
| ### 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](https://github.com/benitolopez/hotel-datepicker) by @benitolopez. Version 2.0.0 was completely rewritten with Vue, removing the original library, removing some features and introducing others. |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-69.95%
775971
- Number of package files
- decreased by-23.33%
23
- Lines of code
- decreased by-45.64%
16839
- Number of lines in readme file
- decreased by-44.36%
232
No dependency changes