Contents
Description:
Are creating a application, where you need to integrate date range picker so that, your customer can book the room etc? Then, this component is right for your. This component is specially created for hotel booking.
vue-hotel-datepicker is fully responsive hotel date range picker for VueJS that will show the number of nights selected with availability of several other options such as check-in/check-out feature and multi-language support.
How to use it?
1. Install the component with npm or yarn.
#with npm
npm install vue-hotel-datepicker
#yarn
yarn add vue-hotel-datepicker
2. Import the required component.
import HotelDatePicker from ‘vue-hotel-datepicker’
import ‘vue-hotel-datepicker/dist/vueHotelDatepicker.css’;
3. Now, register the component. Like following:
export default {
components: {
HotelDatePicker,
},
}
4. Date picker template.
<HotelDatePicker />
Available Props:
props: {
alwaysVisible: {
type: Boolean,
default: false,
},
bookings: {
type: Array,
default() {
return []
},
},
closeDatepickerOnClickOutside: {
type: Boolean,
default: true,
},
disableCheckoutOnCheckin: {
type: Boolean,
default: false,
},
disabledDates: {
type: Array,
default() {
return []
},
},
disabledDaysOfWeek: {
type: Array,
default() {
return []
},
},
disabledWeekDays: {
type: Object,
default() {
return {}
},
},
displayClearButton: {
type: Boolean,
default: true,
},
enableCheckout: {
type: Boolean,
default: false,
},
endDate: {
type: [Date, String, Number],
default: Infinity,
},
endingDateValue: {
type: [Date, null],
default: null,
},
firstDayOfWeek: {
type: Number,
default: 0,
},
format: {
type: String,
default: ‘YYYY-MM-DD’,
},
gridStyle: {
type: Boolean,
default: true,
},
halfDay: {
type: Boolean,
default: true,
},
hoveringTooltip: {
default: true,
type: [Boolean, Function],
},
i18n: {
type: Object,
default: () => i18nDefaults,
},
lastDateAvailable: {
type: [Number, Date],
default: Infinity,
},
maxNights: {
type: [Number, null],
default: null,
},
minNights: {
type: Number,
default: 1,
},
periodDates: {
type: Array,
default() {
return []
},
},
positionRight: {
type: Boolean,
default: false,
},
priceSymbol: {
type: String,
default: ”,
},
showPrice: {
type: Boolean,
default: false,
},
showSingleMonth: {
type: Boolean,
default: false,
},
showYear: {
type: Boolean,
default: true,
},
singleDaySelection: {
type: Boolean,
default: false,
},
startDate: {
type: [Date, String],
default() {
return new Date()
},
},
startingDateValue: {
type: [Date, null],
default: null,
},
tooltipMessage: {
type: [String, null],
default: null,
},
value: {
type: Boolean,
default: true,
},
yearBeforeMonth: {
type: Boolean,
default: false,
},
},
Changelog
v4.3:
Improved price styling (fixed #264)Added price currency symbol string, for instance: ‘$’, ‘EUR’. The new prop is priceSymbol, default at empty string
v4.2:
Fixed #257: Disabled dates not updating when new dates are addedNew CHANGELOG.md file
v4.1 – 2021-01-14
correct configuration in i18n fecha packageItalian added on demo (dev) pagenew prop yearBeforeMonth
v4.0 – 2021-01-14
Important Fixes!
Now is working properly in mobile.
Featured changes
Language now is available in a folder with different translations available: es, en, pt, fr (ISO lang codes)New prop disabledWeekDays: An object with the following properties: sunday, monday, tuesday, wednesday, thursday, friday, saturday, the value indicates if that day is disabled (true) or enabled (false).New event next-month-rendered (Beta 11)SCSS now in a separated fileDependencies updated.
Documentation Improvements
PropsEvents
Featured changes
New Event next-month-rendered, emitted every time the next month button is pressed and a new month is rendered.#201 UX improvements related to check-in selection.
Deprecation
Prop: disabledDaysOfWeek: use the new disabledWeekDays instead. disabledWeekDays and disabledDaysOfWeek both work but disabledWeekDays take precedence.Events: bookingClicked, dayClicked, handleCheckIncheckOutHalfDay and periodSelected, now use kebab-case as recommended in Vue documentation (old names still works and will be removed in v5)
Breaking changes
showYear now is true by defaultvalue now is false by default
Other changes
“npm” and “pnpm” lock files with version bump.PR #230: Use relative units instead of pxPR #246: Dependencies fixes.PR #241: Add price argument to periodDates doc.PR #259: Dates become disabled when toggling month (singleDaySelection)Improvementsvalue is Boolean as expected.Component renaming (src)fixed range highlight selection showing on “singleDaySelection”fixed startingDateValue cleared when open the datepicker.minor bug fixes
The post Hotel Booking Date Range Picker For VueJS appeared first on Lipku.com.
Permanent link to this post here
