I get the following error while trying to install

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: [email protected]
npm ERR! node_modules/tailwindcss
npm ERR!   dev [email protected]"^2.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! [email protected]"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/tailwindcss
npm ERR!   peer [email protected]"^1.4.6" from [email protected]
npm ERR!   node_modules/vue-tailwind-picker
npm ERR!     [email protected]"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

I know there is a closed issue on this, but I cannot still get it to work,

For what I can see, I also can't select any date before the current one. It says it's fixed, I just can't find a way get it working. Any examples on this? Thank you

Is there something I'm missing from the config? I have :init="false" but my picker only lets me select today or any day after.

 <VueTailWindPicker
                    style="position: absolute" :z-index="999"
                    :init="false"
                    @change="(v) => newTask.start_date = v">
                    <input v-model="newTask.start_date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-dark-slate-gray-200 focus:ring focus:ring-dark-slate-gray-200 focus:ring-opacity-50"
                           placeholder="Example initial value">
                </VueTailWindPicker>

Based on #4 , dayjs is now a peerDependency. Due to this, users must install dayjs themselves.

However, the documentation fails to address this requirement and states that only TailwindCSS is required.

You can see https://bundlephobia.com/[email protected], the dayjs is become part of your library. This means people might have different dayjs version in their project. For this case, dayjs should become peerDependencies, not dependencies. We let users install their own dayjs.

But this is just my opinion, you might have your own reasons for this decision.

Problem

Because of the default value of the startDate prop it's not possible to use the formatDate prop without overriding the startDate every time.

startDate: {
      type: String,
      required: false,
      default: dayjs().format('YYYY-MM-DD'), // hardcoded format does not respect the formatDate prop
    },

Solution

I removed the default value which is using a hardcoded format and added a today fallback for the initialization of the startDatepicker variable instead.

If "startDate" is earlier than "selectedDate", it enables the option to navigate between these dates without disabling.

Close #13.

Feature

Add "selectedDate" props to display selected date If "startDate" is earlier than "selectedDate", it enables the option to navigate between these dates without disabling.

Example of use:

<VueTailwindPicker :start-date="startDate" :selected-date="selectedDate" @change="(v) => selectedDate = v"

data(){ return:{ startDate: "2020-01-01", selectedDate: "2020-05-01", } }

I'm working on it to make a commit

Thanks for everything <3

I am seeing this error on page load when used in Nuxt

ERROR [Vue warn]: Error in beforeCreate hook: "ReferenceError: btoa is not defined"

node_modules\vue-tailwind-picker\dist\vue-tailwind-picker.umd.js

      if (css.map) {
          // https://developer.chrome.com/devtools/docs/javascript-debugging
          // this makes source maps inside style tags work properly in Chrome
          code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
          // http://stackoverflow.com/a/26603875
          code +=
              '\n/*# sourceMappingURL=data:application/json;base64,' +
                  btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
                  ' */';
      }                                                                                                                                                                

Hi,

When the format is set DD-MM-YYYY or DD/MM/YYYY the component does not work.

<VueTailwindPicker :formatDate="'DD-MM-YYYY'" :formatDisplay="'DD-MM-YYYY'" @change="(v) => value = v"> <input v-model="value" placeholder="Example initial value"> </VueTailwindPicker>

format-date and format-display is not working the result like this

          <VueTailWindPicker
            :init="true"
            :format-date="DD-MMMM-YYYY"
            @change="(v) => {
              searchString = v
              performFiltering()
            }"
          >
            <input
              v-model="searchString"
              list="faqList"
              class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
              placeholder="Cari berdasarkan tanggal"
              @keyup.enter="performFiltering"
            >
          </VueTailWindPicker>

While using this package I've noticed that when you use version 1.10.0 (currently latest release) of dayjs this package stops working. I've not put much thought into this and reverted back to using 1.9.7 after which my application started functioning again.

Command used to downgrade: npm install [email protected] --save

app.js:

import VueTailwindPicker from 'vue-tailwind-picker'
import 'dayjs/locale/nl-be';

EventCreate.vue:

<VueTailwindPicker :formatDate="'DD-MM-YYYY'"
                   :formatDisplay="'DD-MM-YYYY'"
                   :selectedDate="form.day"
                   :start-from-monday="true"
                   :startDate="$date().format('DD-MM-YYYY')"
                   class="z-50"
                   @change="(v) => form.day = v">
    <jet-input id="day" v-model="form.day" class="mt-1 block w-full"
               type="text"/>
</VueTailwindPicker>

Hi!

I saw you had a bottom nav bar component on tailwind components, and I really liked the SVG's you used.

Could you share where you got them from? Thanks so much, Parkerr