icehaunter / vue3-datepicker Goto Github PK

View Code? Open in Web Editor NEW

150.0 150.0 147.0 801 KB

Simple datepicker component for Vue 3

Home Page: https://icehaunter.github.io/vue3-datepicker/

License: MIT License

HTML 0.79% Vue 95.32% CSS 0.48% JavaScript 0.29% TypeScript 3.13%

component datepicker vue vue3

vue3-datepicker's People

Contributors

Stargazers

Watchers

Forkers

xquick robbevp frostbolt herdismaria litvinovvo idist-hn okame samuellwn agricolus jagadeshanh trendingtechnology niklasschloegel gonpre allandacasin trussell436 primogenito malthe aaqibqadeer chikkun530 bartenra sidilidi bttlvd seanwuapps domohh dkrndidl akamah edwardsmart98 cwaldbieser billyranario dazach thenaschkatze demvsystems craudio1982 signmeuptwice leshiple mizan8102 hakobfromlightin nsvn-nguyenducsinh tu-kuanchen aperron marinasnobl purnimacompro smoakey syedjunaid12 trandinhhuong beatsforthemind hooneats ritchieritchie ondrabus aamws nikkistorme sheetal-sonsale nathannoble elias-g-m dungfv eorjs37 axonesx bharath5796 azeemwishfin hamburger-l culjo lilopupus creatpixinfotech alex311999 dr4gosh hk0305 xolanicipc vmakal1989 huynhhuutrii zulfio chienlvnal evrys pome24m mirvalim tun009 duongpv2112 izstriker haiyen210 swansister gusviieira timruddell suganyaachu zakaullahraj jltf2308 phuocthiem soeurngsar tahaucarui hipark-dev andreyts anandmahajan lysyoyo sunhe430 nerijusgaidjurgis hamiltonoliveira sanhos95 wt-cristiano sashimitrash maj0rika rohailvictor itzvinoth

vue3-datepicker's Issues

Seems pack `date-fns` without tree shaking.

Init a blank vue project. Then import vue3-datepicker like this:

import picker from "vue3-datepicker";
console.log(picker);

Build project will pack date-fns without tree shaking.

Support disabling dates by day of week

It appears disabled dates only accept specific days. Is there a way to say disable every weekend, am I missing it? If not would be a good feature

typable: formating before I finish typing the date.

When typing a date, for example 30.11.2023

the watch(input.value) triggers and formats my date. The problem is, as soon as I start writing the year (in this case number 2), I get the formatted date 30.11.0002. In other words, it formats my dates before I finish writing it.

eddit: If you need a quickfix, following will work as long as you have an inputFormat:

in the file datepicker.vue inside const keyUp you have to replace:

if (isValid(parsedDate))

with

if (isValid(parsedDate) && input.value.length === props.inputFormat.length)

When using it as source, it pulls all date-fns locales

I have no explanation yet, I guess it's probably more an issue with date-fns, but I done that (more or less):

<template>
  <datepicker
    :locale="dateLocale"
  />
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { fr } from 'date-fns/locale';
import Datepicker from '../../../../dist/vue3-datepicker/src/datepicker/Datepicker';

export default defineComponent({
  name: 'foo',
  components: {
    Datepicker,
  },
  data() {
    return {
      dateLocale: fr,
    };
  },
});
</script>

And it happens that all date-fns locale end up in my final bundle (even in production mode, after tree shaking). It takes a serious amount of space.

Please note that I'm using a copy of the component source in my own assets folder until #19 is fixed.

monthHeadingFormat not working

Hello!
Im trying to set up a different format (yyyy MMMM) for the month view, but nothing is working.
Locale is hu.
My current code is the following:

<datepicker
    id="document_date"
    v-model="form.document_date"
    :monthHeadingFormat="'yyyy MMMM'"
    :startingView="'year'"
    :locale="locale"
/>

Anyone knows what should I do to change it to year-month format?

Thanks!

