Date Range Picker Component With Tailwind – Litepie

Litepie is a date and date range picker Vue.js component build with Tailwind CSS and day.js.

How to use it:

1. Import the Litepie Datepicker component.

import { ref } from 'vue';
import LitepieDatepicker from 'litepie-datepicker';

2. Register the component.

export default {
  components: {
    LitepieDatepicker
  },
  // ...
};

3. Add the component to the app.

<template>
  <div>
    <litepie-datepicker
      ref="myRef"
      v-model="dateValue"
    />
  </div>
</template>

export default {
  components: {
    LitepieDatepicker
  },
  setup() {
    const myRef = ref(null);
    const dateValue = ref([]);
    return {
      myRef,
      dateValue
    };
  }
};

4. Customize the date format.

<template>
  <div>
    <litepie-datepicker
      ref="myRef"
      :formatter="formatter"
      v-model="dateValue"
    />
  </div>
</template>

export default {
  components: {
    LitepieDatepicker
  },
  setup() {
    const myRef = ref(null);
    const dateValue = ref([]);
    const formatter = ref({
      date: 'DD MMM YYYY',
      month: 'MMM'
    });
    return {
      myRef,
      dateValue,
      formatter
    };
  }
};

5. Available component props.

overlay: Boolean,
asSingle: Boolean,
useRange: Boolean,
placeholder: {
  type: [Boolean, String],
  default: false
},
i18n: {
  type: String,
  default: 'en'
},
disableDate: {
  type: [Boolean, Array, Function],
  default: false
},
disableInRange: {
  type: Boolean,
  default: true
},
trigger: {
  type: String,
  default: null
},
autoApply: {
  type: Boolean,
  default: true
},
shortcuts: {
  type: [Boolean, Function],
  default: true
},
separator: {
  type: String,
  default: ' ~ '
},
formatter: {
  type: Object,
  default: () => ({
    date: 'YYYY-MM-DD HH:mm:ss',
    month: 'MMM'
  })
},
modelValue: {
  type: [Array, Object, String],
  default: []
},
startFrom: {
  type: [Object, String],
  default: () => new Date()
},
options: {
  type: Object,
  default: () => ({
    shortcuts: {
      today: 'Today',
      yesterday: 'Yesterday',
      past: period => `Last ${period} Days`,
      currentMonth: 'This Month',
      pastMonth: 'Last Month'
    },
    footer: {
      apply: 'Apply',
      cancel: 'Cancel'
    }
  })
}

Preview:

Changelog:

v1.0.15 (06/13/2022)

• Tailwind 3 support

v1.0.14 (03/31/2021)

• Fixed issues on keyup

v1.0.13 (03/25/2021)

• Fix issues dynamic import on Vite

v1.0.12 (03/21/2021)

• Fix issues localization lazy load.

v1.0.11 (03/20/2021)

• Trigger emit on keyup event.

v1.0.10 (03/20/2021)

• Fix bug start-from if using localization

v1.0.9 (03/20/2021)

• Props footer removed.
• Fix localization
• Fix bug auto-apply if shortcuts clicked.
• Add new props options

v1.0.8 (03/20/2021)

• Add localization for shortcuts, footer & dayjs locale.
• New props i18n
• Change local model value to pickerValue.
• Fix issues placement arrow, left to right.

v1.0.7 (03/17/2021)

• Bugs fixed

v1.0.6 (03/17/2021)

• New props footer
• Redesign layout, for breakpoint 768 ~ 1024
• Hide Next/Prev button if months active

v1.0.5 (03/16/2021)

• Added dayjs customParseFormat plugin, to correctly parse from formatter props
• Added keyboard event keyup for update value

v1.0.4 (03/13/2021)

• Fix bug when use custom shortcuts

v1.0.3 (03/10/2021)

• Fixed typo inRangeBetween

v1.0.2 (03/09/2021)

• Expose placeholder, clear function into slot props

Download Details:

Author: kenhyuwa

Live Demo: https://litepie.com/

Download Link: https://github.com/kenhyuwa/litepie-datepicker/archive/main.zip

Official Website: https://github.com/kenhyuwa/litepie-datepicker

Install & Download:

# NPM
$ npm i litepie-datepicker