Vue2-datepicker version: 1.0.3
Vue version: 3.2.47
Browser: chrome

Steps to reproduce
Add :clearable="true" to your datepicker component and it does nothing

Expected behavior
I would expect it to show a button that says 'clear' and when clicked it clears the range / date you have previous selected

Actual behavior
No button is shown and nothing is added to the component

类似自定义成这样的效果

Vue-datepicker-next version: 1.0.3
Vue version: 3.0.0
Browser: chrome

Am I doing something wrong, or why are the events mentioned in the documentation not working and not found by intellisense?

When I initialize my date picker with a date, it does not appear until I manual pick the date.
Default-value does not work either.

Here is my code:

<Datepicker
         v-model:value="date"
        type="date"
         format="DD MMM 'YY"
         value-type="format"
         placeholder="To"
        @change="calcDate()"
         :disabled-date="
        (date) =>
         date <new Date() "
        />
...

data(){
return {
date:  "2023-01-11T23:00:00.000Z"
}}
````

Please @mengxiong10 or anyone, can you help with this? Is there something I am doing wrong? Thanks.

On the time picker, is it possible to achieve the infinite scroll like the HTML5 input time?
i.e from 0 scroll back to 59, 58 etc...?

Thank you

Vue-datepicker-next version: 1.0.2
Vue version: 3.2.26
Browser: Chrome and Safari

I use the vue2-datepicker

<link rel="stylesheet" href="https://unpkg.com/vue2-datepicker/index.css">

<script src="https://unpkg.com/[email protected]/dist/vue.runtime.min.js"></script>
<script src="https://unpkg.com/vue2-datepicker/index.min.js"></script>

but for vue 3 I use like this but it does not work. it shows on screen but it does not update value or show value

<link href="public/assets/vue-datepicker-next-1.0.2/index.css" rel="stylesheet">

<script src="public/assets/vue3/dist/vue.global.js"></script>
<script src="public/assets/vue-datepicker-next-1.0.2/index.js"></script>

components: {
      'date-picker':DatePicker,
}

Thank you

Feature Request:
I would like to request the addition of a new option in the DatePicker component to control the number of calendars displayed when using the "range" option. Currently, when the "range" option is enabled, two calendars are displayed side by side. However, I have a specific use case where I need to select a date range within the same month, and displaying two calendars is not optimal for this scenario.

Expected Behavior:
I propose adding a new option, such as singleCalendar, that, when set to true, will display only one calendar when the "range" option is used. This way, users can easily select a date range within the same month without the clutter of two calendars.

Environment:
Vue-datepicker-next version: 1.0.3
Browser: Google Chome 114.0.5735.199
Operating System: Windows 11

Note:
I understand that the current behavior of displaying two calendars is useful for selecting date ranges spanning across multiple months. However, the proposed singleCalendar option would be beneficial for cases where intra-month date selection is required. This feature enhancement would improve the usability and flexibility of the DatePicker component.

Expected Outcome:
With the singleCalendar option set to true and the disabled-date method notBeforeTodayAndOnlyThisMonth implemented, the DatePicker component will display only one calendar when using the "range" option. Additionally, it will allow users to select dates only from the current day and within the current month. This ensures that only valid dates within the same month can be chosen and eliminates the issue of displaying two calendars.

<DatePicker
  type="date"
  format="YYYY-MM-DD"
  valueType="format"
  placeholder="YYYY-MM-DD ~ YYYY-MM-DD"
  v-model:value="date"
  range
  :singleCalendar="true"
 :disabled-date="(date) => notBeforeTodayAndOnlyThisMonth(date, currentMonth)"
></DatePicker>


methods: {
  notBeforeTodayAndOnlyThisMonth(date, currentMonth) {
    const startOfMonth = new Date(date.getFullYear(), currentMonth, 1);
    const endOfMonth = new Date(date.getFullYear(), currentMonth + 1, 0);

    return !(date >= startOfMonth && date <= endOfMonth);
  },
},

Vue2-datepicker version: 1.0.2
Vue version: 3.2.26
Browser: Any

