vuepic / vue-datepicker

Datepicker component for Vue 3

@vuepic/vue-datepicker

The most complete datepicker solution for Vue 3

DOCUMENTATION

StackBlitz Playground

Features

• Single date picker
• Range date picker
• Time picker
• Month picker
• Year picker
• Quarter picker
• Week picker
• Multiple dates select
• Multiple calendars
• Text input
• UTC support
• Timezones
• Locale support
• Week numbers
• Custom v-model
• Dark and light theme
• SSR support
• Highly configurable
• Accessible
• Included type definitions

Install

yarn add @vuepic/vue-datepicker

# or

npm install @vuepic/vue-datepicker

Import and register component

Global

import { createApp } from 'vue';
import App from './App.vue';

import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

const app = createApp(App);
app.component('VueDatePicker', VueDatePicker);

Local

<script>
    import VueDatePicker from '@vuepic/vue-datepicker';
    import '@vuepic/vue-datepicker/dist/main.css';
    
    export default {
        components: { VueDatePicker }
    }
</script>

Supporting the project

As you may know, maintaining an open-source project is a very time-consuming job. Your support is very appreciated ❤️

Please ⭐️ this repository if you like the component!

You can also make a financial contribution via sponsoring this project or one time donation. Become a sponsor

Special thanks to our sponsors 🙏

Versioning

This project follows SemVer specification

License

Copyright © 2021-present Vuepic

MIT

vue-datepicker's Issues

preventMinMaxNavigation not working when minDate and maxDate are set

Describe the bug
When minDate and maxDate are set I am able to use the arrows to go to months outside of that range

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://vue3datepicker.com/api/props/#preventminmaxnavigation'
2. Click on the input field
3. Use the arrows to navigate through months
4. I am able to go past the min and the max dates

I have this issue in my project as well.

Expected behavior
I am not able to select a month outside of the min and max dates.

Desktop :

• Browser Chrome, Windows 10, Version 100.0.4896.88 (Official Build) (64-bit)
• Library version 3.1.0

Scroll into date picker view on open

In the previous version of this widget (i.e. the last version of vue3-date-time-picker), we were able to automatically scroll the page to get the whole datepicker on the screen by doing something like this:

<template>
  <Datepicker
    :id="dateId"
    @open="opened"
  />
</template>

<script lang="ts" setup>
const uid = '1'
const dateId = `datepicker-${uid}`

const opened = async () => {
  await nextTick()
  document.getElementById(dateId)?.scrollIntoView()
}
</script>

After updating to this package, the same thing doesn't work. The best workaround we've found so far is:

<template>
  <Datepicker
    :uid="uid"
    :transitions="false"
    @open="opened"
  />
</template>

<script lang="ts" setup>
const uid = '1'
const dateId = `dp-menu-${uid}`

const opened = () => {
  setTimeout(() => {
    document.getElementById(dateId)?.scrollIntoView()
  }, 200)
}
</script>

Describe the solution you'd like
It would be great if the original solution could work. Maybe I've missed something though and there's a better way to do this 😅

Describe alternatives you've considered
The alternative is in the above description

Misprint in the tag class

Describe the bug
db__calendar_header
Probably should be dp__calendar_header

Navigation of items with arrow keys

Is your feature request related to a problem? Please describe.
In an accessibility standpoint navigation of the days, month and years menu should be made with the arrow keys instead of using tabs, since it mimics a lot of the behavior patterns in native html date tags and makes it easier for disabled users to make a selection.

Describe the solution you'd like

• When inside day view menu (the one that lets you navigate days in month), tabs only let you switch focus between
  • selecting month,
  • year,
  • previous month
  • next month
  • selecting day selection.
  • If focused on day selection, arrows lets you navigate left-right-up-down, between items. Enter makes a selection.
• When inside month view, tabs only let you switch focus between selecting month and going back to calendar overview. If focused on month selection, arrows lets you navigate left-right-up-down, between items. Enter makes a selection and returns user to overview.
• When inside year view, tabs only let you switch focus between selecting month and going back to calendar overview. If focused on month selection, arrows lets you navigate left-right-up-down, between items. Enter makes a selection and returns user to overview.

