kenhyuwa / vue-tailwind-picker

:tada: Datepicker component for vue.js build with Tailwind CSS & dayjs date library

⚠️ This repository is unmaintainable.

please move to Litepie Datepicker for Vue 3 & Tailwind CSS 2

Tailwind CSS Datepicker Component Vue.js + SSR support

Datepicker component for vue.js built with Tailwind CSS, and the day.js date library.

Vue Tailwind Picker supports SSR.

Light mode

Dark mode

Documentation

For more information about vue-tailwind-picker, view the docs(progress for updated). Read the CHANGELOG.

Free Tailwind CSS Design Component

This was created using the free component from Tailwind CSS. Tailwind CSS Design

License

The MIT License (MIT). Please see for more information.

Changelog

Please see for more information what has changed recently.

Donate & Support

If you would like to support the development of this package, you can donate here. 😊 Thank you...

Made with love by Ken

vue-tailwind-picker's Issues

No option for previous year?

In live demo I did not find option for previous year, for example, to input Date of Birth.

Unrelated question!

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

ask: dayjs is bundled

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.

dayjs should be a dependency

Currently dayjs is a devDependency, it should be moved to dependency in the package.json file.

z-index issue

Is there any option to set the z-index or "append to body" for this date picker? I can't find anything in the document,

Or anyone able to help me how to fix this issue?

@kenhyuwa

disableDate how to use this case?

I need to unlock past dates and month, how I can do this?

Faulty date format

If I specify date format like YYYY.MM.DD, the datepicker works as expected, but if I switch placeholders and use format DD.MM.YYYY, component crashes with throwing next message in console: RangeError: Invalid array length.

After an additional investigation I discovered that the same message pops up if format starts with anything but year.

Vue 3 support

This project looks really nice! Now that Vue 3 is in RC already, it would be nice to have support for it 👍

Can't select dates in the past

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>

docs: live demo

Add website for live demo.
You can use Netlify or Github Pages for hosting the demo web

Cannot select previous dates

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

Time Picker?

First excellent work to this amazing component, It will be a +1 to have a time picker as well. At least disabled by default lets say

Not rendering properly in Nuxt production

I have a Nuxt app with vue-tailwind-picker, it's working fine in development mode, the date picker not rendering properly when I upload it to production. I have attached some screenshots to show my issue. Can anyone help me to solve the issue? I am pretty new to Vue and Nuxt community.

My nuxt.config.js

export default {
  // Disable server side rendering (https://go.nuxtjs.dev/rendering-modes#client-side-rendering-only)
  ssr: false,
  // Target (https://go.nuxtjs.dev/config-target)
  target: 'static',
  ...
  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
    // { src: '~/plugins/v-tailwind-picker', mode: "client" }
    '~/plugins/v-tailwind-picker',
  ],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
  ],

  // Tailwind CSS options
  tailwindcss: {
    cssPath: '~/assets/css/tailwind.css',
  },

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    // '@nuxtjs/pwa',
    // Webfont module
    'nuxt-webfontloader',
  ],

  // Loading Nunio
  webfontloader: {
    google: {
      families: ['Nunito:400,600,700,800'] //Loads Nunito with weights 400,600,700,800
    }
  },


  // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {},

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
  }
}

My v.tailwind.picker.js plugin file:

import Vue from 'vue'
import VueTailwindPicker from 'vue-tailwind-picker'

Vue.use(VueTailwindPicker)

Also the rendered component

<VueTailWindPicker
    :init="false"
    :theme="{
    background: '#1A202C',
    text: 'text-white',
    border: 'border-gray-700',
    currentColor: 'text-gray-200',
    navigation: {
    background: 'bg-gray-800',
    hover: 'hover:bg-gray-700',
    focus: 'bg-gray-700',
    },
    picker: {
    rounded: 'rounded-md',
    selected: {
    background: 'bg-teal-400',
    border: 'border-teal-400',
    hover: 'hover:border-teal-400',
    },
    holiday: 'text-red-400',
    weekend: 'text-green-400',
    event: 'bg-blue-500',
    },
    event: {
    border: 'border-gray-700',
    },
    }"
    @change="(v) => value = v">
    <input v-model="value" placeholder="Select Date" class="form-textbox">
 </VueTailWindPicker>

Add "selectedDate" props to display selected date

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

Date not formatted [Nuxt JS]

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>

Range mode ?

Hey,

Would be great if you could add a date range picker mode and a clear date button (also, a nullable start-date)

Cannot select previous years

Year can only be selected from the current year on-wards. Cannot select previous years!

Doesn't work with [email protected]

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>

how to choose another date for weekend and holiday?

For example
I want to use sat and sun as weekend
and week start from monday

is it real?

Tailwindcss 2.0 not supported

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 tailwindcss@"^2.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! vue-tailwind-picker@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/tailwindcss
npm ERR!   peer tailwindcss@"^1.4.6" from [email protected]
npm ERR!   node_modules/vue-tailwind-picker
npm ERR!     vue-tailwind-picker@"*" 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!

Docs: Include dayjs as a requirement

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.

docs: add prop description

Add usage description of each props

format-date and format-display is not working

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>

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

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)))) +
                  ' */';
      }                                                                                                                                                                

When startFromMonday is set to true dates are completely wrong

When I set :start-from-monday=true the calendar days get messed up.

Initial value setting

Hi, I want to know the way to set default date to empty value.

The default value always is the local day

Thank you