Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js.

  • By Ken
  • Last update: Jan 4, 2023
  • Comments: 16

Litepie Datepicker

Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js.


Documentation

For full documentation, visit litepie.com.

Simple Usage

How it works,

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

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

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
    };
  }
};
</script>

Theming options

  • Light mode

    Light mode

  • Dark mode

    Dark mode

Changelog

All notable changes to this project will be documented in this file, Read.

License

The MIT License. Please see for more information.

Thanks to

Github

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

Comments(16)

  • 1

    Tailwind 3 support

    Hi,

    Thanks for the great package,

    It there a plan to support Tailwind 3 as i get this error while installing:

    npm ERR! While resolving: [email protected]
    npm ERR! Found: [email protected]
    npm ERR! node_modules/tailwindcss
    npm ERR!   dev [email protected]"^3.0.0" from the root project
    npm ERR! 
    npm ERR! Could not resolve dependency:
    npm ERR! peer [email protected]"^2.0.3" from [email protected]
    npm ERR! node_modules/litepie-datepicker
    npm ERR!   [email protected]"*" from the root project
    
    

    Thanks.

  • 2

    Support Vue v2.x / Nuxt v2.x

    I tried to install litepie-datepicker in my Nuxt 2.x project which has Vue v2.x under the hood and having some issues. Even though I was able to add litepie-datepicker as a plugin - it's throwing errors such as:

    litepie-datepicker.esm.js?8527:119 Uncaught TypeError: Object(...) is not a function
        at eval (litepie-datepicker.esm.js?8527:119)
        at Module../node_modules/litepie-datepicker/dist/litepie-datepicker.esm.js (app.js:2133)
        at __webpack_require__ (runtime.js:854)
        at fn (runtime.js:151)
        at eval (litepie-datepicker.js?3366:1)
        at Module../plugins/litepie-datepicker.js (app.js:994)
        at __webpack_require__ (runtime.js:854)
        at fn (runtime.js:151)
        at eval (index.js:70)
        at Module../.nuxt/index.js (app.js:322)
    
    ./node_modules/litepie-datepicker/dist/litepie-datepicker.esm.js 217:86-94"export 'Fragment' was not found in 'vue'
    

    This is my Nuxt.js plugin file:

    import Vue from "vue"
    import LitepieDatepicker from "litepie-datepicker"
    
    Vue.use(LitepieDatepicker)
    
  • 3

    tailwind is `base` utility is creating conflicts in existing project.

    As litepie-datepicker is rely on tailwind, after successful integration of tailwind, it's conflicting with existing CSS that causes lots of design issues.

    How can I integrate litepie without affecting existing design?

  • 4

    Trigger don't work in tailwind modal

    Hi, i have a strange situation. Datepicker works ok in a custom page, but when i try to show in a modal, trigger doesn't work and datepicker doesn't show.

    Captura de pantalla 2021-06-03 a las 10 54 34

    As you can see, display:none is the status of the class, even when i focused or used custom trigger.

    I tried without a modal and it's work ok...

    Thanks in advance.

  • 5

    AutoApply on customShortcuts

    On mobile, when using customShortcuts, it's impossible to apply changes when autoApply is set to false.

    image

    It could be great to set dates directly and submitting it.

    Here is the code of my shortcuts, maybe I missed something :

    
          return [
            {
              label: '7 derniers jours',
              atClick: () => {
                const date = new Date()
                return [
                  new Date(date.setDate(date.getDate() - 7)),
                  new Date(),
                ]
              },
            },
    // ...
    
  • 6

    Datepicker alignment

    Hi,

    Thank you for your work !

    As you can see below, the right calendar isn't available, because it's the end of my screen. image

    It would be great to be able to define if the div under the label has to be on the left or on right side. Maybe something like this : image

    To do so, I simply added a right-0 here <div class="absolute z-50 inset-x-auto top-full sm:mt-2.5 right-0" and set the right-3 in the .litepie-datepicker::before class instead of the left-3.

  • 7

    I have some questions about Tailwind css.

    1.Do I need to download all the Tailwind CSS to display this plugin UI properly?

    2.Don't you provide a small version of CSS to express the calendar UI?

    It is burdensome to use in projects that do not use Tailwind CSS.

    Plug-in is so good and I want to use it. Thank you for providing this plug-in.

  • 8

    How can i call my function ?

    <litepie-datepicker as-single :formatter="formatter" v-model="values[key]" :placeholder="values[key] != '' && !values[na_key] ? values[key] : 'MM-DD-YYYY' " class="zI-1" readonly="readonly" @change="uncheckNa()" :key="!values[na_key] ? 1 : 0"

    Here, If I change date in Datepicker, need to call my js func. I use onChange, but it's not working.

  • 9

    Disabling current date

    Hello, and awesome library!

    I believe there is a bug with disabling current date. If you use :disable-dateprop to try and disable today, it doesn't work, the date can still be picked.

    Example: I set :disable-date to disable 22.06.2021 (today), user can still select date.

    Looking forward to a response!

  • 10

    Shortcuts for single?

    We can't we have shortcuts working together with as-single? I'd like to use a button, for example "7 days ahead" which selects 7 days from now, on single.

  • 11

    Added dayjs customParseFormat plugin in order to correctly parse formatter dates

    The CustomParseFormat plugin is required to support custom formats passed by the formatter prop.

    Without this plugin the date format DD-MM-YYYY gets parsed as MM-DD-YYYY.

    Example: when selecting March 8th and re-opening the datepicker, the selected date will be August 3rd.

    Resolves #4

  • 12

    Possibility of change startWeek

    These changes allows you to choose the first day of the week using the parameter start-week. The parameter accepts values from 0 to 6 Here an example with start-week=0:

    Screenshot 2022-12-29 alle 16 01 48

    While here an example with start-week=1:

    Screenshot 2022-12-29 alle 16 02 30
  • 13

    Date picker runs vertically down the screen

    I am working with nuxt3 and I added the date picker as plugin like so:

    import LitepieDatepicker from 'litepie-datepicker-tw3';
    
    export default defineNuxtPlugin((nuxtApp) => {
        nuxtApp.vueApp.use(LitepieDatepicker)
    })
    

    My datepicker.vue component looks like this:|

    <template>
      <div>
        <litepie-datepicker
          i18n="nl"
          placeholder="Laatste 28 dagen"
          :disable-date="dDate"
          :formatter="formatter"
          separator=" t/m "
          :modelValue="props.modelValue"
          @update:modelValue="emit('update:modelValue', $event)"
        />
      </div>
    </template>
    
    <script setup>
    import { ref } from 'vue';
    
    const emit = defineEmits(['update:modelValue'])
    
    const props = defineProps({
      modelValue: Object,
    })
    
    const formatter = ref({
      date: 'DD MMM YYYY',
      month: 'MMM'
    });
    
    const dDate = (date) => {
      return date > new Date();
    }
    

    However, after importing the component I get the following result on a local build (npm run dev):

    image

    And this when clicking (uses entire screen):

    image

    I have tailwind version 3.2.1 and I added path.resolve(__dirname, './node_modules/litepie-datepicker/**/*.js') to my tailwind.config.js content.

  • 14

    [need help] npm is too late than github, i try use postinstall resolve it but meet some problem

    i forked this repository, and modify packages.json by add postinstall: npm i && npm run build:es, but it loading...

    image

    you can try pnpm add https://github.com/Valar103769/litepie-datepicker.git

  • 15

    Is it possible to show label instead of date range when clicked on label?

    I would like to show 'Last 15 days', when a user clicked on that shortcut instead of the date range. When a custom date range is chosen, I would like to show the date range. Is this possible?

  • 16

    Datepicker obscured when display in table whitespace-nowrap and scroll X .

    image image I have the problem as shown in the first picture. is there any way to make the datepicker display like 2nd picture. is there any solution for that ? Thank you!