Illustrating tab stops and places where arrows should be used for navigation

Rage date won't show preview

I am using date range but it does not show (preview) selected dates

// in script
setup() {
        const date = ref(new Date());
        const format = (dates) => {
            if (dates[0] != undefined && dates[1] != undefined) {
                var start1 =  `${dates[0].getFullYear()}-${dates[0].getMonth() + 1}-${dates[0].getDate()}`;
                var end1 =  `${dates[1].getFullYear()}-${dates[1].getMonth() + 1}-${dates[1].getDate()}`;
                return `${start1} - ${end1}`
            }
        }
        return {
            date,
            format,
        }
},

// in methods
handleStartDate(modelData) {
    var start =  `${modelData[0].getFullYear()}-${modelData[0].getMonth() + 1}-${modelData[0].getDate()}`;
    this.form.start_date = start;
    var end =  `${modelData[1].getFullYear()}-${modelData[1].getMonth() + 1}-${modelData[1].getDate()}`;
    this.form.end_date = end;
},
 
// in template
<Datepicker v-model="form.start_date"
    range
    :format="format"
    :previewFormat="format"
    :partialRange="false"
    multiCalendars
    multiCalendarsSolo
    :minDate="new Date()"
    placeholder="Select hiring duration"
    @update:modelValue="handleStartDate"
    showNowButton
    nowButtonLabel="Current"
    :enableTimePicker="false"></Datepicker>

My.Video.mp4

Search in website doesn't work

Quick search in https://vue3datepicker.com/ doesn't work... i saw console in dev tools and got this message error (Unreachable hosts - your application id may be incorrect. If the error persists, contact [email protected].)

Steps to reproduce the behavior:

1. Go to https://vue3datepicker.com
2. Click on Cmd + K (on mac)
3. Type something in search bar
4. See error

Expected behavior
Working search to easily navigate in website

Screenshots

Desktop & mobile (please complete the following information):

• Chrome
• Mac OS

Datepicker pops up in modal but auto close when click on anything in the datepick menu

I am using headless ui for modal dialog and the date picker is inside the modal. Initial focus is already set on the focusable button. When I click on the date picker component, it pops up the menu just fine, when I start to click anything on it, it closes.

Any advise?

Script setup code:

import { computed, reactive, ref } from 'vue';
import {
  TransitionRoot,
  TransitionChild,
  Dialog,
  DialogOverlay,
  DialogTitle,
} from '@headlessui/vue';
import { XIcon } from '@heroicons/vue/outline';
import PrimaryButton from '@/Components/Commons/PrimaryButton';

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['hide', 'confirm']);

const form = reactive({
  starts_at: '',
  ends_at: '',
});

const closeButtonRef = ref(null);

const hide = () => emit('hide');

const confirm = () => {
  console.log('confirm');
};

Dialog(Modal) code:

