Vue date range picker component

Overview

dependencies Status devDependencies Status

npm Build Status

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.

demo gif

Demo

https://krystalcampioni.github.io/vue-hotel-datepicker/

Installation

NPM

npm install vue-hotel-datepicker

PNPM

pnpm install vue-hotel-datepicker

YARN

yarn add vue-hotel-datepicker
import HotelDatePicker from 'vue-hotel-datepicker'
import 'vue-hotel-datepicker/dist/vueHotelDatepicker.css';

export default {
  components: {
    HotelDatePicker,
  },
}
<HotelDatePicker />

Props/Options

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 [] DEPRECATED: An array of strings in this format: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']. All the days passed to the list will be disabled. It depends on the translated names.
disabledWeekDays Object {} 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).
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.
priceSymbol String '' The price symbol added before the price when showPrice is true and a price has been set in one of the periodDates array items (period).
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.
yearBeforeMonth Boolean false Show the year before the month, only when showYear is true.

i18n Defaults:

i18n: {
  "night": "Night",
  "nights": "Nights",
  "week": "week",
  "weeks": "weeks",
  "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": "%{minNightInPeriod} %{night} minimum.",
  },
}

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 | Type: nightly => per night)
periodType String nightly, weekly_by_saturday, weekly_by_sunday
price Float Price displayed on each day for this period

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

bookings

If you want to show bookings

  • Type: Array
  • Default: []
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"
    }
  }
],

Methods

⚠️ In order to open/close the datepicker from an external element, such as a button make sure to set closeDatepickerOnClickOutside to false

Name Description
hideDatepicker Hides the datepicker
showDatepicker Shows the datepicker
toggleDatepicker Toggles (shows or hides) the datepicker

Events

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.
handle-checkin-checkout-half-day 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

booking-clicked examples

{
  checkInDate: "YYYY-MM-DD",
  checkOutDate: "YYYY-MM-DD",
  style: {
    backgroundColor: "#399694",
  }
}

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.

