Vue Hotel Datepicker

screenshot of Vue Hotel Datepicker
vue
scss

A VueJS v2 responsive date range picker. Displays the number of nights selected and allow several useful options like custom check-in/check-out rules, localization support and more.

Overview

The Vue Hotel Datepicker is a responsive date range picker for Vue.js that offers various options such as displaying the number of nights selected, custom check-in/check-out rules, and localization support. It allows users to show bookings, disable certain dates or days of the week, and configure different pricing periods.

Features

  • Always Visible: Displays the calendar without an input if set to true.
  • Bookings: Option to show bookings.
  • Custom Check-in/Check-out Rules: Allows setting rules such as disabling checkout on the same date as check-in.
  • Disabled Dates: Ability to disable specific dates.
  • Localization Support: Supports different languages for day names and other translations.
  • Clear Button: Option to display a clear button for easy date clearing.
  • Half-Day Support: Allows selecting half-day periods for check-in and check-out.
  • Price Display: Option to display prices for different date ranges.
vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.