elreco / vue-tailwind-datepicker

A Vue 3 Datepicker using Tailwind CSS

Vue Tailwind Datepicker

A Datepicker component for Vue 3 using Tailwind and dayjs.

Documentation

Go to full documentation

Installation

⚠️ Vue Tailwind Datepicker uses Tailwind CSS (with the @tailwindcss/forms plugin) & Day.js under the hood, you must install those packages before. You can follow this tutorial.

Install via npm

npm install vue-tailwind-datepicker

Install via yarn

yarn add vue-tailwind-datepicker

Simple Usage

How it works,

<script setup>
import { ref } from "vue";
import VueTailwindDatepicker from "vue-tailwind-datepicker";

const dateValue = ref([]);
const formatter = ref({
  date: "DD MMM YYYY",
  month: "MMM",
});
</script>

<template>
  <div>
    <vue-tailwind-datepicker :formatter="formatter" v-model="dateValue" />
  </div>
</template>

Theming options

Light Mode

Dark Mode

Changelog

All notable changes to this project will be documented in the Releases Page.

Sponsor

• tailwindai.dev

License

The MIT License. Please see for more information.

Thanks to

• kenhyuwa
• Vue
• Tailwind CSS
• day.js
• and other support...

vue-tailwind-datepicker's Issues

Ability to control the size of the modal

The modal size is just too big next to the other fields, and would be amazing if there is a way to control its width and height.

Display date picker inline

Hello,

I need to display the date picker inline in a popup without input field.

Is there anyway I can do that?

Time input

Is it possible to have a date and time picker?

Localization doesn't works?

Hi!
Thank you so much for this awesome component. Love it!

All is working fine except localization prop. Very strange after follow docs:

<script setup>
import { ref } from 'vue'
import VueTailwindDatepicker from 'vue-tailwind-datepicker'

const dateValue = ref('')
</script>

<template>
  <VueTailwindDatepicker
     v-model="dateValue"
     as-single
     i18n="es"
     placeholder="__/__/____"
     :formatter="{
       date: 'DD/MM/YYYY',
       month: 'MMMM',
     }"    
  />
</template>

Tried some other locales but the component still displayed in english.

Thank you for your time!

auto-apply as-single no-input fails always

Consider this

<template>
  <div>
    <vue-tailwind-datepicker v-model="dateValue" i18n="nl" no-input as-single  />
    {{ dateValue }}
  </div>
  >
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import VueTailwindDatepicker from 'vue-tailwind-datepicker'

  const dateValue = ref({
    startDate: '',
    endDate: ''
  })
</script>

This fails with:

runtime-core.esm-bundler.js:218 Uncaught TypeError: k is not a function
    at R (entry.6e4f86f4.mjs:1749:9)
    at e.noInput.P.value.createVNode.onUpdate:date.h2.<computed>.h2.<computed> (entry.6e4f86f4.mjs:2129:64)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)
    at emit$1 (runtime-core.esm-bundler.js:711:9)
    at runtime-core.esm-bundler.js:7371:53
    at onClick (entry.6e4f86f4.mjs:193:31)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:354:13)

runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of component event handler 
  at <Calendar calendar= {month: 'jan', year: 2023, date: ƒ, years: ƒ, onPrevious: ƒ, …} weeks= (7) ['ma.', 'di.', 'wo.', 'do.', 'vr.', 'za.', 'zo.'] as-range=false  ... > 
  at <VueTailwindDatePicker modelValue= {startDate: '2023-01-10 11:25:19'} onUpdate:modelValue=fn i18n="nl"  ... > 
  at <DatePickerTests onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > > 
  at <RouterView> 
  at <TestLayout> 
  at <App>
