Check out a new date picker: easepick

Date range picker using Shadow DOM. Lightweight size, no dependencies.

Link Search Menu Expand Document

Examples

Table of contents

  1. Show nights in tooltip
  2. Allowed days instead of lock days
  3. Show previous month instead of current month
  4. Add Litepicker to NuxtJS project

Show nights in tooltip

new Litepicker({
  element: document.getElementById('datepicker'),
  singleMode: false,
  tooltipText: {
    one: 'night',
    other: 'nights'
  },
  tooltipNumber: (totalDays) => {
    return totalDays - 1;
  }
})

Allowed days instead of lock days

const allowedDates = [
  '2021-02-01', '2021-02-05', '2021-02-08', 
  '2021-02-12', '2021-02-15', '2021-02-19',
];
new Litepicker({
  element: document.getElementById('datepicker'),
  singleMode: false,
  lockDaysFilter: (date1, date2, pickedDates) => {
    return !allowedDates.includes(date1.format('YYYY-MM-DD'));
  }
})

Show previous month instead of current month

new Litepicker({
  element: document.getElementById('datepicker'),
  startDate: new Date(),
  setup: (picker) => {

    picker.on('show', () => {
      let date = picker.getDate();
      if (date) {
        date.setMonth(date.getMonth() - 1);
        picker.gotoDate(date);
      }
    });

  }
})

Add Litepicker to NuxtJS project

  • Download Litepicker from CDN: https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js
  • Place in plugins folder of your NuxtJS project.
  • Update nuxt.config.js
    // nuxt.config.js
    plugins: [
      { src: '~/plugins/litepicker.js', mode: 'client' }
    ],
    
  • Initialize Litepicker
    // index.vue
    export default {
      mounted: function () {
        new Litepicker({
          element: document.getElementById("datepicker"),
        });
      },
    };