Vue date range picker component

Overview

Release 1.0.9

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

[email protected]

๐Ÿ‘Š ๐Ÿ‘Š ๐Ÿ‘Š An easier Calendar in Vue.js ๐Ÿ‘Š ๐Ÿ‘Š ๐Ÿ‘Š


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

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

Edit vuejs-spreadsheet

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

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

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.

Issues
  • Can Today date be unavailable past certain hour?

    Can Today date be unavailable past certain hour?

    Is there a way to not allow to make reservations starting on the same day? For example, makes no sense to allow user to make reservation at 10 pm today.

    Basically Gray today date if the current time is past 4 pm airbnb does something similar.

    Perhaps it's possible and I am not aware how to.

    question 
    opened by cjlaborde 3
  • feature(booking) - #65 - Add a range of bookings

    feature(booking) - #65 - Add a range of bookings

    enhancement 
    opened by joffreyBerrier 2
  • v4.0.0-dev in krystalcampioni/vue-hotel-datepicker incorporates all the changes

    v4.0.0-dev in krystalcampioni/vue-hotel-datepicker incorporates all the changes

    https://github.com/krystalcampioni/vue-hotel-datepicker/releases/tag/v4.0.0-dev

    opened by matiasperrone 2
  • how can I pass date to Calendar?

    how can I pass date to Calendar?

    how can I pass date to DatePicker?

    Basically to pass date to date picker and had it show the date. Since I will do the selection with fullcalendar. https://fullcalendar.io/docs/date-clicking-selecting-demo

    So I select date here and take the start date and end date values and pass it to vue hotel datepicker and had it show the date. Here image of what I want to do. https://i.imgur.com/TmZEb25.png

    opened by cjlaborde 2
  • Check disabled dates whithin the range.

    Check disabled dates whithin the range.

    https://github.com/krystalcampioni/vue-hotel-datepicker/issues/188 Perhaps you could resolve this issue.

    I did so by

                calculateReservedDates() {
                    return this.disabledDates.map(disabledDate => moment(disabledDate).isBetween(this.start_date, this.end_date)).includes(true);
                },
    

    Yet would be great if this was added as default. Since this is a very crucial aspect of a reservation calendar it should not allow you to make reservations if your date range includes days from the disabled dates

    <HotelDatePicker
     :disabledDates="['2018-01-01', '2018-01-11', '2018-01-21' ]">
    </HotelDatePicker>
    
    opened by cjlaborde 2
  • Min nights overrides disabled dates

    Min nights overrides disabled dates

    A check in date with min nights overrides disabled dates which should not be allowed.

    opened by woutvanriel 1
  • add option for an already open calendar

    add option for an already open calendar

    enhancement 
    opened by ElSiham 1
  • vue-hotel-datepicker@0.5.0

    [email protected]

    • Mobile:
      • CheckIn - CheckOut scroll to current month
      • Review the style of cross button
    • Performance
      • Dynamic dom rendering on mobile
    • If CheckIn, click on CheckIn clearSelection
    enhancement 
    opened by joffreyBerrier 0
  • clear selection when click on chekin

    clear selection when click on chekin

    opened by joffreyBerrier 0
  • !default scss variables to make overriding easier

    !default scss variables to make overriding easier

    Thanks for the plugin, it'd be great though if we could override the scss variables for a quick customisation. The look of the plugin suits my site already, so this would be a quick fix, to save me going through class by class.

    * VARIABLES
    * ============================================================*/
    $white: #fff !default;
    $black: #000 !default;
    $gray: #424b53 !default;
    $primary-text-color: #35343d !default;
    $lightest-gray: #f3f5f8 !default;
    $primary-color: #195252 !default;
    $medium-gray: #424b53 !default;
    $light-gray: #eaeaea !default;
    $disabledBg: #f5f7f8 !default;
    $disabled-color: #D8D8D8 !default;
    $dark-gray: #2d3047 !default;
    $box-shadow: 0 0 10px 3px rgba(red, .4) !default;
    
    // Bg Date when hover it
    $bgValidHoverDate: $primary-color !default;
    $colorValidHoverDate: $white !default;
    
    // Bg Date when range or valid it
    $bgRollActiveDage: $primary-color !default;
    $colorRollActiveDage: $white !default;
    
    $font-family: 'Helvetica Neue' !default;
    $font-small: 14px !default;
    $font-regular: 400 !default;
    $font-bold: 700 !default;
    
    $width-half-day: 120px !default;
    enhancement 
    opened by jamesgill3 1