warn2 @ runtime-core.esm-bundler.js:38
logError @ runtime-core.esm-bundler.js:212
handleError @ runtime-core.esm-bundler.js:204
callWithErrorHandling @ runtime-core.esm-bundler.js:158
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:164
emit$1 @ runtime-core.esm-bundler.js:711
(anonymous) @ runtime-core.esm-bundler.js:7371
onClick @ entry.6e4f86f4.mjs:193
callWithErrorHandling @ runtime-core.esm-bundler.js:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:164
invoker @ runtime-dom.esm-bundler.js:354
runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of native event handler 
  at <TransitionGroup enter-from-class="opacity-0" enter-to-class="opacity-100" enter-active-class="transition-opacity ease-out duration-300"  ... > 
  at <Calendar calendar= {month: 'jan', year: 2023, date: ƒ, years: ƒ, onPrevious: ƒ, …} weeks= (7) ['ma.', 'di.', 'wo.', 'do.', 'vr.', 'za.', 'zo.'] as-range=false  ... > 
  at <VueTailwindDatePicker modelValue= {startDate: '2023-01-10 11:25:19'} onUpdate:modelValue=fn i18n="nl"  ... > 
  at <DatePickerTests onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > > 
  at <RouterView> 
  at <TestLayout> 
  at <App>

This works:

<template>
  <div>
    <vue-tailwind-datepicker v-model="dateValue" i18n="nl" no-input as-single :auto-apply="false" />
    {{ dateValue }}
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import VueTailwindDatepicker from 'vue-tailwind-datepicker'

  const dateValue = ref('')
</script>

Css problem

why is my css like this, how can i fix it ?

Start/End date string not assignable to modelValue type

Describe the bug
dataValue returns a String TypeError when using it as an object

To Reproduce
Steps to reproduce the behavior:

1. Install latest package with npm
2. Create script tag with Typescript set as the language
3. Import ref from Vue and VueTailwindDatepicker
4. Create const dataValue and add to v-model
5. See error

Expected behavior
No error indicating that startDate & endDate having strings is accepted.

Screenshots

want to use shortcuts within asSingle mode

Using the asSingle props will disable the shortcuts and the rightmost date column, even I use shortcuts="true".
hope shortcuts will appear with asSingle or at least it can be controlled by shortcuts props alone

Monday as first day of the week

In Denmark, Monday is shown as the first day of the week.

I cannot find an option for setting whether it should be sunday or monday in the package at this time.

Initializing dateValue Array gives type errors

Compliments on the nice UI and clean / Tailwind design.

It's I suppose a bit work in progress. Right now we get type errors from:

  const dateValue = ref([])
  const dateValue = ref([new Date(), new Date()])

What works:

const dateValue = ref({
    startDate: new Date(),
    endDate: new Date()
  })
// or:
const dateValue = ref({
    startDate: '',
    endDate: ''
  })

Using custom prefixed tailwind css classes

When using this component inside an existing website or application it is sometimes useful to add a css prefix for every tailwind class.
Tailwind itself also provides this feature, so would be nice to have it included in this component as well.

To use the component like the following:
<VueTailwindDatePicker as-single :use-range="false" i18n="en" :formatter="formatter tailwind-prefix="tw-" />"

Link to the Tailwind prefix configuration option:
https://tailwindcss.com/docs/configuration#prefix

Export `DatepickerProps` interface

Is your feature request related to a problem? Please describe.
When building wrapper components around vue-tailwind-datepicker it's helpful to define custom interfaces or props that match the props of the underlying datepicker without having to re-declare the types that are being used. Exporting the DatepickerProps interface would allow our props to align with what the library is using internally.

Describe the solution you'd like
Export the DatepickerProps interface from src/types.d.ts.

Is the v-model really reactive?

I want to reset the dates to the default value.

I do this in my code, but the old date remains in the interface, while the new value is in the model itself. I reproduced it here.

Calendar icon customization

It appears that currently there is no way to customize/change the "calendar" icon that is used on the component.

Describe the solution you'd like
It would be great if there was a way to customize/change the "calendar" icon or otherwise somehow extend the theme to allow for this icon to be changed to a custom component or SVG/asset.

Describe alternatives you've considered
N/A

Additional context

