Code Monkey home page Code Monkey logo

vue-datepicker-next's Issues

[Bug] 1st of month defaultValue often shows up as previous month depending on timezone.

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)

[Question] Show disabled date in input form

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.

[Bug] when the program environment is vite3, after build page is console.error(Uncaught TypeError: s.default.locale is not a function)

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

[Bug] :clearable="true" does not work

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

[Question] How to make datepicker larger?

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

Option to set field value to empty strings when cleared (clearable = true)

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

[Question] How can I use in it in simple website using CDN?

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

[Bug] Values not displayed after next/prev page navigation in Safari 16.6

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.

vue-datepicker-next 2023-09-07 11 AM-43-07

format属性可否增加函数类型?

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?

[Feature request] Option to Display Single Calendar when using "range" for Intra-month Date Selection

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);
  },
},

[Bug] Issue with datepicker pop-up being added outside overlay element

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
image

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.

[1.0.3] TypeError: r.default.locale is not a function

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>

[Question] Is there a contribution guide?

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.

[Feature request] Inline prop for vue3 version.

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.
image

adding vue-datepicker-next in another component not working

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 ?

[Bug] firstWeekContainsDate prop not working

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

[Question] 用Git链接引入项目报错

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

Datepicker does not show initialized date

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.

[Bug] Vue less than 3.4.16 compilation failed

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"".

[CalendarComponent] doesn't support prefix-class or @change event

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;
            }
        }
    }

[Bug] error message showing vue3.2.47

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.

Screenshot 2023-03-06 095422

[Bug] Initial v-model:value doesn't work with date library

"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
    Bildschirmfoto 2022-03-04 um 18 49 11

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.

Possibility to set max diff between range calendars

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!

[Question] How to build/run project .

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

Support for Server Side Rendering with Nuxt3

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!

[Question]

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?

Screenshot 2023-06-07 at 12 25 18

Screenshot 2023-06-07 at 12 26 15

Screenshot 2023-06-07 at 12 31 19

[Bug]

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.

Error in Nuxt 3 in rollbar

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
  );
},

rollbar error

[Bug] Console warnings after upgrading from Vue 3.3.8 to 3.3.9

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>

[Bug] Throws error related to TableDate when combined with @vue/compat

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.

Screenshot 2023-04-27 at 09 52 44

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

Screenshot 2023-04-27 at 11 46 26

[Question] Import vue-datepicker-next via VITE

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.