AirBnb Style Datepicker


#1

Hi Vue:ers! Check out my Vue version of the popular AirBnb datepicker. I couldn’t find a datepicker that matched my requirements, so I decided to make a Vue version of what I consider the “gold standard” of datepickers, the Airbnb one.

Small in size and with good browser support.

Feedback appreciated! :slight_smile:
https://github.com/MikaelEdebro/vue-airbnb-style-datepicker


#2

Good stuff. The inline picker on your example doesn’t let me pick multiple dates though… is that intended? A nice added feature would be an optional time picker.


#3

Thanks! Glad you like it! :slight_smile:
To select a range for the inline datepicker you just have to remove mode: 'single' (it’s range by default), and pass in another model for the second date. I just used single mode to showcase some different alternatives.


#4

Really awesome, will definitely keep this in mind when I encounter a datepicker form in my work!

Cheers for this, starred.


#5

Oh, I was searching for a date picker the other day. I’ll definitely check this one out!


#6

Great work done!
Mikael could you please tell what could be a problem when building localy?
Did a fork and tried to build from source localy.
Got error:
“sh: bili: command not found”
Solved it by: “npm i -D bili”

Tried again “npm run-script build” and got error:
:rotating_light: (babel) Plugin/Preset files are not allowed to export objects, only functions. In /Users/eldar/Developer/source/gitlab/vue-airbnb-style-datepicker/node_modules/babel-preset-stage-2/lib/index.js

How to solve this problem?

My env:
NPM: 5.5.1
Node: v8.7.0
Mac OS X: 10.12.6

Thanks!


#7

great calendar. Just learning VUE JS. We have a site we offer accommodations. Customer books by example 7 - 14 july (checking arround 14;00 and checkout at 12:00). 1- 7 july and 14 - 21 july is still available. Now 7 and 14 july is not clickable anymore. I want to add ‘half’ days for check and chekout so other vistors can select 1- 7 july and 14 - 21 july. See my example in june

How can i manage this?


#8

@remcoz There is no support in the component for the scenario that you explain. But it might be possible that you can solve this with CSS? Like adding a :after pseudo element to first and last selected date, with a triangle. And you probably have to change so you remove the first and last date from the disabled dates (to make them clickable).
A bit hacky, but it might work. Good luck!


#9

Hi, Just wondering if there is any way of adding the dates into the actual calendar where the month and year are shown as they selected? Rather than seeing the changes in an input or button?