Property "close" was accessed during render but is not defined on instance

After your update for inline date picker, I see warn in console - Property "close" was accessed during render but is not defined on instance

I fixed it, but I can't push my branch and make PR

How do we position the DatePicker on top of the input rather than bottom?

Currently using this as part of a library, but there's no option to adjust the placement position of the overlay.

Typescript support

Is your feature request related to a problem? Please describe.
Hey 👋
I love your date-picker, and I appreciate your work.
I have Vue3 app with typescript and I've noticed that your date-picker doesn't provide typescript support.
Do you consider adding it in the future?

Describe the solution you'd like
to have this error gone

Additional context
I am not an experienced developer yet, but if you consider working with a junior I can try to help

Component in nuxt 3 does not work properly

Describe the bug
The component does not appear as it should, there is no style and when you click on it the modal is bugged

To Reproduce
Steps to reproduce the behavior:

1. Install vue tailwind datepicker, dayjs, tailwindcss and forms plugin for tailwind
2. Add forms plugin in tailwind.config.js :

...
plugins: [require('@tailwindcss/forms')],

4. Add vue tailwind datepicker as plugin in the /public directory :

import VueTailwindDatepicker from 'vue-tailwind-datepicker';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(VueTailwindDatepicker)
})

5. create a page with a demo code inside :

<script setup>
import { ref } from 'vue'
const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker input-classes="block mb-2 text-sm font-medium text-green-700 dark:text-green-500" v-model="dateValue" />
</template>

6. See error : go to screenshot

Expected behavior
Should work like here

Screenshots
input :

When click :

Desktop & mobile (please complete the following information):

• Browser : Chrome
• Browser version 112.0.5615.49

Could not find a declaration file for module 'vue-tailwind-datepicker'.

v1.1.1 has affected how the package is imported under a ts script tag. Types are no longer available to import.

After reinstalling all packages

package updated to the latest version

I've already attempted to reinstall the package, delete the node_modules folder and ran npm ci but nothing's changed.

Input triggers 1Password Chrome extension

I haven't identified exactly why it's doing this, but clicking into the input triggers the 1Password Chrome extension.

No focus style for as-single

Hi,
In as-single mode, there is no highlight style for the day buttons when they have focus (making it hard to navigate with tabs).

As a work around, I've add these classes to the root for now:
[&_.vtd-datepicker-date:focus]:border [&_.vtd-datepicker-date:focus]:ring [&_.vtd-datepicker-date:focus]:border-vtd-primary-500 [&_.vtd-datepicker-date:focus]:ring-vtd-primary-100 [&_.vtd-datepicker-date:focus]:bg-vtd-primary-100 [&_.vtd-datepicker-date:focus]:text-black

Thanks

How to get that date after we select date range

Hello
I am using this plugin in one of my vue js projects it working fine with all properly etc all
I have checked all the event But simply i want to get the selected dates
So can you please help me how can I do that
I want to submit the from and date to the backside.

Dark mode doesn't work in nuxt3

1. tailwind.config.ts :

module.exports = {
darkMode: 'class',
// ...
}

2. gobal class:

html.dark {
color-scheme: dark;
}

Displaying calendar weeks

Is your feature request related to a problem? Please describe.
In some scenarios planning is easier in calendar weeks instead of dates.
Therefore displaying calendar weeks would be a nice feature.

Describe the solution you'd like
Optional displaying the current week number in front of each week (row).
Enabling / Disabling this feature via props.

Additional context
Screenshot IOS Calendar

Emit changes month/year/date

Add emits for change month/year/date. When click on next button or select from opened months or years list, also when select date.

Uncaught ReferenceError: process is not defined

This is quite terrible. The package uses a @babel that tries to access process.env That will break on some browsers that need transpile, without warning. Disaster))

But that is not longer allowed. You should use import.meta.env

Ok, lost half a day debugging software and moving on to new date picker. A shame as the UI was flawless and the best I have seen so far...

console.log `['startDate', 'endDate']`