<TransitionRoot as="template" :show="show">
    <Dialog @close="hide()"
            :initial-focus="closeButtonRef"
            as="div"
            class="fixed inset-0 z-10 overflow-hidden">
      <div class="absolute inset-0 overflow-hidden">
        <TransitionChild as="template"
                         enter="ease-in-out duration-300"
                         enter-from="opacity-0"
                         enter-to="opacity-100"
                         leave="ease-in-out duration-300"
                         leave-from="opacity-100"
                         leave-to="opacity-0">
          <DialogOverlay class="absolute inset-0 bg-black bg-opacity-70 transition-opacity" />
        </TransitionChild>

        <div class="fixed inset-y-0 right-0 max-w-full flex">
          <TransitionChild as="template"
                           enter="transform transition ease-in-out duration-300"
                           enter-from="translate-x-full"
                           enter-to="translate-x-0"
                           leave="transform transition ease-in-out duration-300"
                           leave-from="translate-x-0"
                           leave-to="translate-x-full">
            <div class="panel-width">
              <div class="h-full flex flex-col bg-white shadow-xl">
                <div class="min-h-0 flex-1 pb-12 flex flex-col gap-y-4 overflow-y-scroll">
                  <!-- Header -->
                  <div class="p-6 bg-gray-50">
                    <div class="flex items-start justify-between">

                      <!-- Title -->
                      <DialogTitle class="text-lg text-gray-900">
                        Create Skill Training
                      </DialogTitle>

                      <!-- Close Button -->
                      <div class="ml-3 h-7 flex items-center">
                        <button ref="closeButtonRef"
                                @click="hide()"
                                type="button"
                                class="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                          <span class="sr-only">Close panel</span>
                          <XIcon class="h-6 w-6" aria-hidden="true" />
                        </button>
                      </div>
                    </div>
                  </div>

                  <!-- Content -->
                  <div class="mt-6 relative flex-1">
                    <form id="send-for-training-form" @submit.prevent="confirm()">
                      <section class="py-2 px-6 relative border border-red-500">

                        <!-- DATE PICKER HERE -->
                        <Datepicker v-model="form.starts_at" />

                      </section>
                    </form>
                  </div>
                </div>

                <!-- Footer -->
                <div class="flex flex-shrink-0 border-t border-gray-200 px-6 py-5">
                  <PrimaryButton type="submit" class="ml-auto">
                    Send For Training
                  </PrimaryButton>
                </div>
              </div>
            </div>
          </TransitionChild>
        </div>
      </div>
    </Dialog>
  </TransitionRoot>

Pm button keeps switching back to am after select hours from grid

Describe the bug
Am button switching back to PM in timepicker non-24hour mode.

To Reproduce
Steps to reproduce the behavior:

1. Toggle am to pm
2. Click on hour grid menu to select

Expected behavior
Am Pm toggle should not auto toggle

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

Desktop & mobile (please complete the following information):

• Firefox developer edition 100.0b9, Chrome Version 100.0.4896.127
• Library version [3.1.1]

unpkg CDN

The new npm package does not seem to be up at unpkg.

https://unpkg.com/[email protected]/

Is there another CDN location? The previous versions seem to work.

Accessibility

Hi, are the aria-label hardcoded and in english only? Is there a way to configure this for different languages?

access all selected dates in multiDates

Is there a way to access all the selected dates in the multiDates prop? I want to be able to console.log all the selecteddates after clicking "select" in the compnent.

Calendar doesn't scroll when valueModel changed

Describe the bug
I'm trying to implement custom preset logic. When I select preset in my own input type="select", I change the value prop passed to the Datepicker component. Chosen range highlights in the calendar but there is no scroll to the start of that range.

To Reproduce

• create datepicker and pass following props: { inline: true, autoApply: true, range: true, multiCalendars: true }
• try to change valueModel programmatically to dates that are outside the current view

Expected behavior
View changes to the start of newly selected range (exactly as when using the existing presetRanges prop)

Desktop & mobile (please complete the following information):

• Browser chrome
• Library version 3.2.0

https://stackblitz.com/edit/vuepic-vue-datepicker-gh1jwr?file=src/components/Playground.vue

minutesIncrement from grid

Hello, i am trying to use the minutesIncrement functionality. It works but not as expected for my case.

If I set minutesIncrement="5" ad I click on the date Picker when it's 08:06 and then increment the value of the minute by 5, I get 08:11, 08:16, 08:21 ... and so on. Would be nice if we would get a param to say that it should take the the increment like the grid for example:

If it is 08:06 and I increment the value, the next value should be 08:10 (the next multiple of 5 in this case) and not 08:11.

Maybe there is a workaround?

So thank you for your help and your great plugin, I hope the explanation is clear.

Cheers

Date format does not work as expected

Describe the bug

Code:

<Datepicker
    autoApply
    v-model="meeting.date"
    locale="pt-BR"
    format="dd/MM/yyyy"
    previewFormat="dd/MM/yyyy"
    :enableTimePicker="false"