Hey, I think there is a problem with the step options;
If I use minuteStep="10", I can choose only 0 or 10
If I use minuteStep="5", I can choose 0, 5 or 55 ???

https://codesandbox.io/s/datepicker-pmmcfl

Vue2-datepicker version: 1.0.2
Vue version: nuxt 2.15(vue2)
Browser: Opera 85.0.4341.18

Steps to reproduce
Install nuxt js, and then install vue-datepicker-next

Actual behavior

Vue-datepicker-next version: 1.0.3
Vue version: 3

I want to test settings to run vue-datepicker-next with @vue/compat. But I can't make it build or run.
I have the same error : esbuild: Failed to install correctly

I run on windows 11 in WSL with node 18.16 and npm 9.5.1.
I run npm i then npm start and i got :

$ npm run start

> [email protected] start
> npm run dev


> [email protected] dev
> vite --host 0.0.0.0

/home/afantou/dev/Perso/vue-datepicker-next/node_modules/esbuild/bin/esbuild:2
throw new Error(`esbuild: Failed to install correctly
^

Error: esbuild: Failed to install correctly

Make sure you don't have "ignore-scripts" set to true. You can check this with
"npm config get ignore-scripts". If that returns true you can reset it back to
false using "npm config set ignore-scripts false" and then reinstall esbuild.

If you're using npm v7, make sure your package-lock.json file contains either
"lockfileVersion": 1 or the code "hasInstallScript": true. If it doesn't have
either of those, then it is likely the case that a known bug in npm v7 has
corrupted your package-lock.json file. Regenerating your package-lock.json file
should fix this issue.

    at Object.<anonymous> (/home/afantou/dev/Perso/vue-datepicker-next/node_modules/esbuild/bin/esbuild:2:7)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47

Node.js v18.16.0
failed to load config from /home/afantou/dev/Perso/vue-datepicker-next/vite.config.ts
error when starting dev server:
Error: The service was stopped
    at /home/afantou/dev/Perso/vue-datepicker-next/node_modules/esbuild/lib/main.js:1217:25
    at /home/afantou/dev/Perso/vue-datepicker-next/node_modules/esbuild/lib/main.js:609:9
    at Socket.afterClose (/home/afantou/dev/Perso/vue-datepicker-next/node_modules/esbuild/lib/main.js:587:7)
    at Socket.emit (node:events:525:35)
    at Socket.emit (node:domain:489:12)
    at endReadableNT (node:internal/streams/readable:1359:12)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)

What wrong i do ?
Thanks

Vue2-datepicker version: 1.0.3
Vue version: 3.3.4
Browser: Safari Version 16.6 (18615.3.12.11.2)

Steps to reproduce

1. Open a new tab in Safari.
2. Paste the URL https://mengxiong10.github.io/vue-datepicker-next/ into the address bar and press Enter.
3. Click on "Show the previous page" button in the Safari toolbar.
4. Click on "Show the next page" button in the Safari toolbar.

Expected behavior
See the values in the date pickers (format, date (Date Object), timestamp, DD/MM/YYYY) in the ValueType section.

Actual behavior
The values in the date pickers are blank.

I have another component and add the vue-datepicker-next

<template>
    <div class="col">
        <div class="row mb-4">
            <label class="col-form-label col-form-label-sm" :class="classLayoutLabel">{{ label }} <span v-if="required" class="text-primary">*</span></label>
            <div :class="classLayoutInput">
                <date-picker
                    :disabled="disabled"
                    valueType="format"
                    :formatter="momentFormat"
                    :value="modelValue"
                    :input-class="[error ? 'form-control form-control-sm is-invalid' : 'form-control form-control-sm']"
                    @update:value="updateDateInput"
                />
                <div class="invalid-feedback" v-if="error"> {{ error }}</div>
            </div>
        </div>
    </div>
</template>

<script>

import {reactive} from "vue";
import moment from "moment";
import DatePicker from 'vue-datepicker-next';

export default {
    name: "DatePickerForm",
    components: {DatePicker},
    props: {
        label: {
            type: String,
            default: "",
        },
        classLayoutLabel: {
            type :String,
            default: "col-sm-4"
        },
        classLayoutInput: {
            type: String,
            default: "col-sm-8"
        },
        modelValue: {
            type: [String, Number],
            default: "",
        },
        error: {
            type: String,
            default: ""
        },
        disabled: {
            type: Boolean,
            default: false
        },
        required: {
            type: Boolean,
            default: false
        }
    },
    setup(props, { emit }) {
        const updateDateInput = (newDate) => {
            emit("update:modelValue", newDate)
        }

        const momentFormat = reactive({
            stringify: (date) => {
                return date ? moment(date).format('DD/MM/YYYY') : ''
            },
            parse: (value) => {
                return value ? moment(value, 'DD/MM/YYYY').toDate() : null
            }
        })

        return {
            momentFormat,
            updateDateInput
        }
    }
}
</script>

<style scoped>

</style>

In another component I am using

<date-picker-form :label="Date" required v-model="user.date"/>

but is not working. When selecting the date it does not set it in the input (update the v-model)

What am I missing ?

Vue2-datepicker version: 1.0.2
Vue version: 3.2+
Vite version: 3.1+
Browser: chorme

Steps to reproduce
1.vite build
2.preview folder dist, page console.error
Uncaught TypeError: s.default.locale is not a function

the error from:

function Lc(e) {
var t = e.default;
if (typeof t == "function") {
var n = function() {
return t.apply(this, arguments)
};
n.prototype = t.prototype
} else
n = {};
return Object.defineProperty(n, "__esModule", {
value: !0
}),
Object.keys(e).forEach(function(r) {
var s = Object.getOwnPropertyDescriptor(e, r);
Object.defineProperty(n, r, s.get ? s : {
enumerable: !0,
get: function() {
return e[r]
}
})
}),
n
}
var Rc = {
exports: {}
};

const jc = Lc(Nc);
(function(e, t) {
(function(n, r) {
e.exports = r(jc)
}
)(Tl, function(n) {
function r(i) {
return i && typeof i == "object" && "default"in i ? i : {
default: i
}
}
var s = r(n)
, o = {
months: ["\u4E00\u6708", "\u4E8C\u6708", "\u4E09\u6708", "\u56DB\u6708", "\u4E94\u6708", "\u516D\u6708", "\u4E03\u6708", "\u516B\u6708", "\u4E5D\u6708", "\u5341\u6708", "\u5341\u4E00\u6708", "\u5341\u4E8C\u6708"],
monthsShort: ["1\u6708", "2\u6708", "3\u6708", "4\u6708", "5\u6708", "6\u6708", "7\u6708", "8\u6708", "9\u6708", "10\u6708", "11\u6708", "12\u6708"],
weekdays: ["\u661F\u671F\u65E5", "\u661F\u671F\u4E00", "\u661F\u671F\u4E8C", "\u661F\u671F\u4E09", "\u661F\u671F\u56DB", "\u661F\u671F\u4E94", "\u661F\u671F\u516D"],
weekdaysShort: ["\u5468\u65E5", "\u5468\u4E00", "\u5468\u4E8C", "\u5468\u4E09", "\u5468\u56DB", "\u5468\u4E94", "\u5468\u516D"],
weekdaysMin: ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"],
firstDayOfWeek: 1,
firstWeekContainsDate: 4,
meridiemParse: /上午|下午/,
meridiem: function(a) {
return a < 12 ? "\u4E0A\u5348" : "\u4E0B\u5348"
},
isPM: function(a) {
return a === "\u4E0B\u5348"
}
};
const l = {
formatLocale: o,
yearFormat: "YYYY\u5E74",
monthFormat: "MMM",
monthBeforeYear: !1
};
return s.default.locale("zh-cn", l),
l
})
}
)(Rc);

-- s.default.locale("zh-cn", l), --

because: function LC was diff from the old version vite2

Reproduction Link or Source Code

Expected behavior

Actual behavior

Vue2-datepicker version: [email protected]
Vue version: [email protected]
Browser: Chrome

Steps to reproduce
Set lang prop with a firstWeekContainsDate property:
<date-picker type="week" :lang="langObject"></date-picker>
formatLocale: { firstDayOfWeek: 1, firstWeekContainsDate: 1, }

If i change the firstWeekContainsDate nothing happens. In Vue 2 version works perfect

Reproduction Link or Source Code
https://codepen.io/bvidalneofox/pen/BaqmYLa

Expected behavior
Set the first week in the expected day

Actual behavior
First week not changes

What problem does this feature solve?

What does the proposed API look like?

I am using Nuxt 3 and using rollbar for error caching on production but rollbar returns this error in rollbar

V. Call is not a function. (In 'V.call(a,E,C)', 'V.call' is undefined)

this part of the code

f = (h, C, Y = !0) => {
  var _, V;
  const E = Array.isArray(h) ? h.map(b) : b(h);
  return (
    (_ = a["onUpdate:value"]) == null || _.call(a, E),
    (V = a.onChange) == null || V.call(a, E, C),
    Y && p(),
    E
  );
},

I tried to clone the repo and run it on my machine but got several errors.
First error got solved by updating Vite.
Now Vite is running but still having an error on the homepage.

Is there a contribution guide? or an installation steps?

Thanks for the awesome package.

node_modules/vite/dist/node/chunks/dep-59dc6e00.js:40662:10: ERROR: [plugin: vite:dep-scan] Failed to resolve entry for package "vue-datepicker-next". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "vue-datepicker-next". The package may have incorrect main/module/exports specified in its package.json.

需要对组建做修改，用"vue-datepicker-next": "git+https://github.com/mengxiong10/vue-datepicker-next.git#main"，引入项目，报如上错误

见 https://github.com/zjywill/DateTest/blob/master/package.json

What problem does this feature solve?
To embed the datepicker into the parent component,instead of rendering it as a popup element.

What does the proposed API look like?
The desired effect should be just like the example on the left (using the vue2 inline prop), but with the vue3 version there is no inline prop or any other prop to embed the datepicker into the parent component.

Vue-datepicker-next:

I upgraded from one of the older 4.x beta versions that I had been using and attempted to use the Calendar Component but really found it to be lacking in both the ability to style it as well as respond to other events like the change event that I had been using.

In the end I set :open="true" and ":append-to-body="false" which shows the calendar and then applied some horrible CSS hacks to get it to behave like the older inline CSS calendar, namely to hide the input and keep it from moving in relation to the input that is now hidden.

CSS applied

    $namespace: 'csd'; // <date-picker prefix-class="csd" />

    $default-color: #555;
    $primary-color: #1284e7;


    #TheIDofaContainingDiv {
        @import '~vue-datepicker-next/scss/index.scss';

        .csDatePickerWrap {
            /* height: 280px;
            width: 260px;*/
            padding-top: 5px;

            div.csd-datepicker {
                position: relative !important;
                width: inherit;
            }

            .csd-input-wrapper {
                display: none;
            }

            .csd-datepicker-popup {
                box-shadow: none;
            }

            .csd-datepicker-main.csd-datepicker-popup {
                top: 0 !important;
                position: relative !important;
                border:none;
            }
        }
    }

Vue-datepicker-next version:
1.0.3 (latest)

Vue version:
3.3.9

Browser:
N/A

Steps to reproduce
Run the test below (Vue Test Utils v. 2.4.1)

Reproduction Link or Source Code

import VueDatePickerNext from 'vue-datepicker-next'
import { mount } from '@vue/test-utils'

describe('vue-datepicker-next', () => {
  it('set the date value', () => {
    const firstDayOfYear = new Date(2023, 0, 1)

    const wrapper = mount(VueDatePickerNext, {
      props: { value: firstDayOfYear }
    })

    expect(wrapper.find('.mx-input').element.value).toContain('2023-01-01')
  })
})

Expected behavior
The test should pass without any warnings

Actual behavior
The test passes without any warnings under Vue 3.3.8, but after upgrading to Vue 3.3.9, the following warning appears in the console

[Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. 
  at <Bn value= 2023-01-01T00:00:00.000Z type="date" format="YYYY-MM-DD" > 
  at <Gt value= 2023-01-01T00:00:00.000Z > 
  at <Anonymous value= 2023-01-01T00:00:00.000Z ref="VTU_COMPONENT" > 
  at <VTUROOT>

What problem does this feature solve?

Sometimes there are cases when you need append a popup to any element, I think it would be nice to have such a prop

What does the proposed API look like?

props: {
  appendTo: string
}

<Teleport :to="appendTo">
  ...popup content
</Teleport>

i use
vue-datepicker-next: 1.0.3
vue: 3.3.4
vite: 4.3.9

the runtime error occurs only in production mode :
npm run build -> "build": "run-p type-check build-only",

when i deploy the "dist" folder to the production machine, then
this is error occurs in the browser console
TypeError: r.default.locale is not a function

the line " return r.default.locale("de", l)," causes this error

(function(t, e) {
    (function(n, a) {
        t.exports = a(Da)
    }
    )(It, function(n) {
        function a(s) {
            return s && typeof s == "object" && "default"in s ? s : {
                default: s
            }
        }
        var r = a(n)
          , o = {
            months: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
            monthsShort: ["Jan", "Feb", "März", "Apr", "Mai", "Juni", "Juli", "Aug", "Sep", "Okt", "Nov", "Dez"],
            weekdays: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
            weekdaysShort: ["So.", "Mo.", "Di.", "Mi.", "Do.", "Fr.", "Sa."],
            weekdaysMin: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
            firstDayOfWeek: 1,
            firstWeekContainsDate: 4
        };
        const l = {
            formatLocale: o,
            yearFormat: "YYYY",
            monthFormat: "MMM",
            monthBeforeYear: !0
        };
        return r.default.locale("de", l),
        l
    })
}
)(wa);
export {ya as i};

here my code snippet:

import DatePicker from 'vue-datepicker-next'
import 'vue-datepicker-next/locale/de'

  <date-picker
        :id="uuid + 'birthdate'"
        size="sm"
        value-type="YYYY-MM-DD"
        format="DD.MM.YYYY"
        title-format="DD.MM.YYYY"
        :disabled-date="disabledBirthdateRange"
        v-model:value="v$.formdata.birthdate.$model"
        :aria-describedby="uuid + 'birthdate_feedback'">
    </date-picker>

The calendar week number is not correct according to ISO 8601.
Week 1 should be January 3, 2022 but in the calendar week 1 is the last week of December 2021.

For uses of filters in my database it does not work for me because the week is advanced in your calendar.

https://espanol.epochconverter.com/semanas/2022#:~:text=La%20semana%20comienza%20el%20d%C3%ADa,la%20semana%20actual%20es%2033.

Vue-datepicker-next version:
Vue version: 3
Browser:

Reproduction Link or Source Code

Ive managed to change the width but is there already defined class so that content can be little bit bigger, also ive tried changing font size but it doesnt work? Ty

What problem does this feature solve?
Restore the focus and blur events that we had in Vue2. Is there any way to access those events?

What does the proposed API look like?

Vue2-datepicker version:
Vue version:
Browser:

Steps to reproduce

Reproduction Link or Source Code

Expected behavior

Actual behavior

Vue-datepicker-next version: 1.0.3
Vue version: 3.2.47
Browser: All

Steps to reproduce
Create a new vue-project (npm create vue@3). I did not select any specials, such as typescript, pinia, linting, testing... Just the bare minimal.

Add vue-datepicker-next.
Created a new route for the picker. And pasted the example:

<script>
  import DatePicker from 'vue-datepicker-next';
  import 'vue-datepicker-next/index.css';

  export default {
    components: { DatePicker },
    data() {
      return {
        time0: null,
        time1: null,
        time2: null,
        time3: null,
      };
    },
  };
</script>

<template>
  <div>
    <date-picker v-model:value="time0"></date-picker>
    <date-picker v-model:value="time1" type="datetime"></date-picker>
    <date-picker v-model:value="time2" valueType="format"></date-picker>
    <date-picker v-model:value="time3" range></date-picker>
  </div>
</template>

Everything works just fine and the picker works.

Adding @vue/compat as dependency and adding the changes for it in vite.config.js:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({

  plugins: [vue({
    template: {
      compilerOptions: {
        compatConfig: {
          MODE: 2
        }
      }
    }
  })],
  resolve: {
    alias: {
      vue: '@vue/compat',
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Then the pickers stop working.

When i'm debugging TableDate, the arguments passed in are two functions, not a TableDateProps object. They are coming from convertLegacyAsyncComponent:

vue-datepicker-next:1.0.2
Vue version:3.2.47
Browser: chrome

Steps to reproduce
Any time show the date picker, the browser will show the error message.

Vue-datepicker-next version: 1.0.2
Vue version: 3.2.45
Browser: Chrome (110.0.5481.100)

I found an issue(mengxiong10/vue2-datepicker#351) related to this problem, but I think the "closePopup" function disappeared. Is there any other way?

Vue2-datepicker version:
vue-datepicker-next
Vue version:
3.2.41
Browser:
Chrome 108.0.5359.124 (Official Build) (arm64)

Steps to reproduce
In a short browser window, where the contents' height is larger than the window's height, click on a daterange picker to show the panel, then scroll the window.

Reproduction Link or Source Code

Expected behavior
The panel should move along with the date range picker control, but it doesn't.

Actual behavior
The panel should move along with the date range picker control, but it doesn't.

What problem does this feature solve?
现在用到了周选择器，
当我选择了例如06-29至07-04这一周时，
我希望input面板上的显示值为2022-06-29 ~ 2022-07-04，或者根据date自定义显示内容，现在无法实现这个功能~~

What does the proposed API look like?

Vue2-datepicker version: 1.0.3
Vue version: 3.x
Browser:Google

Just as in vue2-datepicker, can we have the inline prop be restored?

Vue 3.4.16 broke a lot of components and the previous version worked fine (see this vuejs/core#10294)
But trying to rollback to 3.4.15 or lower results in a compilation error when executing the yarn command

If you remove from package.json
"vue-datepicker-next": "^1.0.3",
Then yarn works fine.
But I'm left without a datepicker....

Vue2-datepicker version: ^1.0.3
Vue version: 3.4.15

yarn-error.log
yarn-error.log

package.json

{
  "name": "ui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "dev": "vue-cli-service build --mode development"
  },
  "dependencies": {
    "@headlessui/vue": "^1.7.16",
    "@heroicons/vue": "^2.0.18",
    "@popperjs/core": "^2.11.8",
    "@tailwindcss/forms": "^0.5.7",
    "@vuelidate/core": "^2.0.3",
    "@vuelidate/validators": "^2.0.4",
    "axios": "^1.6.0",
    "core-js": "^3.8.3",
    "lodash": "^4.17.21",
    "papaparse": "^5.4.1",
    "pinia": "^2.1.7",
    "sass": "^1.69.0",
    "sass-loader": "^13.3.2",
    "sweetalert2": "^11.10.4",
    "tailwindcss": "^3.3.3",
    "vue": "3.4.15",
    "vue-axios": "^3.5.2",
    "vue-datepicker-next": "^1.0.3",
    "vue-multiselect": "^3.0.0-beta.3",
    "vue-router": "4",
    "webpack": "^5.88.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "autoprefixer": "^10.4.16",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "postcss": "^8.4.31",
    "vite": "^4.4.5"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

vue.config.js

process.env.VUE_APP_VERSION = require('./package.json').version;
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { defineConfig } = require('@vue/cli-service')

const folder = 'scms';

const mode = process.env.NODE_ENV || 'development';
const isDev = mode === 'development'
let webpackCfg = {
    devtool: (mode === 'development') ? 'inline-source-map' : false,
    mode: mode,
    plugins: [
        new HtmlWebpackPlugin({
            inject: false,
            filename: path.resolve('../springapp/src/main/webapp/WEB-INF/pages/' + folder + '/appjs.jsp'),
            template: 'jstemplate.ejs',
            isDev: isDev,
            minify: false
        }),
        new HtmlWebpackPlugin({
            inject: false,
            filename: path.resolve('../springapp/src/main/webapp/WEB-INF/pages/' + folder + '/appcss.jsp'),
            template: 'csstemplate.ejs',
            isDev: isDev,
            minify: false
        }),
    ],
    performance: {
        hints: false,
        maxEntrypointSize: 512000,
        maxAssetSize: 512000
    },
};

module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,
    productionSourceMap: false,
    filenameHashing: false,
    configureWebpack: webpackCfg,
    css: {
        sourceMap: isDev,
        loaderOptions: {
            sass: {
                additionalData: '@import "@/scss/styles.scss";'
            }
        }
    },
    chainWebpack: (config) => {
        config.plugin('define').tap((definitions) => {
            Object.assign(definitions[0], {
                __VUE_OPTIONS_API__: 'true',
                __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: isDev
            })
            return definitions
        })
    }
})

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})

// babel.config.js
module.exports = {
    presets: [
        [
            '@vue/cli-plugin-babel/preset',
            {
                targets: { esmodules: true },
                polyfills: []
            }
        ]
    ]
}

Browser:
Firefox

Steps to reproduce
yarn

Reproduction Link or Source Code

Expected behavior
compile fine

Actual behavior
error An unexpected error occurred: "expected hoisted manifest for "vue-datepicker-next#vue#@vue/server-renderer#@vue/compiler-ssr"".

Vue-datepicker-next version: vue-datepicker-next
Vue version: v3
Browser: Google Chrome / Version 105.0.5195.127

It is possible to import vue-datepicker-next via VITE?
I used npm install vue-datepicker-next --save, then I imported in vite.config.js like import DatePicker from 'vue2-datepicker'; but is not working. Is there any other way of doing it?

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import moment from 'moment';
import DatePicker from "vue2-datepicker";

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/appErp.css',
            'resources/css/appSite.css',
            'resources/js/appErp.js',
            'resources/js/appSite.js',
        ]),
    ],
});

package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^0.25",
        "laravel-vite-plugin": "^0.2.1",
        "lodash": "^4.17.19",
        "moment": "^2.29.4",
        "postcss": "^8.1.14",
        "sass": "^1.53.0",
        "vite": "^2.9.11",
        "vue2-datepicker": "^3.11.0"
    },
    "dependencies": {
        "@fortawesome/fontawesome-free": "^6.1.1",
        "@popperjs/core": "^2.11.5",
        "bootstrap": "^5.1.3",
        "bootstrap-icons": "^1.9.0"
    }
}

in myfile.blade.php
<date-picker valueType="format"></date-picker>

After running npm run build, everything is ok, I have no errors.

Desktop:
OS: Windows 10
Browser: Chrome Version 103.0.5060.134
Version Laravel: 9.19
Version moment: 2.29.4

Vue-datepicker-next version: 1.0.3
Vue version: 3.2.45
Browser: Chrome 114.0.5735.110

Can I change my week selection from monday to saturday. Default is from sunday to saturday ?

我希望日期选择的月份是中文，但是现在文档中无法看到怎么设置为中文。

What problem does this feature solve?
Clearing the picker by clicking the x button will set the value to null when bound. My use-case is that the date will be used as a filter to query via REST. This is being converted to JSON via JSON.stringify. I would like to get rid of the nulls automatically without having to set all object property to its default value, which in my case, is blank string.

What does the proposed API look like?
clearDefault: ""
clearDefault: null

What problem does this feature solve?
Mimics vue2-datapicker API more precisely;
Allows us to know which type of change triggered the event

What does the proposed API look like?
Same as in vue2-datapicker: https://github.com/mengxiong10/vue2-datepicker#events
[change event] Callback Arguemnts: date, type('date'|'hour'|'minute'|'second'|'ampm')

"vue-datepicker-next": "^1.0.2"
"vue": "^3.0.0",
Browser: All of them

Thank you very much for providing this calendar libary!

Steps to reproduce

1. Visit: https://vue-vg3x9m.stackblitz.io
2. See Start/Enddate
3. But range is not selected in Calendar
   

Reproduction Link or Source Code
https://stackblitz.com/edit/vue-vg3x9m?file=src/App.vue

Expected behavior
A set value in the v-model:value should set the calendar range selected in the Calendar.

Actual behavior
Range is only set by manual clicking and not preset values.
I saw the events, especially the update:value, but have no clue if this will help in my case as value does not change initially.

Vue2-datepicker version: "[email protected]"
Vue version: 3.2.45
Browser: Chrome

Steps to reproduce
<date-picker name="dueDate" format="YYYY-MM-DD" value-type="YYYY-MM-DD" defaultValue="2023-07-01" :value="dueDate" @change="handleDateChanged" />

When you open the date picker in North America it defaults to the June Calendar month not July. This however works as expected in Australia. I'd guess its a timezone thing, but not sure how to solve on our end. I checked through all the closed issues and couldn't see something like this already.

Edit to add: You can test this in Chrome Dev Tools by clicking the 3 dots, more tools, sensors, and set the location override to San Fransisco.

Reproduction Link or Source Code
https://codesandbox.io/s/patient-meadow-gkuppz?file=/src/App.vue:61-98

Expected behavior
Opens to July in all locations/timezones

Actual behavior
Opens to June in North America (PST)

Vue-datepicker-next version: 1.0.2
Vue version: 3.2.37
Browser: Chrome

Reproduction Link or Source Code

Hey, thanks for creating this awesome library. I am trying to use this with Nuxt3 but it seems that it doesn't support SSR as the error mentions that it cannot find document. Am I correct in my understanding and if so, are there any plans to make it SSR friendly?

Thanks!

is it possible to keep disabled date like in vue2-datepicker?
currently datepicker will set empty if the date is disabled, i want to set default date even it is disabled.

<script setup>
import { ref } from "vue";
import DatePicker from "vue-datepicker-next";

const date = ref("2023-03-01");

function notBeforeToday(date) {
  return date < new Date(new Date().setHours(0, 0, 0, 0));
}
</script>

<template>
  <date-picker
    v-model:value="date"
    :first-day-of-week="1"
    :clearable="false"
    :editable="false"
    :disabled-date="notBeforeToday"
    type="date"
    format="MMM, DD YYYY"
    valueType="YYYY-MM-DD"
  ></date-picker>
</template>

thank you.

Vue2-datepicker version: 1.0.2
Vue version: 3.2.13
Browser: Chromium110

Steps to reproduce
When using the verify overlay component, the overlay is closed because popup is created outside the overlay element.

Reproduction Link or Source Code
https://codesandbox.io/s/vuetify3-forked-7pixvp?file=/src/components/HelloWorld.vue

Expected behavior
The datepicker pop-up closes when you select a date from the pop-up.

Actual behavior
When you select a date from the datepicker pop-up, both the overlay and the datepicker are closed because the date picker pop-up is recognized as a click element outside the overlay.

will you add inline mode ?

What problem does this feature solve?
问题如标题所述~~

What does the proposed API look like?
期望rang设置为true时，当选为日期时，有一个参数可以设置默认的时分秒时 00:00:00 - 23:59:59

What problem does this feature solve? : Keyboard accessibility issues

Hello everyone! Could you please add "tabindex" for each date? For now all buttons are available, but, not a dates :(

Hello!
In the vue2-datepicker package there is a possibility to set max difference between calendars in range mode:

Datepicker.CalendarRange.computed.calendarMaxDiff = function () {
    return 1;
};

As a result, when I scroll through, for example, the left calendar, the right one is scrolled simultaneously with it. And the difference between them is always 1 month. This is very convenient for me

There is no such computed property in vue3 version of CalendarRange file anymore. And I haven't found another way to achieve this behavior.

It would be great if such an opportunity appeared in the package for vue3. Thank you in advance!