I'm getting a ton of console.logs for of ['startDate', 'endDate']

Disabled dates are still selectable

Describe the bug
Disabling dates doesn't seem to work.

To Reproduce
You can reproduce it using the example in the docs as well https://vue-tailwind-datepicker.com/props.html#disable-date

Expected behavior
The dates before today (and after 2022) should not be selectable.

NaN and invalid date with some localizations + format

After reopening datepicker it does not work correctly with some localizations (mn, ru, uk) + format

<vue-tailwind-datepicker
    :formatter="{
      date: 'DD MMMM YYYY',
      month: 'MMMM',
    }"
    i18n="mn"
    :shortcuts="false"
    :auto-apply="true"
    v-model="dateValue"
/>

mn:

ru:

uk:

show disabled dates also in days of next month

Hi,

about :disable-date

now busy dates are not displayed on the days of the next/prev month, this misleads users and requires them to switch the next/prev month to understand what is busy or free.

Webpack creates node_module files in public path and try to load the files without base url

Webpack creates node_module files in public path and try to load the files without base url

let mix = require('laravel-mix');

mix.js('src/js/app.js', '/')
    .copy('src/index.html', 'build/')
    .copy('src/images', 'build/images')
    .copy('src/.htaccess', 'build/')
    .sass('src/scss/app.scss', '/')
    .options({
        processCssUrls: false,
        postCss: [
            require('tailwindcss')
        ],
    })
    .setPublicPath('build')
    .vue()
    .browserSync(
        {
            host: process.env.APP_URL,
            proxy: '',
            reload: true,
            port: 80,
            historyApiFallback: true,
            server: {
                baseDir: 'build',
                index: "index.html"
            },
            files: ['build/*.js', 'build/*.css', 'build/*.html']
        }
    );

Lazy load locale files

First of all thanks for the lovely datepicker. I see that all the locale files are downloaded when the datepicker is loaded.

Is it possible to lazy load the files so only the locale that is needed is downloaded?
Or is it possible to group the locales in one file?

Many bugs with custom properties

Type bugs:

const customShortcuts = () => {
    return [
      {
        label: 'Last Years',
        atClick: (): string => {
          const date = new Date()
          return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()]
        }
      }
    ] as unknown as undefined // >>>>>>> should not be needed !!
  }

automaticaly change month then click day of next/prev month

Hi,

need automaticaly change month then click day of next month,

now it is hover:cursor: no-pointer - it is bad

because the users gets the feeling that the date of the next month cannot be selected, that it is busy. Not all users are wise to click the next/prev month forward arrow. This is especially important for mobile users.

Width of the calendar is not responsive

Calendar content takes half of the calendar wrapper on MD screens.

Steps to reproduce:

1. Open vue-tailwind-datepicker demo
2. Scroll to single date example
3. Open up the calendar and reduce the screen size a bit

Tab into input causes error

Describe the bug
Whenever you tab into the datepicker component that has a value, an error is thrown in the console. Occurs on demo site and playground.

To Reproduce
Steps to reproduce the behavior:

1. Set focus on input by tabbing in to it.

Expected behavior
No thrown error

Version
1.1.5

Screenshot

a option to don't show the days of next month

The user sometimes misunderstands that the days of next month are disabled. Is there a simple way of not showing the days of next month to avoid this?

Describe the solution you'd like
A option to not show the days of the next month

Describe alternatives you've considered
Have a clear difference of what is a disabled day, and what is a day of the next month
or maybe a simpler way of customizing the CSS of disabled days and days of next month

Component doesnt set initial value

Describe the bug
If I set the modelValue before mounting the component, events for updating the input value in the field (pickerValue) are not triggered.
This is happening if the component is updated "silently", e.g. when using vue-router with nuxt. PickerValue is still "".

As soon as I open the calendar (clicking on the field), the correct value appears in the input.

Expected behavior
The input field of the picker should update with the initial modelValue.

Setting default date for single datepicker does not display correct date in input field.