/>

The initial meeting.date value is 04/01/2022, meaning January 4th, 2022, because the dates are in day/month/year format.

I tried all variations that I could, using :format="'dd/MM/yyyy'", :previewFormat="'dd/MM/yyyy'", :textInputOptions="{ format: 'dd/MM/yyyy' }" and more.

All my attempts failed. No matter what I do, the initial 04/01/2022 is interpreted as "April 1st, 2022" - which is not the expected value, according to the informed format.

Note that, after the initialization, the calendar does behave as expected. For example, if I click at "March 9th, 2022" in the calendar, it will render as 09/03/2022, as expected.

To Reproduce

See the description, above.

Expected behavior

See the description, above.

Screenshots

Not necessary.

Desktop & mobile:

• Desktop
• Browser Chrome
• Library version 3.2.0

The url not working anymore

<script src="https://unpkg.com/@vuepic/vue-datepicker@latest"></script>

Not working any more could you please fix the issue asap thanks

Failed to load main.css.map from vue-router subdirectory

The main.css.map file is not able to be loaded when the component is being called from within a subdirectory using vue-router. If I use this component in a top level/root directory within vue-router, it works as expected and loaded the main.css.map file. If there a way to hard code link the location of these files since I think it's appending the sub-directory into the URL path.

Error:

DevTools failed to load source map: Could not load content for http://localhost:3000/customer/main.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

• Notice how it added "customer" into the location for the main.css.map url?

The pop-up works as expected but all the CSS classes are not applied and it doesn't look like it should.

Transitions prop validation

When I specify the transitions prop with an object, I get a console warning of:

"Invalid prop: type check failed for prop "transitions". Expected Boolean, got Object"

I'm specifying the prop as:

:transitions="{ next: 'fade', previous: 'fade' }"

Range Date Picker

Hello good Morning,

how to format the date when the range is true.
format example: dd/MM/yyyy

thanks

Functionality to shift tab back to the previous field

Is your feature request related to a problem? Please describe.
Currently creating a form that has multiple inputs. Trying to allow to user to tab/ shift-tab back and forth throughout the fields so they do not have to use a mouse if they choose not to.

Describe the solution you'd like
The ability to press shift+tab, and have the focus be moved to the previous input field. Currently works for tabbing forward, but appears that shift+tab t move backwards is disabled by default.

Describe alternatives you've considered
Had a work around partially working but it required me to hard code what each previous field was going to be, ideally I wanted to use this generically.

DatePicker doesn't popup inside Headless UI Dialog component

Describe the bug
DatePicker Modal doesn't seem to show up inside HeadlessUI Dialog/Modal component

To Reproduce
Steps to reproduce the behavior:

1. Add between component of Headless UI
2. Input field is rendered, but upon clicking on input field, nothing shows up.

autoApply with range

@Jasenkoo nice plugin!

Wanted to ask real quick whether it would be possible to use the autoApply option with the range option without having to open the date selector twice.
Right now when I select a start date, the popup is closed because of the autoApply and need to open the date selector again to be able to select the end date as well.

Thanks!

Time sections doesn't overlay

When selecting a date, I want to select a time, but the time sections doesn't overlay the calendar.

I'm using the range picker mode code from the website.

Using VUE-3

Thanks for your reply in advantage.

Add Buddhist year feature

Hi team,

Can you add more features?
"Buddhist year feature" just plus +543 to the current year or adding yearNameFormating which like monthNameFormat

Conflicting peer dependency: [email protected]