Releases(1.0.9)
  • 1.0.9(Apr 29, 2021)

  • 1.0.7(Apr 27, 2021)

  • 1.0.6(Apr 26, 2021)

  • 1.0.5(Apr 23, 2021)

    • Refacto the way to paginate on mobile side + Clean some useless code
    • Add /dist on gitignore
    • Add a button for paginate on mobile like airbnb :
    • remove lodash library
    • Clean css : -- Remove float: left. / right it's old way to do css -- Remove use v-if instead of --hidden-tablet --hidden-desktop -- Use css grid for calendar
    • Review the pagination on mobile side, 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 <Day></Day> when day.belongsToThisMonth === false to avoid 10 day per month load for nothing at all
    • Increase the performance on mobile side
    • Sort props by ASC
    • Add v-if="isMobile" on computed when is not triggered on mobile
    • Remove duplicate <Day /> unify pagination for desktop and mobile
    • Create a <DatePickerWeekRow/> component for not duplicate content
    • Add a countOfTotalMonthByDefault props 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

    Screenshots :

    Desktop

    Capture dโ€™eฬcran 2021-04-22 aฬ€ 11 57 59 Capture dโ€™eฬcran 2021-04-22 aฬ€ 11 58 04

    Mobile

    Capture dโ€™eฬcran 2021-04-22 aฬ€ 11 57 50 Capture dโ€™eฬcran 2021-04-22 aฬ€ 11 57 54 Source code(tar.gz)
    Source code(zip)
  • 0.7.0(Jul 1, 2020)

  • 0.5.7(Jun 9, 2020)

  • 0.5.5(Jun 4, 2020)

  • 0.5.0(Jun 2, 2020)

Owner
joffrey
Creative Developer, tech enthusiast
joffrey
a date-range-picker follows the Material Design spec powered by vue.js (alpha)

Document | ไธญๆ–‡ๆ–‡ๆกฃ If the document is not accessible, please open an issue, I will fix it right away. v-md-date-range-picker Material Design DateRangePic

ๅฐๅฐ้ฒ็ญ 67 Oct 27, 2021
A date-range-picker follows the Material Design spec powered by vue.js

A date-range-picker follows the Material Design spec powered by vue.js

ๅฐๅฐ้ฒ็ญ 67 Oct 27, 2021
Range date picker with simple usage

VueRangedatePicker Date picker with range selection Demo https://bliblidotcom.github.io/vue-rangedate-picker/demo/ Installation npm install --save vue

Blibli.com 216 Dec 15, 2021
A vue component using Bootstrap 4 styles for date range selection

vue-date-range-picker A vue component using Bootstrap 4 styles for date range selection Live demo (jsfiddle) Features Date range selection Compare fea

Antoine Matyja 30 Mar 31, 2021
A vue date picker component inspired by material design

Vue Date Picker A vue date picker component inspired by material design Contents Installing Examples Formatting Selected Date API Installing $ npm ins

Trevor Stacy 57 Nov 6, 2021
An easy-to-use and customizable date picker component powered by Vue js

vue-datepicker An easy-to-use and customizable date picker component powered by Vue js Demo:s https://codesandbox.io/s/eager-rubin-5zcm9 Install npm i

Krijan Niroula 2 Dec 4, 2021
Mobile friendly datetime picker for Vue. Supports date and datetime modes, i18n and more.

vue-datetime Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and more. Demo Go to demo. Installation Bundler (We

Mario Juรกrez 984 Jan 6, 2022
A Vue project - single date picker

A Vue project - single date picker

null 16 Jun 11, 2021
Lightweight and mobile friendly date time picker based on Vue.

Vue date pick Lightweight and mobile friendly date time picker based on Vue. Vue date pick emphasizes performance, elegant and usable UI on all screen

Damir Brekalo 230 Jan 10, 2022
VueJS component to select dates & time, including a range mode

VueCtkDateTimePicker A vue component for select dates (range mode available) & time This documentation is for v2.*. Find v1 documentation here Dark mo

Chronotruck 790 Jan 16, 2022
A vue2 range datepicker

A simple range datepicker based on Vue2

HC 3 Sep 13, 2021
Datepicker component for vue.js built with Tailwind CSS, and the day.js date library.

Datepicker component for vue.js build with Tailwind CSS & dayjs date library

Ken 183 Dec 15, 2021
A vue plugin to select jalali date and time

vue-persian-datetime-picker A vue plugin to select jalali date and time See documentation and demo at vue-persian-datetime-picker Installation browser

Mohamad Talkhabi 498 Jan 16, 2022
A vue plugin to select jalali date and time

vue3-persian-datetime-picker A vue plugin to select jalali date and time See documentation and demo at vue-persian-datetime-picker. If you are using v

Mohamad Talkhabi 26 Jan 11, 2022
vue 3 datepicker. supports disabling, highlighting of dates and programmatic access of date.

Vue 3 Datepicker A datepicker Vue component. Compatible with Vue 3 Only Demo Install Usage Date Formatting Props Events Disabled dates Highlighted dat

shubhadip 19 Jan 16, 2022
Not your ordinary datepicker. A Vuejs draggable date selector with a fresh responsive design, mobile ready and 0 dependencies, 17kb gzipped

DraggableCal A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Available Languages Dev & Build Licence Thanks Demo To view a demo

Tom 82 Jan 5, 2022
Vue.js component for Flatpickr datetime picker :calendar:

Vue FlatPickr Component Vue.js component for Flatpickr date-time picker. Demo or JSFiddle Version matrix Vue.js version Package version Branch 2.x 8.x

Ankur Kumar 842 Jan 13, 2022
A Color Picker Component Based on Vue And Element-UI Supports Drag And Drop

@toc Introduction ็ฎ€ไป‹ This is a color picker component based on vue and element-ui. It is powerful and supports drag and drop, color picking and other

null 0 Dec 7, 2021
VueJS Monthly Picker component

vue-monthly-picker Vue Monthly Picker Components Checkout demo at https://ittus.github.io/vue-monthly-picker/ Support Install npm install vue-monthly-

Thang Minh Vu 63 Jan 2, 2022