Comments
  • Complete rewrite in fork

    Complete rewrite in fork

    @joffreyBerrier said:

    Hi I have created a fork of the repo and i have do some changes

    https://github.com/joffreyBerrier/vue-hotel-datepicker/projects/1 https://github.com/joffreyBerrier/vue-hotel-datepicker

    @cjlaborde said:

    I didn't like that you removed the original design, it doesn't look good now, I preferred the green look since it matched my project color theme. As well-liked a lot the shadowed effect on Selecting date with white background. Don't like the gray at all preferred the lighter green. Why the issue tab not available in your fork? Can you add the original design back? and enable the issue tab? I did like a lot the changes you made like separated the CSS and removed pug with html.

    @matiasperrone (colaborator) said:

    All these changes are available in v3 did you try it?

    @cjlaborde said:

    Does v3 has these features that Joffrey implemented? 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 trigger Allows to have half a day, if you have check in at noon and checkout before noon

    Notice that v3 still uses pug instead of HTML As well does it has separated css you can access like this? import 'vue-hotel-datepicker2/dist/vueHotelDatepicker2.css';

    question 
    opened by matiasperrone 48
  • Close icon does not load

    Close icon does not load

    Describe the bug A clear and concise description of what the bug is. After installing the package and importing it, everything seems to work but the icons is not working.

    I checked the computed styles on my browser I found the background styles that contains the svg icons path, I hovered over the path of the svg icon and it shows "Could not load the image".

    The path looks like this: http://localhost:8000/images/vendor/vue-hotel-datepicker/dist/ic-arrow-right-datepicker.regular.99ab0620.svg?38d376a780635ae10e835c1c1a66cac8

    I'm currently using Laravel with Vue.js for development

    To Reproduce Steps to reproduce the behavior:

    1. Go to 'the date-picker input'
    2. Click on the input field
    3. Icons can't be loaded and that is the error

    Expected behavior The package icons should be loaded in the date picker.

    Screenshots Capture

    Desktop (please complete the following information):

    • OS: [Windows 10]
    • Browser [chrome, firefox]
    • Version [89.0b2 (64-bit)]
    bug help wanted more info 
    opened by amr-coding 18
  • Disabled dates not updating when new dates are added.

    Disabled dates not updating when new dates are added.

    Description

    People need to select dates when a room is occupied. When these dates are added, I want to make them disabled in the picker so they don't get selected again. But the disabled dates don't seem to update once I add dates to the array.

    Code sample

    Hotel Date Picker

    <HotelDatePicker
    	:startDate="today"
    	:endDate="new Date(new Date().getFullYear() + 1, 11, 31)"
    	format="DD-MM-YYYY"
    	ref="datePicker"
    	:i18n="NL"
    	:showYear="true"
    	:disabledDates="disabledDates"
           @check-in-changed="handleCheckIn($event)"
           @check-out-changed="handleCheckOut($event)">
    </HotelDatePicker>
    

    I add dates to be disabled to the array like this:

    setDisabledDates() {
    	// Set empty array.
    	this.disabledDates = []
    
    	// Loop through all the dates.
    	this.dates.forEach((date) => {
    		let checkin = date.checkin.split("-")
    		let checkout = date.checkout.split("-")
    
    		// Get all dates between the checkin and checkout date.
    		let itr = moment.twix(new Date(checkin[2] +"-"+ checkin[1] +"-"+ checkin[0]), new Date(checkout[2] +"-"+ checkout[1] +"-"+ checkout[0])).iterate("days")
    
    		// Iterate through the dates.
    		while(itr.hasNext()) {
    			// Add each date to an array to be disabled.
    			this.disabledDates.push(itr.next().format("YYYY-MM-DD"))
    		}
    	})
    }
    

    The setDisabledDates() function is triggered by a watcher.

    Expected behavior: The newly added dates in the array to be disabled in the datepicker.

    Actual behavior: They get disabled once I open and close it again, but not immediately when they get added to the array.

    Datepicker Version

    [email protected]

    bug 
    opened by iiRobin 18
  • Bug with april month and starting-date-value

    Bug with april month and starting-date-value

    Description

    When Im trying to set starting-date-value and ending-date-value it works with all months except april. I've tried to use new Date(), moment, everything that comes to my mind and still getting problems setting starting-date-value with april (04) month. I even did start date feb to april and it's working, the problem is with april to april.

    Error in render: "TypeError: Cannot read property 'days' of undefined"

    Code sample

    <HotelDatePicker :starting-date-value="temporal_check_in" :ending-date-value="temporal_check_out" @check-in-changed="setCheckinDate" @check-out-changed="setCheckoutDate" />

    created() { if (this.$route.query.check_in && this.$route.query.check_out) { this.config.check_in = this.$route.query.check_in; this.config.check_out = this.$route.query.check_out;

     // DOWN HERE WE HAVE THE PROBLEM LINES
      this.temporal_check_in = moment(this.$route.query.check_in).toDate();
      this.temporal_check_out = moment(this.$route.query.check_out).toDate();
    }
    

    },

    bogus 
    opened by akation 17
  • Disabled days problem

    Disabled days problem

    Hi. How I make to disable all day?? The events get from Google Calendar

    In image set disabled days: 2021-01-02, 2021-01-03, 2021-01-04 but in image only block day: 2021-01-02 and it's available to select 3 and 4 day but it's not correct can't choose day 3 and 4

    image

    If set true halfDay block date 2021-01-01 automatic, why it's block??

    image

    bug 
    opened by yashiroiori 14
  • Feature request: specialDates

    Feature request: specialDates

    Hi, just started working with your hotel-datepicker (and Vue for that matter). Love the looks and the options already in it.

    Was wondering if you have plans for a function like enableCheckin, similar as enableCheckout but for start date. I can manipulate the disabled dates to do this, but it's nicer to do it in the picker itself. Using enableCheckin and enableCheckout together will give an issue for 1 night disabled dates since a consecutive range will not be possible, and there is currently no way to show this. This might be due to the fact that the user thinks in days, but the hotel business works with nights.

    Another possible feature could be: tentativeDates. Quite often you have unconfirmed bookings, and instead of showing these dates as unavailable, these can be shown in a different color and/or warning, but make it possible to still select them.

    Still working to master Vue, otherwise I'd try this with a PR..

    help wanted Feature Request good first issue 
    opened by Maxximus007 14
  • change index.js (createApp), ondestroy, emits

    change index.js (createApp), ondestroy, emits

    Hi,

    Here is a first attempt to migrate to vue 3 (#213)

    Basically: Changed index.js to use createApp add emits for emitted events. changed destoryed to unmounted upgraded packages to vue 3

    There is an issue with not able to load close.svg when I used it in a fresh vue 3 project. But it is also an issue with the vue2 version. (seems not to be packed, probably the way it has been defined img src="@/assets/images/close.svg" alt="x")

    Some tests are failing due to import statements not working. But that is also to the case for the vue2 version.

    besides that, it seems to work for a vue3 project without having tested all the options

    opened by bzd2000 12
  • Refactor disabledDaysOfWeek

    Refactor disabledDaysOfWeek

    As @matiasperrone suggested in #232 , disabledDaysOfWeek are currently based on the translated day name, which doesn't make sense and is pretty unstable stuff.

    Suggestions (comment if you don't agree with some):

    • [ ] use integers for week days, like in so so many libraries: 0 is Sunday, 1 is Monday, and so on
    • [ ] rename disabledDaysOfWeek to disabledWeekDays: shorter and more idiomatic.

    While this seems like a small change, we should make another, much bigger change: base everything on integer-based weekdays, so we don't keep 2 logics with possibly different behaviors (one with integers and one with day names like sundayToSunday stuff)

    If you agree on this, I think we have the following options:

    • make it a breaking change, so sundayToSunday becomes 0to0 and so on. That's a lot of work.
    • don't change anything, then sunday and other English day names become string IDs for weekdays, and 0 always resolves to sunday. This option would be much easier and let us release v4 quickly enough.

    Open to suggestions !

    @matiasperrone @mariusa @krystalcampioni

    opened by superbiche 12
  • feat(styles): add prefix and default to variables

    feat(styles): add prefix and default to variables

    This PR does a few things related to styles which seem necessary for the v4 release:

    • [x] Prefix all SCSS variables with $vhd__ to avoid conflicts when project is used with other frameworks
    • [x] Use !default to allow overriding values by setting the variables prior to including styles
    • [x] Use rgba() for .datepicker__month-day--first-day-selected (fixes #226)
    • [x] Add wrapper to center content on demo page
    • [x] Prefix all classes with .vhd__ to avoid conflicts with other datepicker libraries
    • [x] Use relative units instead of px

    I have been too busy to finish it earlier, I'll deal with the items left in the next few days.

    enhancement 
    opened by superbiche 12
  • Datepicker crashes if starting-date-value and ending-date-value are both in december 2018

    Datepicker crashes if starting-date-value and ending-date-value are both in december 2018

    Description

    The title says it all. If both starting-date-value and ending-date-value are in december 2018, the datepicker crashes. But it only seems to happen for 2018, 2017 and 2019 seem to work. Am i missing something?

    Code sample

    <hotel-date-picker
      single-date-selection
      :starting-date-value="new Date('2018-12-01')"
      :ending-date-value="new Date('2018-12-02')"
    />
    

    Steps to Reproduce

    Run code sample above.

    Expected behavior: Starting and ending dates should be set properly

    Actual behavior: Datepicker throws TypeError: Cannot read property 'days' of undefined

    Datepicker Version

    https://github.com/dseidl/vue-hotel-datepicker/tree/develop

    bug 
    opened by geroldboehler 12
  • please update devDependencies

    please update devDependencies

    Description

    package.json > devDependencies lists some old versions, which depend on old versions themselves, which results in npm warnings

    Please change to the simpler syntax, eg

    "babel-runtime": "7.x.x",
    

    Thanks

    wont fix 
    opened by mariusa 11
  • Suggestion: Show week names on mobile/tablet

    Suggestion: Show week names on mobile/tablet

    The week names for mobile/tablet devices are hidden by css class vhd__hide-up-to-tablet.
    https://github.com/ZestfulNation/vue-hotel-datepicker/blob/main/src/DatePicker/components/WeekRow.vue#L2

    Is there a reason to hide them?
    I'd prefer them to be visible on both pc and mobile/tablet devices, or at least make them selectable by props.

    enhancement Feature Request 
    opened by cocomode18 5
  • Scroll gesture shifts months

    Scroll gesture shifts months

    Hello, first of all thanks for your vue component. When I try to scroll down the page in my mobile I can see the months changes. Why this happens? How to disable this feature?

    Peek 15-03-2022 18-53

    question more info 
    opened by shinesoftware 3
  • Disable the touch event for changing months

    Disable the touch event for changing months

    Describe the bug In mobile layout, when datepicker is open, if i move down or up, with touch event, months changed. This can create a bug with small displays if you can't see the full month.

    To Reproduce Steps to reproduce the behavior:

    1. Go to Datepicker input
    2. Touch event up and down
    3. Changed month
    4. This can create a bug with small displays if you can't see the full month.

    Expected behavior The possibility to disable change month with touch event on mobile devices

    Smartphone (please complete the following information):

    • Device: iPhone
    • OS: iOS 15
    • Browser Safari
    stale more info need repro 
    opened by filippodicostanzo 4
  • Half day documentation

    Half day documentation

    Hello, Could you please put out some documentaion on the half day use? I can read : "Allows to have half a day, if you have check in at noon and checkout before noon" but I can't see how to implement this.

    I'm having some issues with disabled dates.

    EXAMPLE: I have bookings: from the 15th to the 16th of the month from the 17th to the 21st of the month from the 23rd to the 24th of the month from the 25th to the 26th of the month

    So the user should be able to book: from the 16th to the 17th of the month from the 21st to the 23rd of the month from the 24th to the 25th of the month

    My disabled dates calculation goes like: $period = CarbonPeriod::create($booking->starts_at, $booking->ends_at); which disables too many dates

    If I try something like: $period = CarbonPeriod::create(Carbon::parse($booking->starts_at)->addDay(), Carbon::parse($booking->ends_at)->subDay()); It re-enables all the dates I need but the ranges I can select are too wide, now I can book from the 21st to the 25th.

    Given the upper example I shouldn't be able to book: from the 21st to the 25th but only: from the 21st to the 23rd and from the 24th to the 25th

    So the only way to solve this should be Half days. Could you document on how to get this done please?

    help wanted question 
    opened by ShapesGraphicStudio 2
  • Suggestion: disable Date Picking

    Suggestion: disable Date Picking

    I couldnt find this feature, but it would be helpful. Can you disable date Picking? I just want calendar as display for booked dates and prices, but without possibility of picking dates.

    Feature Request 
    opened by jmaric 1
Releases(v4.6.0)
  • v4.6.0(Dec 29, 2022)

  • v4.5.1(Dec 28, 2021)

    Bug fixes

    • Fix call the correct function on date formatting
    • Fix generate initial months in case that the component is set on single month view
    Source code(tar.gz)
    Source code(zip)
  • v4.5(Sep 9, 2021)

    New Features:

    • previous-month-rendered: it will be emited when the user goes to a previous month.
    • check-in-selected: it will be emited when the user clicks on a checkin date. (Is not being trigger when the user selects the same checkin date consecutively).

    Note: ReadMe.md is WIP

    Bug fixes:

    • #296 "Max Nights does not work" thanks to @whitewaterdesign
    • #298 "Single Month View" thanks to @maaqib121:
      • In case of :singleMonth="true", the pagination will now stop at the month of end date rather than a month before the month of end date, while the existing behavior for double months will remain the same
      • In case of :singleMonth="true", generateInitialMonths() method will create one month, while the default behavior for double months will remain the same.
    Source code(tar.gz)
    Source code(zip)
  • v4.4.3(Aug 9, 2021)

  • v4.4.2(Jul 16, 2021)

  • v4.3.1(Jun 25, 2021)

  • v4.3(Feb 12, 2021)

    v4.3:

    • Improved price styling (fixed #264)
    • Added price currency symbol string, for instance: $, EUR. The new prop is priceSymbol, default at empty string
    Source code(tar.gz)
    Source code(zip)
  • v4.2(Feb 10, 2021)

  • v4.1.0(Jan 14, 2021)

  • v4.0.0(Jan 14, 2021)

    v4 - Changelist

    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 file
    • Dependencies updated.

    Documentation Improvements

    • Props
    • Events

    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 default
    • value now is false by default

    Other changes

    • "npm" and "pnpm" lock files with version bump.
    • PR #230: Use relative units instead of px
    • PR #246: Dependencies fixes.
    • PR #241: Add price argument to periodDates doc.
    • PR #259: Dates become disabled when toggling month (singleDaySelection)
    • Improvements
    • value is Boolean as expected.
    • Component renaming (src)
    • fixed range highlight selection showing on "singleDaySelection"
    • fixed startingDateValue cleared when open the datepicker.
    • minor bug fixes
    Source code(tar.gz)
    Source code(zip)
  • v4.0.0-RC1(Jan 12, 2021)

    v4 - Changelist

    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 file
    • Dependencies updated.

    Documentation Improvements

    • Props
    • Events

    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 default
    • value now is false by default

    Other changes

    • "npm" and "pnpm" lock files with version bump.
    • PR #230: Use relative units instead of px
    • PR #246: Dependencies fixes.
    • PR #241: Add price argument to periodDates doc.
    • PR #259: Dates become disabled when toggling month (singleDaySelection)
    • Improvements
    • value is Boolean as expected.
    • Component renaming (src)
    • fixed range highlight selection showing on "singleDaySelection"
    • fixed startingDateValue cleared when open the datepicker.
    • minor bug fixes
    Source code(tar.gz)
    Source code(zip)
  • v4.0.0-beta.15(Dec 29, 2020)

    v4 - Changelist

    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 file
    • Dependencies updated.

    Documentation Improvements

    • Props
    • Events

    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 default
    • value now is false by default

    Other changes

    • Sandbox available on demo page (on "serve" script)
    • "npm" and "pnpm" lock files with version bump.
    • Use relative units instead of px (PR #230)
    • PR #246: Dependencies fixes.
    • PR #241: Add price argument to periodDates doc.
    • Improvements
    • value is Boolean as expected.
    • Component renaming (src)
    Source code(tar.gz)
    Source code(zip)
  • v4.0.0-beta.14(Dec 28, 2020)

    v4 - Changelist

    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 file
    • Dependencies updated.

    Documentation Improvements

    • Props
    • Events

    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 default
    • value now is false by default

    Other changes

    • "npm" and "pnpm" lock files with version bump.
    • Use relative units instead of px (PR #230)
    • PR #246: Dependencies fixes.
    • PR #241: Add price argument to periodDates doc.
    • Improvements
    • value is Boolean as expected.
    • Component renaming (src)
    Source code(tar.gz)
    Source code(zip)
  • v4.0.0-beta.13(Dec 24, 2020)

    v4 - Changelist

    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 file
    • Dependencies updated.

    Documentation Improvements

    • Props
    • Events

    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 default
    • value now is false by default

    Other changes

    • "npm" and "pnpm" lock files with version bump.
    • Use relative units instead of px (PR #230)
    • PR #246: Dependencies fixes.
    • PR #241: Add price argument to periodDates doc.
    • Improvements
    • value is Boolean as expected.
    • Component renaming (src)
    Source code(tar.gz)
    Source code(zip)
  • v4.0.0-beta.12(Dec 23, 2020)

    Beta 12

    Minor bugfixes


    Beta 11

    Documentation Improvements

    • Props
    • Events

    Deprecation

    • 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)

    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.

    Beta 10

    Breaking BC changes

    • showYear now is true by default
    • value now is false by default

    Featured changes

    • Language now is available in a folder with different translations available: es, en, pt, fr (ISO lang codes)

    Other changes

    • "npm" and "pnpm" lock files with version bump.
    • PR #230: Use relative units instead of px.
    • PR #246: Dependencies fixes.
    • PR #241: Add price argument to periodDates doc.
    • minor improvements
    • value is Boolean as expected.
    • Component renaming (src)
    Source code(tar.gz)
    Source code(zip)
  • v4.0.0-beta.10(Dec 21, 2020)

    Breaking BC changes

    • showYear now is true by default
    • value now is false by default

    Featured changes

    • Language now is available in a folder with different translations available: es, en, pt, fr (ISO lang codes)

    Other changes

    • "npm" and "pnpm" lock files with version bump.
    • PR #230: Use relative units instead of px.
    • PR #246: Dependencies fixes.
    • PR #241: Add price argument to periodDates doc.
    • minor improvements
    • value is Boolean as expected.
    • Component renaming (src)
    Source code(tar.gz)
    Source code(zip)
  • v4.0.0-beta.9(Sep 15, 2020)

  • v4.0.0-beta.8(Sep 7, 2020)

  • v4.0.0-beta.7(Sep 4, 2020)

  • v4.0.0-beta.4(Sep 1, 2020)

  • v4.0.0-beta.2(Aug 27, 2020)

  • v3.0.9(May 26, 2020)

  • v3.0.0-RC1(Apr 21, 2020)

  • v2.7.7(Feb 17, 2020)

  • v2.7.2(Nov 21, 2019)

Owner
Krystal Campioni
Front-end developer. Giphy and Whale fluent speaker. Tech, design, and ufology enthusiast.
Krystal Campioni
Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js.

Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js. Documentation For full documentation, visit lite

Ken 346 Jan 3, 2023
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

小小鲁班 68 Nov 12, 2022
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

小小鲁班 68 Nov 12, 2022
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 Jul 8, 2022
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 28 Nov 23, 2022
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 56 Nov 16, 2022
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
Custom column type for RevoGrid component based on duetds-date-picker library

Custom column type for RevoGrid component based on duetds-date-picker library

Revolist 3 Apr 19, 2022
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 982 Dec 16, 2022
A Vue project - single date picker

A Vue project - single date picker

null 17 Oct 9, 2022
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 247 Dec 8, 2022
A simple Vue.js date and time picker made with material design in mind

vue-material-date-time-picker A date and time picker Vue component. Compatible with Vue 2.x. Performed in material design. Demo Install Usage Props NB

Technorely Inc 8 Feb 2, 2022
Mobile friendly datetime picker for Vue. Supports date and datetime modes, i18n and disabling dates.

Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and disabling dates.

null 0 May 1, 2020
Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and disabling dates.

Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and disabling dates.

null 0 Feb 7, 2019
Vue Time Picker - A simple time picker for Vue with a Bootstrap style

Vue Time Picker - A simple time picker for Vue with a Bootstrap style

Justin Dowty 0 Feb 13, 2020
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 828 Dec 26, 2022
A vue2 range datepicker

A simple range datepicker based on Vue2

HC 4 Oct 30, 2022
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 188 Nov 11, 2022
A component for picking date & time

A Vue Component to pick a ranged datetime in calendar. Built alongside Vue 2.x . This datepicker utilize moment for translations.

Robin Boutros 0 Aug 4, 2021