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

Overview

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

Comments
  • Tailwindcss 2.0 not supported

    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!
    
    opened by muarachmann 4
  • Cannot select previous dates

    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

    opened by dansku 2
  • Can't select dates in the past

    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>
    
    opened by maxheckel 1
  • Docs: Include dayjs as a requirement

    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.

    opened by Namchee 1
  • ask: dayjs is bundled

    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.

    opened by mazipan 1
  • Fix format date

    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.

    opened by 0s1r1s 0
  • feat: Add

    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.

    opened by jserranojunior 0
  • Add

    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

    opened by jserranojunior 0
  • [Vue warn]: Error in beforeCreate hook:

    [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)))) +
                      ' */';
          }                                                                                                                                                                
    
    opened by illustratordavid 0
  • format-date and format-display is not working

    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>

    opened by riesga 0
  • Date not formatted [Nuxt JS]

    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>
    
    opened by mushonnip 1
  • Doesn't work with dayjs@1.10.0

    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>
    
    opened by iShotFT 1
  • Unrelated question!

    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

    opened by pakaplace 0
Releases(v2.0.0)
Owner
Ken
Learn, still learn, and keep learn.
Ken
A simple datepicker component based Vue 2.x: https://dwqs.github.io/v2-datepicker/

中文 README v2-datepicker A simple datepicker component based Vue 2.x. Installation npm: npm i --save v2-datepicker or yarn yarn add v2-datepicker Ge

Pomy 90 Jul 21, 2022
A VueJs datepicker with a similar look and functionality as the popular AirBnb datepicker.

vue-airbnb-style-datepicker This is a VueJs version of the popular AirBnb datepicker. Supports range selection, disabling of dates, custom configurati

Mikael Edebro 498 Dec 4, 2022
This datepicker is a fully customisable Vue(v2.1.6) version of the material-ui datepicker

vue-material-datepicker This datepicker is a fully customisable Vue(v2.1.6) version of the material-ui datepicker that fit all your projects. See belo

Bastien Granger 54 Dec 13, 2021
vue 3 datepicker. supports disabling, highlighting of dates and programmatic access of date.

Vue 3 Datepicker A datepicker Vue component. Compatible with Vue 3 Only Demo Install Usage Date Formatting Props Events Disabled dates Highlighted dat

shubhadip 38 Dec 15, 2022
Not your ordinary datepicker. A Vuejs draggable date selector with a fresh responsive design, mobile ready and 0 dependencies, 17kb gzipped

DraggableCal A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Available Languages Dev & Build Licence Thanks Demo To view a demo

Tom 86 Dec 1, 2022
vue-css-format is a tool that automatically format your css code, support css、less、scss and vue

##vue-css-format vue-css-format is a tool that automatically format your css code, support css、less、scss and vue usage install npm install vue-css-for

steins 1 Feb 23, 2018
Custom column type for RevoGrid component based on duetds-date-picker library

Custom column type for RevoGrid component based on duetds-date-picker library

Revolist 3 Apr 19, 2022
Vue Nuxt Scroll Datepicker - Fast, powerful and easy to use component datetime picker for Nuxt Vue

Vue Nuxt Scroll Datepicker - Cashbac In this article, we’ll look at how date and time picker and a virtual scroll. Fast, powerful and easy to use comp

mohammad ichlas 2 Apr 25, 2022
[Deprecated] calendar and datepicker component with material design for Vue.js

vue-datepicker calendar and datepicker component with material design for Vue.js Demo The demo page is HERE. Requirements Vue.js ^1.0.0 & ^2.0.0 momen

Awe 706 Nov 21, 2022
A lightweight and easy to use Vue.js datepicker component

A lightweight and easy to use Vue.js datepicker component (created for Vue 2.x)

Matt Areddia 0 Feb 5, 2019
A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations

Datepicker A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Date Formatting Props Events Disabled dates Highlighted dates Transl

Charlie Kassel 2.6k Jan 3, 2023
A vue component that provides datepicker for persian developers

vue persian datepicker This is a Jalali date picker component for Vue. این برنامه یک کامپوننت انتخاب تاریخ جلالی می باشد. Demo You can see a demo and

Dyon Software Development Group 100 Oct 1, 2022
datepicker component for Vue 2.x

vue-date-picker datepicker component for Vue 2.x Screenshot Instllation $ npm install vue-date-picker --save Usage <template> <div class="demo">

8788 101 Nov 21, 2022
awesome, zero dependency, performant Vue datepicker component

awesome, zero dependency, performant Vue datepicker component

mohammad S. 36 Oct 31, 2022
Vue Datepicker Component

Datepicker Component For Vue

Hatice Edis 405 Jan 5, 2023
Datepicker component for Vue 3

The most complete date picker solution for Vue 3

null 158 Dec 27, 2022
Simple datepicker component for Vue 3

Simple datepicker component for Vue 3

Ilya Borovitinov 111 Dec 17, 2022
Vue draggable datepicker component

DraggableCal A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Available Languages Dev & Build Licence Thanks Demo To view a demo

null 3 Feb 5, 2022
A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations

Datepicker 2 A datepicker Vue component. Compatible with Vue 2.x Demo Install Upgrade to 2.x+ Usage Date Formatting Props Events Disabled dates Highli

hokify 15 Jul 28, 2022