Add an option to clear the selected value

At times we might have an optional date fields and user should be able to clear the dates before submitting the form.

PR #20

Module parse failed: Unexpected token

How can I fix this error ?
It seems it has to do with PropType ?

Module parse failed: Unexpected token (26:17)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader-v16/dist/index.js
You may need an additional loader to handle the result of these loaders.
|      */
|     modelValue: {
>       type: Date as PropType<Date>,
|       required: false,
|     },

 @ ./node_modules/vue3-datepicker/src/datepicker/Datepicker.vue?vue&type=script&lang=ts 1:0-161 1:0-161 1:162-312 1:162-312
 @ ./node_modules/vue3-datepicker/src/datepicker/Datepicker.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/ET_Calibrations/QATFinishTheReport/QATFinishTheReport.vue?vue&type=script&lang=js
 @ ./src/components/ET_Calibrations/QATFinishTheReport/QATFinishTheReport.vue?vue&type=script&lang=js
 @ ./src/components/ET_Calibrations/QATFinishTheReport/QATFinishTheReport.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.114:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

I am using the following packages:

{
  "name": "poc_dashboard",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "devbuild": "npm run build && xcopy \"dist/IconsList\" \"../../../build/bin/x64/debug/www/IconsList\" /I /E /K /Y"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/vue-fontawesome": "^3.0.0-4",
    "@vue/cli": "^3.12.1",
    "@vue/compat": "^3.0.0",
    "bootstrap-vue": "^2.21.2",
    "chart.js": "^2.9.4",
    "core-js": "^3.15.2",
    "cornerstone-core": "^2.3.0",
    "cornerstone-wado-image-loader": "^3.3.1",
    "dicom-parser": "^1.8.7",
    "stylus": "^0.54.8",
    "stylus-loader": "^3.0.2",
    "vue": "^3.0.0",
    "vue-final-modal": "^3.4.0",
    "vue-loader": "^16.2.0",
    "vue-native-websocket": "^2.0.14",
    "vue-router": "^4.0.10",
    "vue-slider-component": "^4.0.0-beta.4",
    "vue-toggles": "^3.0.0-beta.4",
    "vue3-datepicker": "^0.2.5",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.13",
    "@vue/cli-plugin-eslint": "~4.5.13",
    "@vue/cli-service": "~4.5.13",
    "@vue/compiler-sfc": "^3.1.4",
    "babel-cli": "^6.26.0",
    "babel-eslint": "^10.1.0",
    "bootstrap": "^4.6.0",
    "eslint": "^6.8.0",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.13.1",
    "less-loader": "^4.1.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^7.3.1",
    "style-loader": "^0.23.1"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

I tried to add typescript support but I have too many errors, is it possible to not use typescript for this component ?

Date format error

I can't change the date format adding something else other than dd MM and yyyy.

Example to reproduce:

<Datepicker
      v-model="date"
      :locale="dateLang"
      inputFormat="eee dd.MM.yyyy"
  />

I get this errors in console:

[Vue warn]: Unhandled error during execution of watcher callback 
  at <Datepicker modelValue= Fri Feb 19 2021 09:05:04 GMT+0100 (Central European Standard Time) onUpdate:modelValue=fn locale= {code: "de", formatLong: {…}, localize: {…}, formatDistance: ƒ, formatRelative: ƒ, …}  ... > 
  at <DatePicker> 
  at <Speiseplan onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

[Vue warn]: Unhandled error during execution of setup function 
  at <Datepicker modelValue= Fri Feb 19 2021 09:05:04 GMT+0100 (Central European Standard Time) onUpdate:modelValue=fn locale= {code: "de", formatLong: {…}, localize: {…}, formatDistance: ƒ, formatRelative: ƒ, …}  ... > 
  at <DatePicker> 
  at <Speiseplan onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <Datepicker modelValue= Fri Feb 19 2021 09:05:04 GMT+0100 (Central European Standard Time) onUpdate:modelValue=fn locale= {code: "de", formatLong: {…}, localize: {…}, formatDistance: ƒ, formatRelative: ƒ, …}  ... > 
  at <DatePicker> 
  at <Speiseplan onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

Uncaught (in promise) RangeError: Format string contains an unescaped latin alphabet character `e`
    at eval (index.js?4bb6:109)
    at Array.map (<anonymous>)
    at lightFormat (index.js?4bb6:90)
    at eval (vue3-datepicker.esm.js?24e7:667)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
    at getter (runtime-core.esm-bundler.js?5c40:2018)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at doWatch (runtime-core.esm-bundler.js?5c40:2106)
    at watchEffect (runtime-core.esm-bundler.js?5c40:1950)
    at setup (vue3-datepicker.esm.js?24e7:665)

Am I doing something wrong or it is a bug?

Add emitted events

It would be great to emit at least some events which were present in a previous version:

(Quoting from the previous docs):

Event	Output	Description
opened [done]		The picker is opened
closed [done]		The picker is closed
selected	Date\|null	A date has been selected
selectedDisabled	Object	A disabled date has been selected
input	Date\|null	Input value has been modified
cleared		Selected date has been cleared
changedMonth [done]	Object	Month page has been changed
changedYear [done]	Object	Year page has been changed
changedDecade [done]	Object	Decade page has been changed

Missing license

Cannot compile. Module parse failed: Unexpected token (470:30)

Failed to compile.

./node_modules/vue3-datepicker/dist/vue3-datepicker.esm.js 470:30
Module parse failed: Unexpected token (470:30)
You may need an appropriate loader to handle this file type.
| });
| const isEnabled = (target, lower, upper, disabledDates) => {

        if (disabledDates?.dates?.some(date => isSameDay(target, date)))

| return false;
| if (!lower && !upper)

locale "es" of date-fns don't work in the months picker

locale "es" of date-fns works in date picker but no in months pickers

Allow adding arbitrary CSS classes to the form input

I'm working with Twitter Bootstrap 4 as CSS framework, sadly, the field input from this component appears unstyled. Using SCSS, I could apply mixins on it with pure CSS, sadly the form-control class in Bootstrap is not using mixins, but is a raw CSS class set of styles. The easiest way to make it pretty, in my case, would be to just to add the aforementioned CSS class on the text input.

How can i translation this component?

As the title, I cant find any way to translation this component

глюк ввода дня при typeable true

При вводе даты руками, например, 2021-08-19 вводится 2021-08-019 (календарь переходит на 2021-08-01)
Хочу получить день 19, а этот код
watchEffect (() => (input.value =
props.modelValue && isValid (props.modelValue)
? format (props.modelValue, props.inputFormat, {
locale: props.locale,
})
: ''));
отрабатывает и как только 1 увидел заменил ее на 01

can disabledDates option be a function ?

This may sound like a stupid question, but one need I do have right now is the ability to disable all weekend (saturdays and sundays) in some calendars.

Is that possible ?

Add option for the user to type in the date

Currently, this component does not support typing in the date, which might be a problem for some. We should be able to offload parsing onto date-fns by adding a prop to specify acceptable formats for input.

format date v-model

I can't change the date format of the v-model. I've : Thu Nov 05 2020 00:00:00 GMT+0100 (heure normale d’Europe centrale) instead 2020-11-05

Browser build

Can you create a browser build? It looks like any of created datepickers doesn't have it.

How to set Internal time format and display it another way ?

is it possible to change the internal time format to something custom ?

Is it possible to display a more user friendly format like '16 oct 2022" but use another internally ?

upperLimit / lowerLimit reporting wrong types

When using https://github.com/johnsoncodehk/volar, the component reports upperLimit and lowerLimit being of types string | undefined.

    upperLimit?: string | undefined;
    lowerLimit?: string | undefined;

However, in the documentation as well as the proptype itself, it is a Date | undefined

vue3-datepicker/src/datepicker/Datepicker.vue

Lines 89 to 99 in b52fe3d

    
               upperLimit: { 
        
                 type: Date, 
        
                 required: false, 
        
               }, 
        
               /** 
        
                * Lower limit for available dates for picking 
        
                */ 
        
               lowerLimit: { 
        
                 type: Date, 
        
                 required: false, 
        
               },

Note that the incorrect type is in vue3-datepicker/dist/Datepicker.vue.d.ts.

Add disabled dates pattern and predicate

Thanks to #12, this component now supports disabling specific dates. It would be nice to be able to use everything else from the original filtering object. I think it is a good idea to start at predicate-based filtering, as it allows for the implementation of everything else at the usage point. It might not be the most convenient thing, but it is a good start.

Overall, we might support the following object keys:

daysOfWeek: Indices of days of the week, which are disabled. E.g. [0, 6] to disable Saturday and Sunday.
daysOfMonth: Actual dates in any month to be disabled. E.g. [25, 31] to disable 31st and 25th.
ranges: Ranges of dates (both ends excluded) that should be disabled. E.g. `[{ from: new Date('2021-01-01'), to: new Date('2021-01-05') }]
predicate: Filtering function, which should accept a date and a currently displayed level and return a boolean. It should be run on every date which will be presented in the current view of the calendar.

How to change the language for the days of the week?

I am confused with the documentation on how to change the language for the days of the week. Could you please give an actual example?

Enable all dates, even in next or previous month

Currently you can only select the dates from the selected month

Any way to make to be able to select dates from next/prev month, which are now disabled?

Feature request: preferred position of the datepicker relative to the form field

Ex:

<Datepicker v-model="picked"  position="top right"/>

Selected month is displayed in the datepicker after cleaning the field

Hi!
Datepicker is opened on a selected month (not current one) after cleaning the field.
So a user selects a date from previous month, than clears the field by X icon, than opens the datepicker again and previously selected month is displayed (until refreshing a page).
Could you add displaying current month in the datepicker after cleaning the field, please.

Failed to resolve component: datepicker

Sorry in advance if this is just because I don't understand vue3 enough and how to use node modules. I am trying to create my first Vue 3 app - I have this in my package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "jquery": "^3.6.0",
    "pace": "^0.0.4",
    "popper.js": "^1.16.1",
    "vue": "^3.0.0",
    "vue-plugin-load-script": "^2.0.1",
    "vue-router": "^4.0.0-0",
    "vue3-datepicker": "^0.2.4"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2"
  }
}

this in main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Datepicker from 'vue3-datepicker'

console.log(Datepicker); //this gives the Datepicker object I'd expect

createApp(App).use(router).mount('#app');

and this kind of thing in my Test.vue

<template>
          <datepicker
              v-model="picked"
          />
</template>

<script>
import { ref } from 'vue'
export default {
  name: "Test",
  data() {
    return {
      picked: ref(new Date())
    }
  }
}
</script>

All I am getting is a runtime warning
[Vue warn]: Failed to resolve component: datepicker at <Test onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <App>
and the component doesn't show up.

Is it just that I am doing something wrong?
Thank you

Empty Datepicker

I'm trying to initialize the date-picker as empty so all of my users are forced to pick a day but it seems like it doesn't have the support and expects to have a Date object as default?

Thank you!

Thank you for this component, it seems great. I may close this issue later if I have issues with it :D

Support for Nuxtjs

Hi,

I'm fighting to get this working with NuxtJs (2.15) but getting errors like

 ERROR  9:31:46 AM [vite] error while updating dependencies:                                       09:31:46
Error: Build failed with 24 errors:
node_modules/vue3-datepicker/dist/vue3-datepicker.esm.js:1:9: error: No matching export in "node_modules/vue/dist/vue.runtime.esm.js" for import "defineComponent"
node_modules/vue3-datepicker/dist/vue3-datepicker.esm.js:1:26: error: No matching export in "node_modules/vue/dist/vue.runtime.esm.js" for import "pushScopeId"
node_modules/vue3-datepicker/dist/vue3-datepicker.esm.js:1:39: error: No matching export in "node_modules/vue/dist/vue.runtime.esm.js" for import "popScopeId"
node_modules/vue3-datepicker/dist/vue3-datepicker.esm.js:1:51: error: No matching export in "node_modules/vue/dist/vue.runtime.esm.js" for import "openBlock"
node_modules/vue3-datepicker/dist/vue3-datepicker.esm.js:1:62: error: No matching export in "node_modules/vue/dist/vue.runtime.esm.js" for import "createBlock"
...
    at failureErrorWithLog (/ProjectPath/node_modules/esbuild/lib/main.js:1224:15)
    at buildResponseToResult (/ProjectPath/node_modules/esbuild/lib/main.js:936:32)
    at /ProjectPath/node_modules/esbuild/lib/main.js:1035:20
    at /ProjectPath/node_modules/esbuild/lib/main.js:568:9
    at handleIncomingPacket (/ProjectPath/node_modules/esbuild/lib/main.js:657:9)
    at Socket.readFromStdout (/ProjectPath/node_modules/esbuild/lib/main.js:535:7)
    at Socket.emit (events.js:315:20)
    at addChunk (internal/streams/readable.js:309:12)
    at readableAddChunk (internal/streams/readable.js:284:9)
    at Socket.Readable.push (internal/streams/readable.js:223:10)
    at Pipe.onStreamRead (internal/stream_base_commons.js:188:23)

I tried to setup plugin per nuxt plugin documentation but with no luck. Any ideas?
Thanks

Is it possible to release v0.2.6? Master is ahead

The master branch is up to date but by installing the package but no predicate functionality was found for disabled dates. I was able to use the predicate by running this command: npm i --save vue3-datepicker@icehaunter/vue3-datepicker#master

Month and Year selection only

Good day! Would like to confirm as it seems that minimumView is not working. Wanted to disable day selection. startingView is working though. Thanks.

Missing style

I'm using: Vue 3 + Vite and everything works except that there is not style at all.

Screenshot

<template>
    <datepicker
        v-model="selected"
    />
</template>

<script>
    import { ref } from 'vue'
    import Datepicker from 'vue3-datepicker'

    export default {
        components: {
            Datepicker,
        },

        setup() {
            const selected = ref('')
            return { selected }
        }
    }
</script>

style variable fallthrough seems broken.

the styling playground seems broken, example doesn't reflect changes when variable value changed

also tried to specified variable value in my project like this, doesn't seems to work.

<Datepicker v-model="picked" style="--vdp-divider-color:#000000"/>

Can I open the calendar by clicking on an icon

Good afternoon,

I am trying to use vue3-datepicker and my UX requirement is to open the calendar by clicking on an icon and not directly on the input field.

Please advice.

Thank you for your support.

Regards

Submit with enter-press is not working if datepicker is inside form tag

Hi icehaunter,

great work on this component! However, I noticed an issue with this component. If it is being placed inside a form, it is not possible anymore to submit the form with a press of enter.

<form v-on:submit.prevent="save">
   <datepicker v-model="foo"/>
   <input type="text" v-model="bar">
   <button type="submit">Speichern</button>
</form>

This form can only be submitted by pressing the button. However, if I move the datepicker component above the opening form tag, I can submit the form if the text input is focused and I press enter.

Infinite recursion at component setup

Following #19 I copied this component source into my own assets folders, to ensure that vue-loader and babel are correctly configured.

I'm currently spawning the date picker as simply as this:

<template>
  <datepicker/>
</template>

Note that I tried many various options permutations before reducing to this, and using Chrome I get this error (Firefox ends up killing the tab because it formats Vue errors and stack in a way that it just crashes the tab console):

Uncaught RangeError: Maximum call stack size exceeded
    at callSyncHook (runtime-core.esm-bundler.js:5888)
    at applyOptions (runtime-core.esm-bundler.js:5662)
    at finishComponentSetup (runtime-core.esm-bundler.js:6507)
    at setupStatefulComponent (runtime-core.esm-bundler.js:6440)
    at setupComponent (runtime-core.esm-bundler.js:6380)
    at mountComponent (runtime-core.esm-bundler.js:4118)
    at processComponent (runtime-core.esm-bundler.js:4094)
    at patch (runtime-core.esm-bundler.js:3712)
    at mountChildren (runtime-core.esm-bundler.js:3894)
    at processFragment (runtime-core.esm-bundler.js:4054)

  | callSyncHook | @ | runtime-core.esm-bundler.js:5888
-- | -- | -- | --
  | applyOptions | @ | runtime-core.esm-bundler.js:5662
  | finishComponentSetup | @ | runtime-core.esm-bundler.js:6507
  | setupStatefulComponent | @ | runtime-core.esm-bundler.js:6440
  | setupComponent | @ | runtime-core.esm-bundler.js:6380
  | mountComponent | @ | runtime-core.esm-bundler.js:4118
  | processComponent | @ | runtime-core.esm-bundler.js:4094
  | patch | @ | runtime-core.esm-bundler.js:3712
  | mountChildren | @ | runtime-core.esm-bundler.js:3894
  | processFragment | @ | runtime-core.esm-bundler.js:4054
  | patch | @ | runtime-core.esm-bundler.js:3705
  | componentEffect | @ | runtime-core.esm-bundler.js:4211
  | reactiveEffect | @ | reactivity.esm-bundler.js:42
  | effect | @ | reactivity.esm-bundler.js:17
  | setupRenderEffect | @ | runtime-core.esm-bundler.js:4176
  | mountComponent | @ | runtime-core.esm-bundler.js:4134
  | processComponent | @ | runtime-core.esm-bundler.js:4094
  | patch | @ | runtime-core.esm-bundler.js:3712
  | mountChildren | @ | runtime-core.esm-bundler.js:3894
  | processFragment | @ | runtime-core.esm-bundler.js:4054
  | patch | @ | runtime-core.esm-bundler.js:3705
  | componentEffect | @ | runtime-core.esm-bundler.js:4211
  | reactiveEffect | @ | reactivity.esm-bundler.js:42
  | effect | @ | reactivity.esm-bundler.js:17
  | setupRenderEffect | @ | runtime-core.esm-bundler.js:4176
  | mountComponent | @ | runtime-core.esm-bundler.js:4134
  | processComponent | @ | runtime-core.esm-bundler.js:4094
  | patch | @ | runtime-core.esm-bundler.js:3712
  | mountChildren | @ | runtime-core.esm-bundler.js:3894
  | processFragment | @ | runtime-core.esm-bundler.js:4054
  | Show 170 more frames

It seems there's an infinite recursion somewhere.

Any ideas ? May be it's a problem with my dependencies versions ?

Time support

Hey,

Time support: HH:MM would be greatly appreciated.

Maybe I can help?

Thanks

Datepicker is hidden if parent is using overflow hidden

I migrated from a vue2 datepicker called vue-date-pick which used to automatically change its position and avoid being hidden by the parent.

Vue3-Datepicker does not seem to take this into account so I think this is a bug?

seems to be fixed with
.v3dp__popout{
max-width: inherit;
width: 100%!important;
}

Convert Fri Sep 17 2021 10:12:00 GMT+0530 (India Standard Time) to yyyy-mm-dd

I am using vuejs 3 and vue3-datepicker.

<datepicker  
      v-model="to_date"
      inputFormat="yyyy-MM-dd"
 />

my data method is :

data(){
    to_date: new Date(),
}

When I am selecting a date and printing {{this.to_date}}, it is printing in Fri Sep 17 2021 09:39:49 GMT+0530 (India Standard Time).

I want it in yyyy-MM-dd format.

How can I achieve this?

inputFormat prop not working

<datepicker v-model="form.date_of_birth" input-format="yyyy-MM-dd" />
<datepicker v-model="form.date_of_birth" inputFormat="yyyy-MM-dd" />

The component is not returning the specified input format, currently, when a date is picked, the v-model value returns like 2021-02-26T23:00:00.000Z and the value of the input likeSat Feb 27 2021 00:00:00 GMT+0100 (West Africa Standard Time)

Also, Is there a prop to set a display format for the value input and a different format for value of v-mode?

Typecheck error on v-model Date

Using

"vite": "^2.4.3",
"vue-tsc": "^0.0.24"
"vue3-datepicker": "^0.2.5",
"vue": "^3.0.5",

Running

yarn tsc --noEmit

Expected result

No compilation errors.

Actual result

src/views/Contact.vue:17:11 - error TS2741: Property '[Symbol.toPrimitive]' is missing in type '{ toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 38 more ...; toJSON: (key?: any) => string; }' but required in type 'Date'.

17           v-model="picked"
             ~~~~~~~

  node_modules/vue-tsc/typescript/lib/lib.es2015.symbol.wellknown.d.ts:114:5
    114     [Symbol.toPrimitive](hint: "default"): string;
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    '[Symbol.toPrimitive]' is declared here.
  node_modules/vue3-datepicker/dist/types/Datepicker.vue.d.ts:228:5
    228     modelValue?: Date | undefined;
            ~~~~~~~~~~
    The expected type comes from property 'modelValue' which is declared here on type 'Partial<{ placeholder: string; startingView: "day" | "month" | "year"; monthHeadingFormat: string; monthListFormat: string; weekdayFormat: string; inputFormat: string; weekStartsOn: number; disabled: boolean; clearable: boolean; typeable: boolean; minimumView: "day" | ... 1 more ... | "year"; }> & Omit<...> & Omit<....'

Not possible to display the datepicker without an input field

Currently it is not possible to display the datepicker without an input field. Also not possible to change the trigger to something other than <input> Also not possible to programmatically show / hide the datepicker.

How to make a global locale config, as well style

Hello,

I didn't see on docs a way to make a global configuration of locale and style. It's very annoying to add :locale every time i use a datepicker on a large app. Is there any way?

locale

when i change :locale="fr" it does not work

Example using disabledDates as a function?

I am trying to use disabledDates as a function so that I can disable weekends and a few other dates in the datepicker. I have done everything I can think of try and disable it but nothing ever happens. I would like to pass it off to a method in my component to do some processing.

I have tried searching the source code for predicate to see if I could work it out and I can even see a single reference to this parameter.

I am using version 0.2.5.

My apologies if I am being really dumb!

Many thanks
David

Browser build request

Can we get a browser build not reliant on npm install for this? I just want to be able to reference the CDN files and add the component like so....

  <script src="@Url.Content("~/lib/vue3-datepicker/vue3-datepicker.js")"></script>

    var app = Vue.createApp({
        components: {
            'speedrun-list-category': speedRunListCategoryVue
        }
    });

    app.component("datepicker", vuejs3Datepicker);

Typed date doesn't display formatted

Inline style goes against best practices - violates CSP

See https://www.thoughtco.com/avoid-inline-styles-for-css-3466846

Noticed this when the style was blocked by my content security policy:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

Zt @ vue3-datepicker.esm.js:165

I'm not entirely sure where this originates from.

to epoch conversion

The date picker gives dates in this format

Thu Apr 15 2021 00:00:00 GMT+0300 (East Africa Time)

Could you kindly have a property where one can change the date format and also an epoch format would be the best

For anyone needing datestring generated by the datepicker to epoch

      var someDate = new Date(dateString);
      someDate = someDate.getTime();

	upperLimit: {
	type: Date,
	required: false,
	},
	/**
	* Lower limit for available dates for picking
	*/
	lowerLimit: {
	type: Date,
	required: false,
	},