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

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.

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)

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?

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.

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.

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

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(),
            ]
          },
        },
// ...

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.

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 :

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.

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.

<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.

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!

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.

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

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:

While here an example with start-week=1:

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):

And this when clicking (uses entire screen):

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

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

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

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?

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!