Describe the bug
Not able to install the module.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR!   peerOptional vue@"^2.6.10 || ^3.0.0" from @storybook/[email protected]
npm ERR!   node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs
npm ERR!     @storybook/addon-docs@"6.4.0-alpha.18" from @storybook/[email protected]
npm ERR!     node_modules/@storybook/addon-essentials
npm ERR!       dev @storybook/addon-essentials@"^6.4.0-alpha.18" from the root project
npm ERR!   peer vue@"^3.0.0" from @storybook/[email protected]
npm ERR!   node_modules/@storybook/vue3
npm ERR!     peerOptional @storybook/vue3@"6.4.0-alpha.18" from @storybook/[email protected]
npm ERR!     node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs
npm ERR!       @storybook/addon-docs@"6.4.0-alpha.18" from @storybook/[email protected]
npm ERR!       node_modules/@storybook/addon-essentials
npm ERR!         dev @storybook/addon-essentials@"^6.4.0-alpha.18" from the root project
npm ERR!     dev @storybook/vue3@"^6.4.0-alpha.18" from the root project
npm ERR!   9 more (@vue/babel-preset-app, @vue/compiler-sfc, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! vue3-date-time-picker@"*" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/vue
npm ERR!   peer vue@">=3.2.0" from [email protected]
npm ERR!   node_modules/vue3-date-time-picker
npm ERR!     vue3-date-time-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! 
npm ERR! See /Users/hotcake/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/hotcake/.npm/_logs/2022-03-20T19_01_38_378Z-debug.log

After failing, I tried to install using --legacy-peer-deps, it installed the module without an error, but I was not able to import.

It was saying Module not found.

To Reproduce
Steps to reproduce the behavior:

1. npm i vue3-date-time-picker
2. If it fails, then use npm i vue3-date-time-picker --legacy-peer-deps
3. import Datepicker from 'vue3-date-time-picker'; import 'vue3-date-time-picker/dist/main.css';

Expected behavior
Install and use the Datepicker component.

Screenshots

Desktop & mobile (please complete the following information):
Package.json

  "dependencies": {
    ...
    "@vueform/multiselect": "^2.3.3",
    "@vuepic/vue-datepicker": "^3.0.0",
    "axios": "^0.21.1",
    "copy-to-clipboard": "^3.3.1",
    "date-fns": "^2.22.1",
    "js-cookie": "^2.2.1",
    "lodash": "^4.17.21",
    "shepherd.js": "^8.3.1",
    "vee-validate": "^4.2.2",
    "vue": "^3.0.0",
    "vue-i18n": "^9.2.0-beta.17",
    "vue-router": "^4.0.0-0",
    "vuedraggable": "^4.1.0",
    "vuex": "^4.0.2",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "@cypress/webpack-preprocessor": "^5.6.0",
    "@storybook/addon-actions": "^6.4.0-alpha.18",
    "@storybook/addon-essentials": "^6.4.0-alpha.18",
    "@storybook/addon-links": "^6.4.0-alpha.18",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/vue3": "^6.4.0-alpha.18",
    "@tailwindcss/postcss7-compat": "^2.0.4",
    "@types/faker": "^5.1.7",
    "@types/jest": "^24.0.19",
    "@types/lodash": "^4.14.168",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "autoprefixer": "^9.8.6",
    "cypress": "^9.0.0",
    "cypress-file-upload": "^5.0.8",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    ...

OS: Ubuntu 20
Node v16.14.1
npm v8.3.1

Changed date picker mode to select year only, it is crashing. Can you check it again for me?

Documentation -> Installation custom SCSS folder path not correct

Describe the bug
In the documentation, Installation page, the path for full custom control SCSS is :

@import '@vuepic/vue-datepicker/src/Vue3DatePicker/style/main.scss';

But the true path is :

@import '@vuepic/vue-datepicker/src/VueDatePicker/style/main.scss';

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://vue3datepicker.com/installation/#local'
2. Watch the end of Local section.

Expected behavior
Change the documentation

Screenshots

More informations:
I fix this issue in my pull request -> #5

Y-scroll when on bottom of the page

Describe the bug
When there is no scroll on page (y-axe) or when the input element is at the end of the page, during calendar opening scroll appears. It's because menu is going from down and as written before, there is nothing bellow therefore this menu makes page longer.

To Reproduce
Steps to reproduce the behavior:

1. Install datepicker
2. Insert it to the end of the page and/or have a page without y-scroll
3. Click on input (open calendar)
4. See scroll error

Desktop & mobile (please complete the following information):

• Firefox Developer edition, 100.0b7 (64-bit)

First selectable date - 01-01-1970

Describe the bug
Hi, currently there is no option to select dates before 01-01-1970, even when minDate prop is set to earlier dates.
Using default input with type="date" allows update value to earlier days but modal doesn't allow to selected prior dates.

To Reproduce

import dayjs from "dayjs";
const now = dayjs();
const minDays = now.subtract(100, "years")

const date = ref('');

<Datepicker
  v-model="date"
  :min-date="minDate"
  :max-date="now.format('YYYY-MM-DD')"
/>

Expected behavior
Allow to select dates before 01-01-1970 when minDates prop is set to earlier dates.

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

Desktop & mobile (please complete the following information):
library:
[email protected]
@vuepic/vue-datepicker: @3.1.1

Multiple Datepicker instances in the same page?

I have noticed if i have multiple Datepicker component in the same page only one of which will work like there is only one component.

Latest version 3.2.1
Vue 3.2.29

Double highlight current date in multicalendar

Hello!

I used this config

<Datepicker v-model="date" locale="ru" range multiCalendars :enableTimePicker="false" autoApply :minDate="minDate" :maxDate="maxDate" preventMinMaxNavigation hideOffsetDates :monthChangeOnScroll="false" monthNameFormat="long" :yearRange="[2022, 2022]" :format="format"> </Datepicker>

and I see a double selection of the current date

"vue3-date-time-picker": "^2.6.0"

Dates are offset by one day

Describe the bug
calendar dates are offset by a day. Please see the screenshot. Timezone on my mac was set to Toronto/Canada

To Reproduce
Steps to reproduce the behavior:

1. Go to official documentation and see any of the example

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Desktop & mobile (please complete the following information):

• Browser Firefox, Chrome
• Library version latest

maxDate doesn't work as expected if set to 31-Jan-YYYY.

Describe the bug
The date picker is customised to use a month picker

If the maxDate value is set to 31-Jan-2022 (Issue exists for any year, but date set as 31-Jan). The month picker doesn't show the other months of the year 2022 as disabled. Only the months from 2023 are disabled.

Expected behavior
I would expect the months (Feb-Dec) from the year 2022 to be disabled.

Screenshots

Desktop & mobile (please complete the following information):

• Chrome, Safari, Brave
• 3.2.1

unworking slots

Im trying this package for first time, very comfortable and functionally.
unfortunately none of the slots that mentioned in the docs are work for me, is there something to do with that?

right now Im using @1.0.2

Option for Auto range to not select disabled week days

The Auto range was the perfect solution for me with the exception that it would count the weekends as a selection even though I have them disabled.

One potential solution maybe to just have an attribute to ignore any disabled week days. Or to have the ability to to remove the disabled days from the calendar entirely.

Highlight selected week in weekPicker

First of all; great plugin! Easily the most customizable and simple-to-use datepicker for vue3 👍

I use the datepicker in several modes; day, week and month, and I would like to request a slight improvement to the weekPicker-mode. I would be very nice if the currently selected week could be highlighted in some way (I can't seem to find this in the current version). The selected day is highlighted, but when in week-mode it would be nice if either all days in the week get an additional class, or the row-wrapper gets an addition class in some way. That way it's easier to show what week is currently selected. The hover works fine, but the I can't find any way to style the currently selected week. Would be a nice feature 💯

How to responsive item when mobile?. dp__calendar it's broken when mobile, is hiding on the left.

Toggle month/year overlay from custom component

Hello,

thank you for a great datepicker.
I am trying to implement custom monthYearComponent where it would be pretty much the same as the default one, but Month text and Year text would be one button, instead of two separate buttons.

When the button is clicked, the default month overlay would be shown.
When month is selected, the default year overlay would be shown.
When year is selected, overlay is closed back to calendar.

Is there any toggle method I could use?
I have tried to use provide/inject, so I am able to detect the click in custom monthYearComponent. And I do handle the event in the parent component. But I am lost as how to toggle the Month overlay and later on the Year overlay.
I have tried updating the prop monthPicker to true. And the overlay does change, but the content is empty.

What I have tried:

Parent:

<Datepicker v-model="date" :monthPicker="monthPicker" />


const monthPicker = ref(false);
const setOverlay = (type) => {
    if (type === "month") monthPicker.value = true;
};

provide('setOverlay', {
  setOverlay
});

Custom component:

<div @click="setOverlay("month")">{{ months[month].text }} {{ year }}</div>

const { setOverlay} = inject('setOverlay');

But I am lost as what to do in the setOverlay function to toggle on the month overlay.

Thank you for your help.

open calendar on input icon click

I would like to show the datepicker by clicking on the calendar icon.
How can I make this happen?

The code below doesn't work.

<template #input-icon="{ open }"> <img class="input-slot-image" src="/logo.png" @click="open" /> </template>

Transition example

I'm reading the documentation about transitions:

"To configure you own, please check the Vue documentation and provide a transition name in the prop". Is there an example on how to do this? I've tried to wrap the component in a transition tag as well as given the datetimepicker component a prop of transitionName="fade" but I can't seem to get it to work. Thanks!

V-model value not updating.

v-model value does not update when a date has been selected. If not predefined, the variable is undefined or initial value. Happens in vue 3 migration build. Got any thoughts

?

Time picker toggle error

I'm using the browser installation mode using the latest version. When I click the clock icon to switch to time picker mode, I get the following console errors:

Close box shows when input is hidden

Describe the bug
When a class is set on the input and that class hides the input, the X close button still shows. I've been unsuccessful at targeting this specifically with CSS to hide it.

To Reproduce

1. Set input-class-name to a class that is "display: none"

Expected behavior
If the input is hidden, the X button should not show.

Demonstration
https://stackblitz.com/edit/vuepic-vue-datepicker-f3qkwq?file=src/components/Playground.vue

textInputOptions interface has wrong type

Prop textInputOptions.format
should be type
string | undefined
instead of
null | undefined

Rane Date Picker

Describe the bug
When setting a minDate you can not navigate to that month from the next month - e.g. minDate set to 1 May 2022, if you open the calendar and go to the next month, you can no longer navigate back to May 2022

To Reproduce
Steps to reproduce the behavior:

1. Set minDate to today
2. Open Calendar
3. Navigate to next month
4. Can no longer navigate to this month

Expected behavior
You should be able to navigate to this month

Desktop & mobile (please complete the following information):

• Browser, Chrome 101 and Firefox 99 and 100
• Library version 3.2.0

This worked fine in 3.1.1

Changed date picker mode to select year only, it is crashing. Can you check it again for me? #yearPicker

Setting flow on monthYear component

I need to use only year picker but if selected year is equal to current year user can select month too. So I used monthYearPicker and then i got a problem with setting flow. I used :flow="['year', 'month']" props but picker adding calendar date selection too.
how can I find solution?

Month picker flow sets in the right way if i add monthYearPicker and flow there have to be only month and year selection

Can't prevent user from typing disabled dates into text input

Describe the bug
Can't prevent user from typing disabled dates into text input.

To Reproduce

1. Disable a date
2. Enter that date to input
3. Then click enter

Expected behavior
Maybe dont set set the model value or set date the last successful date.

Screenshots

Change month number to text

I want to change 05 to May How can i do it ?

Duplicated mounth in inline mode

Describe the bug
The same month is displayed on both sides of the datepicker when the date range is selected on the right-side calendar. The issue occurs when using datepicker with such options constellation: inline range multiCalendars.

To Reproduce
Steps to reproduce the behavior:

1. Set these options to datepicker: inline range multiCalendars
2. Select the date range on the right-side calendar
3. See the error

Screenshots

Desktop & mobile (please complete the following information):

• Browser - Chrome
• Lib ver - 3.1.1

pick only year

Is there ability to set mode like yearPicker to pick only year?