vue-cico v2.2.3

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.

Installation

NPM

npm install git+ssh://git@gitlab.production.smartbox.com:npm/vue-cico.git

CSS

There are three styles already set up, which you can select by adding the class to the component:

Search Page: .cico__style-search Landing Page: .cico__style-landing Detail Page: .cico__style-detail

The style is only related to the appearance of the inputs.

To make it work with different colors you need to override the default css variables found in the .css__root class

import 'vue-cico/dist/vueCico.css'

div.cico__root {
    --primary-color: #{$primary-color} //my color variable;
}

Javascript

import Cico from 'vue-cico'

export default {
  components: {
    Cico,
  },
}

<Cico />

Props/Options

i18n Defaults:

export default {
  cta: {
    select: 'Select',
  },
  date: {
    weekdays: {
      sun: 'Sunday',
      mon: 'Monday',
      tue: 'Tuesday',
      wed: 'Wednesday',
      thu: 'Thursday',
      fri: 'Friday',
      sat: 'Saturday',
      short: {
        sun: 'Sun.',
        mon: 'Mon.',
        tue: 'Tue.',
        wed: 'Wed.',
        thu: 'Thu.',
        fri: 'Fri.',
        sat: 'Sat.',
      },
    },
    months: {
      1: 'January',
      2: 'February',
      3: 'March',
      4: 'April',
      5: 'May',
      6: 'June',
      7: 'July',
      8: 'August',
      9: 'September',
      10: 'October',
      11: 'November',
      12: 'December',
    },
  },
  checkInCheckOut: {
    stayLongerOne: 'Want to stay for longer?',
    checkIn: 'Select a check-in date',
    checkOut: 'Select a checkout date',
    included: 'included',
    extraNight: 'extra night(s)',
    yourDates: 'Your travel dates',
    nightsIncluded: 'Night(s) included',
  },
  activity: {
    calendar: {
      checkIn: 'Check-in',
      checkOut: 'Check-out',
    },
    filter: {
      checkIn: 'Check-in',
      checkOut: 'Check-out',
      action: 'Add dates',
      night: 'night',
      nights: 'nights',
      clear: 'Clear',
    },
  },
}

Named Slots

Events