mengxiong10 / vue-datepicker-next Goto Github PK
View Code? Open in Web Editor NEWA datepicker / datetimepicker component for Vue3
Home Page: https://mengxiong10.github.io/vue-datepicker-next/
License: MIT License
A datepicker / datetimepicker component for Vue3
Home Page: https://mengxiong10.github.io/vue-datepicker-next/
License: MIT License
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)
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.
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+
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: 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
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 :(
What problem does this feature solve?
问题如标题所述~~
What does the proposed API look like?
期望rang设置为true时,当选为日期时,有一个参数可以设置默认的时分秒时 00:00:00 - 23:59:59
Vue2-datepicker version:
Vue version:
Browser:
Steps to reproduce
Reproduction Link or Source Code
Expected behavior
Actual behavior
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?
Just as in vue2-datepicker, can we have the inline
prop be restored?
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
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?
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
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?
What does the proposed API look like?
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
Vue2-datepicker version: 1.0.3
Vue version: 3.3.4
Browser: Safari Version 16.6 (18615.3.12.11.2)
Steps to reproduce
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.
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.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 ???
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);
},
},
will you add inline mode ?
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.
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>
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
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.
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.
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: [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
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
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.
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?
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:
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": "^1.0.2"
"vue": "^3.0.0",
Browser: All of them
Thank you very much for providing this calendar libary!
Steps to reproduce
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.
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!
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
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!
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?
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 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
);
},
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>
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 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
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')
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.