It will be a nice addition to the plugin to allow the user to also type the date in the input

Hello
Thanks for the great component.

I'm trying to decrease height of the date picker from 50px to 40px.
I've added scoped style on my vue component. such as:

<style scoped>
.v-calendar .input-field input {
    height: 40px;
}
</style>

but it doesn't apply. What am I doing wrong?

Tesekkurler 😊

I use this library together with the bootstrap modal, and after I publish this input form it exceeds the smartphone screen, whereas if it is opened on a laptop there is no problem.

easier to view, copy and paste the complete code to use the component.

Datepicker tiplerine tıklayınca bir digeri kapanmıyor. Sayfa yana doğru genişliyor.

If we can make the main rectangle editable - we can type date and interact with calendar automatically ? Is this possible and how realistic ?

Selam :) https://edisdev.github.io/vue-datepicker-ui/ sayfası 404 dönüyor

The property showClearButton doesn't work. I'm passing it but as you can see it is recognized as attributes and not as props.

datePicker(v-model="myValue" :showClearButton="true")

It would be nice to control the dark mode via the prop with true, false or "dark", "light".

How about an option to close the popup when selecting a date?

example:

<datepicker v-model="date" :lang="datePicker.lang" :date-format="datePicker.dateFormat"></datepicker>

...

  data() {
    return {
      date: '01.01.2019',
      datePicker: {
        'lang': 'de',
        'dateFormat': {
          'day': '2-digit',
          'month': '2-digit',
          'year': 'numeric'
        }
      }
    }
  },

  mounted() {
    setTimeout(function() {
      this.date = '31.12.2018'
    }, 1000)
  },

The Inputfield still shows '01.01.2019' after the timeout.
When you open the datepicker Jan 2019 is visible, it better should show Dec 2018.

Hi, thank you for this awesome work.

I have just a question, is there any event where the date is selected in the datepicker ?
I tried to find the response in the documentation but there is nothing about events.

Thank you again.

on persian (fa) language is not working, because ,
first day of week should be : saturday
and also
the years should be change (for example : 2020 --> 1399).

how can i resolve it?

The Issue

When I try to install the package via yarn, it aborts with the following message:

YN0000: ┌ Resolution step
➤ YN0001: │ Error: vue-datepicker-ui@vue3 isn't supported by any available resolver
    at yf.getResolverByDescriptor (C:\Users\[user-name]\AppData\Local\Volta\tools\image\yarn\3.4.0\bin\yarn.js:391:1647)
    at yf.bindDescriptor (C:\Users\[user-name]\AppData\Local\Volta\tools\image\yarn\3.4.0\bin\yarn.js:391:1036)   
    at Z (C:\Users\[user-name]\AppData\Local\Volta\tools\image\yarn\3.4.0\bin\yarn.js:439:6900)
➤ YN0000: └ Completed
➤ YN0000: Failed with errors in 0s 48ms

Used tools

• yarn v3.4.0
• node v16.0.0

Hi. I'm trying to use this plugin in Azerbaijan language but the days in the calendar shows in English. How can i show the days in Azeri lang?

There's no 31st of December 2020

If you have a start date set in the range calendar picker. Is there a way so that you can only go ahead for the end date not previous dates

I don't see a example on how you can fire events

if i do this

<Datepicker range v-model="selectedDate" lang="en" @reset='clearCalendar()'/>

reset doesn't get fired. Please let me know if I am missing something

Hi! I'm trying to use Datepicker with custom filter parameters, without using v-model. But it doesn't work, it even doesn't set the initial value.

import { onMounted, ref } from 'vue';
import VueDatepickerUi from 'vue-datepicker-ui';

var date = ref(new Date());

onMounted(() => {
  console.log('onMounted', date.value);
});

function update(date) {
  date.value = date;
  console.log(date);
}

function toISODate(date) {
  return date.toISOString().slice(0, 10);
}

<template>
  <div>
    <p>{{ toISODate(date) }}</p>
    <p>
      <VueDatepickerUi lang="en" :value="date" @change="update" />
    </p>
    <p>
      <VueDatepickerUi lang="en" :value="date" update:modelValue="update" />
    </p>
  </div>
</template>

I've found different code solutions.
This is what I have after the install via npm npm install vue-datepicker-ui@vue3 --save:

emitInputAction: function emitInputAction() {
      if (JSON.stringify(this.modelValue) !== this.selectedDate) {
        this.$emit('update:modelValue', this.selectedDate);
      }
      // other code ...
    },

And this is how it looks at the last (8d1005b) commit:

You can check my example at the stackblitz.com:
https://stackblitz.com/edit/vitejs-vite-dhczkx?file=src%2FApp.vue

Hello! I believe I've found a usability issue. When there are multiple calendars together, they overlap because there isn't a blur event on exiting the input to close the open calendar. I tried to close it on my end, but I think it would be more appropriate to correct it in the component. I believe it would be something like this in the .content div:
@blur="isShowPicker = false"

Hello. When i am adding import Calendar from 'vue-datepicker-ui' prooject crushs with this error

error during render : /
/Library/WebServer/projects/finaxe/node_modules/vue-datepicker-ui/src/components/calendar.vue:1
(function (exports, require, module, __filename, __dirname) { <template>
                                                              ^

SyntaxError: Unexpected token <
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at r (/Library/WebServer/projects/finaxe/node_modules/vue-server-renderer/build.js:8341:16)
    at Object.vue-datepicker-ui (webpack:/external "vue-datepicker-ui":1:0)
    at __webpack_require__ (webpack/bootstrap:19:0)
    at Module../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./src/components/blanks/RangeTime.vue?vue&type=script&lang=js& (server-bundle.js:2718:75)
    at __webpack_require__ (webpack/bootstrap:19:0)
    at Module../src/components/blanks/RangeTime.vue?vue&type=script&lang=js& (server-bundle.js:13828:192)
    at __webpack_require__ (webpack/bootstrap:19:0)