Describe the bug
When setting a default date for a single datepicker, the wrong date is displayed in the input field. This was working in version 1.2.6 but no longer works in version 1.2.11.

To Reproduce

<script setup>
import { ref } from 'vue';
import VueTailwindDatepicker from 'vue-tailwind-datepicker';

const dateValue = ref('2023-02-28');
</script>

<template>
    <vue-tailwind-datepicker
        v-model="dateValue"
        as-single
        :formatter="{
            date: 'YYYY-MM-DD',
            month: 'MMMM',
        }"
        :shortcuts="false"
    />
</template>

Expected behavior
Expect input field to have default date of 2023-02-28. Instead input field shows 2000-01-01.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop & mobile (please complete the following information):

• Browser [e.g. chrome, safari]
• Library version [e.g. 3.0.0]

"h is not a function" when `noInput` prop is set

Describe the bug

Using shortcuts throws an error when no-input prop is set. Error seems to be thrown from close() here.

vue-tailwind-datepicker/src/VueTailwindDatePicker.vue

Lines 1066 to 1074 in 5ee24f0

	const setToCustomShortcut = (item, close) => {
	let s, e
	const [d, dd] = item.atClick()
	s = dayjs(d).format(props.formatter.date)
	e = dayjs(dd).format(props.formatter.date)
	emitShortcut(s, e)
	close()
	}

To Reproduce

<vue-tailwind-datepicker no-input />

Clicking on any shortcut throws an error.

Expected behavior
N/A

Screenshots

Desktop & mobile (please complete the following information):

• N/A
• v1.1.8

WindiCSS

I have new clear project with windicss.
Must it work with vue-tailwind-datepicker?, i take this

maybe need write some lines of code to import additional css?

New Vue project and Playground version not working "onBeforeMount is not defined"

When setting up a new Vue project and install 'vue-tailwind-datepicker' like mentioned in the tutorial https://dev.to/elreco/add-a-tailwind-datepicker-to-your-vue-3-application-57j2 the datepicker won't work. It produces "onBeforeMount is not defined" in the console.

To Reproduce
Steps to reproduce the behavior:

1. Set up a new Vue project (latest versioin)
2. Follow the steps of https://dev.to/elreco/add-a-tailwind-datepicker-to-your-vue-3-application-57j2
3. Run the project
4. Open the console to see the error

Also to be seen in the playground: https://stackblitz.com/edit/vue-tailwind-datepicker?file=src%2Fcomponents%2FPlayground.vue

Adding to nuxt3

Describe the bug
Adding vue-tailwind-datepicker in the same way as litepie-datepicker into nuxt3 project fails.

To Reproduce
Steps to reproduce the behavior:

1. Install vue tailwind datepicker
2. Add it as plugin:

import VueTailwindDatepicker from 'vue-tailwind-datepicker';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(VueTailwindDatepicker)
})

3. Add it as component:

<template>
  <div class="flex">
    <vue-tailwind-datepicker
      i18n="nl"
      :shortcuts="customShortcuts"
      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();
}

