@qwentes/booking-tool v0.6.3

Booking tool

###CSS default variables:

--qw-booking-tool-gap-xs: 8px;
--qw-booking-tool-gap-sm: 12px;
--qw-booking-tool-gap-md: 16px;
--qw-booking-tool-gap-lg: 24px;

--qw-booking-tool-primary-dark: black;
--qw-booking-tool-primary-soft: darkgrey;

--qw-booking-tool-neutral-medium: #999;
--qw-booking-tool-neutral-regular: #ccc;
--qw-booking-tool-neutral-lightest: #fff;

Component settings - all optionals (default in brackets):

startDate: momentjs date instance (today)
endDate: momentjs date instance (today + day)
dateFormat: string ('D MMM YY')
focusedInput: string 'startDate' | 'endDate' | null (null)
numberOfAdults: number (0)
numberOfChildren: number (0)
showDates: boolean (true)
language: string (en-gb)
labelTranslations: Object (DEFAULT_LABELS)
showAdults: boolean (true),
showChildren: boolean (true),
numberOfMonths: number (2),

---------------------------------------------------------

DEFAULT_LABELS = {
  arrival: 'Arrival',
  departure: 'Departure',
  adults: 'Adults n°',
  child: 'Child n°',
  bookNow: 'Book now'
}

Params emitted onBookNow:

momentStartDate: start date momentjs instance,
momentEndDate: end date momentjs instance,,
nativeStartDate: start date native js instance,
nativeEndDate: end date native js instance,
timestampStartDate: timestamp start date,
timestampEndDate: timestamp end date,
checkInDate: days (in number) of the start date,
checkInMonthYear: months and year (in number) of the start date,
checkOutDate: days (in number) of the end date,
checkOutMonthYear: months and year (in number) of the end date,
numberOfAdults: number of adults selected,
numberOfChildren: number of children selected,

To trigger the event, add a listener to the custom event 'bookNow'. The callback will return an object with a property detail containing the params described previously.