Tailwind CSS Datepicker Component Vue.js + SSR support

  • By Ken
  • Last update: Nov 11, 2022
  • Comments: 13

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

NPM

Light mode

Example

Dark mode

Example

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

Github

https://github.com/kenhyuwa/vue-tailwind-picker

Comments(13)

  • 1

    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 [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!
    
  • 2

    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

  • 3

    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>
    
  • 4

    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.

  • 5

    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.

  • 6

    Fix format date

    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.

  • 7

    feat: Add "selectedDate" props to display selected date

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

    Close #13.

  • 8

    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

  • 9

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

    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>

  • 11

    Date not formatted [Nuxt JS]

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

              <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>
    
  • 12

    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>
    
  • 13

    Unrelated question!

    Hi!

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

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