const customShortcuts = () => {
      return [
        {
          label: 'Vandaag',
          atClick: () => {
            const date = new Date();
            return [
              date,
              date
            ];
          }
        },
        {
          label: 'Gisteren',
          atClick: () => {
            const date = new Date();
            let yesterday = date.setDate(date.getDate() - 1)
            return [
              yesterday,
              yesterday
            ];
          }
        },
        {
          label: 'Afgelopen 7 dagen',
          atClick: () => {
            const date = new Date();
            return [
              new Date(date.setDate(date.getDate() - 7)),
              new Date()
            ];
          }
        },
        {
          label: 'Afgelopen 28 dagen',
          atClick: () => {
            const date = new Date();
            return [
              new Date(date.setDate(date.getDate() - 28)),
              new Date()
            ];
          }
        },
        {
          label: 'Vorige week',
          atClick: () => {
            const date = new Date();
            // +1 to get monday and -7 to get previous week
            let prevDay = new Date(date.setDate(date.getDate() - date.getDay() + 1 - 7));
            return [
              new Date(date.setDate(date.getDate() - date.getDay() + 1 - 7)),
              prevDay.setDate(date.getDate() + 6)
            ];
          }
        },
        {
          label: 'Vorige maand',
          atClick: () => {
            const date = new Date();
            return [
              new Date(date.getFullYear(), date.getMonth() - 1, 1),
              new Date(date.getFullYear(), date.getMonth(), 0)
            ];
          }
        },
        {
          label: 'Vorig jaar',
          atClick: () => {
            const date = new Date();
            return [
              new Date(date.getFullYear() - 1, 0, 1),
              new Date(date.getFullYear(), 0, 0)
            ];
          }
        },
        {
          label: 'Deze maand',
          atClick: () => {
            const date = new Date();
            return [
              new Date(date.getFullYear(), date.getMonth(), 1),
              date
            ];
          }
        },
        {
          label: 'Dit jaar',
          atClick: () => {
            const date = new Date();
            return [
              new Date(date.getFullYear(), 0, 1),
              date
            ];
          }
        }
      ];
    }
</script>

4. See error

[nuxt] [request error] Invalid URL ()
  at async $fetchRaw2 (<dir>/node_modules/ohmyfetch/dist/chunks/fetch.mjs:131:20)
  at async default (<dir>/node_modules/@nuxt/vite-builder/dist/runtime/vite-node.mjs:16:23)
  at async Object.renderToString (<dir>/node_modules/vue-bundle-renderer/dist/index.mjs:264:19)
  at async <dir>/.nuxt/dev/index.mjs:465:20
  at async <dir>/node_modules/h3/dist/index.mjs:420:19
  at async Server.nodeHandler (<dir>/node_modules/h3/dist/index.mjs:370:7)

When looking at editor warning:
Argument type of VueTailwindDatePicker is not assignable to parameter type plugin_2

Expected behavior
Expect to not have run errors.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop & mobile (please complete the following information):

• Node v16.18.0
• npm 8.19.2
• "nuxt": "3.0.0-rc.3"
• vue-tailwind-datepicker: "^1.1.0"

CSS Customization Options

Would you like to make more CSS customization options? For example, I want to use rounded selected dates, I did it by adding styles for .vtd-datepicker-date, but how to fix the background?

I would like to be able to customize for the selected elements, start and end. What do you think about it?

Timepicker feature

It would be great if this also had a timepicker option. I really need a vue tailwind datetimepicker.

Thanks!

Disabled state?

Is your feature request related to a problem? Please describe.
Feature request

Describe the solution you'd like
Make input disabled, like disabled="disabled"

Describe alternatives you've considered
Take control under all html options of input

Thanks.

Choose between weekdaysShort and weekdaysMin

I would like to be able to choose between weekdaysShort (3 char) and weekdaysMin (2 char), sometimes it is necessary. Right now we can't reduce the number of characters.

What I am talking about:

default dates ranges are not showing in the picker input

Hi @elreco , i have added default date like below , but its not showing the range in the picker.

<vue-tailwind-datepicker v-model="dateValue" />


const dateValue = ref([
        {
            startDate: new Date(),
            endDate: dayjs().format('DD MMM YYYY')
        }
    ])

But its shows only placeholder in the input not the actual provided date range .

Thanks!

md: screenwidth shows half the calendar

All ok on sm: and lg:

But on md:

Update value outside component not updating UI

Describe the bug

<script setup>
import { ref } from 'vue'
const dateValue = ref([])

// UI not updating when change dateValue outside component
setTimeout(() => {
  dateValue.value = ...newValue;
}, 1000);
</script>

<template>
    <vue-tailwind-datepicker v-model="dateValue" />
</template>

Expected behavior
pickerValue has to be reactive/listen to any changes from modelValue, so if we change the v-model value outside the component then the ui will also be updated