charliekassel / vuejs-datepicker Goto Github PK
View Code? Open in Web Editor NEWA simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations
License: MIT License
A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations
License: MIT License
Use case: User has selected a date, but want's to remove/clear the date from the input.
An X or cross icon that removes the date when clicked would be great. Happy to work on this if required.
When I try to use v-model like in example <datepicker v-model="state.date" name="uniquename"></datepicker>
, I'm getting error in console v-model does not support element type: DIV
Vue 1.0.28, Datepicker 0.6.2
So when you click the Datepicker input the calendar pops out. I want to change what month is shown before its opened (on page load), but not have a date in the input through the :value
.
Say I want to show May 1990
but still have my placeholder text showing.
Also changing the input from readonly would also be helpful and striping the styles so its more open to other frameworks.
I can make a pull request with these changes if needed. Just some ideas is all.
Hey, is there a way to set the formats of this component?
I'd like to change the default display format to Y-m-d and the sent format to Y-m-d too, without the timezone info attached. Thanks.
Hi!
When i select the date, the output is off by 1 day. I assume it is a timezone issue however i am unable to find any solution. Here is the code:
// In template
<datepicker placeholder="Select date of shoot"
:value.sync="formInputs.date"
:format="format"
name="date"
// The data
data() {
return {
formInputs: {
date: new Date()
},
format: 'd MMMM yyyy',
}
}
And the screenshot:
I appreciate any help i can get :)
Thank You!
I am using the dateformat as YYYY-mm-dd. But the input field size is bit long. It would be nice if I have the an feature to send input size to send as a prop.
Hi, I can't currently see any way to disable the picker entirely. I can disabled dates but theres no way to stop the user from even being able to open the calendar window?
It's annoying to pass language each time you try to use the date picker.
Vue-i18n use a config var to fetch the language currently used by the user.
Can you default the language to the config value if it's in the config ?
I noticed that August 3d, 2016 is displayed as Thursday http://imgur.com/a/DwOda but it should be Wednesday.
Any chance of having a weekday displayed along with the week? ISO and simple.
Currently there is no way specify custom css classes to be applied to the input
element. This makes it inconvenient to integrate the date picker with existing css frameworks, as separate styles must be specified for the datepicker input.
It would be nice if an option were provided to pass custom classes to the input element.
when using language: zh
, the .day-header
will be break, the last word will be droped.
using this to fixed it.
span.cell.day-header {
white-space: nowrap;
}
On change to vue 2, examples not works.
Changed "ready" to "mounted" and
removed "selected" from first element.I tried doing
div.wrapper-class input{
border-style:solid !important;
border-color:#5d5d5d !important;
border-width:1px !important;
}
But it won't work. I don't like the way the borders of the input box look. I'm using this component inside another .vue
component.
It would be great if it was possible to specify from which day should the week start.
I looked into the component's code and it seems it was not considered, am I wrong?
Hi there,
I have started a new project based on Vue Webpack Boilerplate: https://github.com/vuejs-templates/webpack
When I tried to import the Datepicker component to my project I received the following error:
ERROR in ./
/vuejs-datepicker/src/components/Datepicker.vue/vuejs-datepicker/src/components/Datepicker.vue 2:0-172
Module not found: Error: Cannot resolve module 'stylus-loader' in ../node_modules/vuejs-datepicker/src/components
@ ./
In fact, the Datepicker project uses Stylus to style the component.
Would it be reasonable to include stylus and stylus-loader as dependencies in the package.json of the Datepicker project?
Hello,
First, thanks for this component, it's really nice !
Using french language, the month of December seems to be formatted with the day abbreviation from the letter "D".
Issue is only for french language I think because of the month's accent "Décembre".
I quickly changed the demo link to show you the result : demo here
12 Lunécembre 2016
instead of 12 Décembre 2016
(Lun is the abbreviation of Lundi -> Monday in english)
currently only Date
and null
are allowed to be passed to value, but usually what I get are strings, which is quite inconvenient:
let user = await this.$http.get('/settings/profile')
let birthday = new Date(user.birthday)
user.birthday = +birthday ? birthday : null // make sure date is valid
this.user = user
if string values are allowed, the above code could be reduced to
this.user = await this.$http.get('/settings/profile')
if i change the :value from the datepicker, the :value in the parent not updated;
I am not sure why you deleted usage examples from the README but now, as an end-user, I do not know how to use the component in my applications.
Anyone else getting this error?
Will it support to react if we switch the language dynamically?
<datepicker :language="myLanguage"></datepicker>
which myLanguage will be changed by pressing the language switch button
I changed the translation to be one of computed properties,
this is ok for switching the language in the calandar but only the date in the textbox does not change
Thanks!
Hello,
In order to use vuejs-datepicker with some custom time picker, datepicker should not change time component of the date object. Is this a feature for which you would accept a pull request?
I suggest creating property like keepTime
or preserveTime
.
I have just sent your project to the Awesome Vue list vuejs/awesome-vue#349
so it would be good if you add a description to the repository. It will help people to find it.
My suggestion is:
A simple date picker component for Vue.js with inline mode support
I mentioned inline mode here because I did not find it in any other similar projects.
Hello, is there any event triggered when the months / years are being navigated? i.e. when changing months or years.
Hi, I'm using Laravel 5.3 and vue 2.
I added Datepicker.vue from src folder into resources/assets/js/components and added utils folder and there I added DateLanguages.js and DateUtils.js.
I added Vue.component('datepicker', require('./components/Datepicker.vue')); into my app.js file and when I compile it with gulp it gives me error. Module not found: Error: Can't resolve 'stylus-loader' in
Can you help?
I'm using vee-validate (http://vee-validate.logaretm.com/) for my field validation but I'm not able to use it on date picker, vee-validate is used like this
<input v-validate data-vv-rules="required" data-vv-as="postal code" :class="{'form-control': true, 'form-control-danger': errors.has('date_from') }" name="date_from" type="text" placeholder="Enter Pick Date.." v-model="date_from">
The problem is when I used it on datepicker it does not apply on the input field, it only goes the div wrapper of the input.
It could a nice feature if we are able to use some props like this on vuejs-datepicker
I'm using vue 2.0.3 and just testing the most basic setup, upon clicking in the input box, I get an error: Uncaught TypeError: this.$dispatch is not a function(…)
Hi @charliekassel,
Could you please include a license file to the project?
Please read more here https://help.github.com/articles/open-source-licensing/#what-happens-if-i-dont-choose-a-license
Thanks so much.
Konstantin
just like attribute : v-model in vue
Would be good a live demo on webpackbin.
Hi,
Disabled dates are being passed via from, to and array. Is it possible to have it validated via function too? If i can pass a function into it like Flatpickr does with disabled dates.
It should be 'Okt' instead of 'Oct' (Oktober is with a 'k' in Dutch see original value :) ).
<datepicker inputClass="form-control" v-model="bookingDate"></datepicker>
It's assigning a "NaN" value to the wrapper class...
<div class="datepicker" inputclass="NaN"><input type="text" readonly="readonly">....
The readme shows "import DatePicker from 'vuejs-datepicker';". The vale "DatePicker" but "Datepicker" does work because that is the name of the template file. The readme file needs to be corrected.
Window isn't defined when I use it with Vue 2 SSR :(
ReferenceError: window is not defined
I'am getting the error. I am using vue2.0.
[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in component <datepicker>)
TypeError: e.$el.querySelector is not a function
I am using it this way after installing from npm.
<template>
<datepicker></datepicker>
</template>
<script>
import Datepicker from 'vuejs-datepicker'
export default {
components : {
Datepicker
}
}
</script>
now I using vm.$children[0].$data.formattedvalue
to get the formatted value , did there any quick method to get value?
i want to click a button then popup the datepicker from the bottom, but ur datepicker default datepicker>input focus then show the datepicker panel, hwo can i use it to satisfy my purpose?
To prevent errors like this:
ERROR in ./
/vuejs-datepicker/src/components/Datepicker.vue/vuejs-datepicker/src/components/Datepicker.vue 2:0-172
Module not found: Error: Cannot resolve module 'stylus-loader' in ../node_modules/vuejs-datepicker/src/components
@ ./
#7
And this:
ERROR in static/js/vendor.9868ef83011ecc7ffbea.js from UglifyJs
SyntaxError: Unexpected token: keyword (default) [./~/vuejs-datepicker/src/utils/DateLanguages.js:1,0]
#14 (comment)
And after discussing them with @yyx990803, who gave the idea of pre-compiling *.vue files of the component to plain JS vuejs-templates/webpack#216 (comment), I suggest considering this possibility and solving two above problems with one stone.
Hi,
Is there a property that exposes the enabled days, or at least the first and last enabled days?
Reason is I want to set the :value to the first enabled day and it can be tricky to calculate, but since the datepicker already calculates that I thought it would make sense to expose that somehow..
Thanks in advance!
thanks for your datepicker, and I got a problem in vue2
vue.common.js:2611[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in component ).
I just use it in a *.vue
<template lang="pug">
Datepicker
</template>
<script>
import Datepicker from 'vuejs-datepicker'
export default {
components : {
Datepicker
}
}
</script>
Hey there!
I'm trying to get a range of dates to highlight (for example 11/10/16 - 12/3/16).
However, when I try to do something like:
highlighted: { from: new Date(2016, 10, 10), to: new Date(2016, 11, 3) // Highlight all dates up to specific date }
All dates are highlighted. Is this functionality not supported or am I just doing something silly?
Is there a way of programmatically opening the datepicker?
I was trying to call the component by adding ref="myComponent"
and then calling it from the parent like this.$refs.myComponent.showCalendar()
but that doesn't seem to work.
The moment.js library could be implemented for formatting dates and time zones. http://momentjs.com/.
What do you think?
Hi there and thanks for your great work!
I just quickly want to point out that at all points in all examples and demos the words from
and to
should be exchanged for disabled dates.
from
== the start of the dates that can not be picked
to
== the end of the dates that can not be picked
date date date [disabled:from 2017-0-4] date date date [disabled:to 2017-0-8]
Hello @charliekassel!
Thank you for your nice extension! Could you please review this bug report? When I'm trying to use this code:
<div class="form-group">
<label class="control-label"
for="sign-up-form-birthday">Birthday</label>
<datepicker inputClass="form-control input-lg"
id="sign-up-form-birthday"
name="birthDay"
placeholder="Your birthday"
v-model="registerFormData.birthDay"
format="dd MMMM yyyy"
monday-first="true"/>
<span class="help-block"></span>
</div>
I'm experiencing the following issue:
[Vue warn]: Invalid prop: type check failed for prop "mondayFirst". Expected Boolean, got String.
(found in component <datepicker>)
My packages are:
"devDependencies": {
"axios": "^0.15.3",
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-transform-object-rest-spread": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"bootstrap-loader": "^2.0.0-beta.20",
"bootstrap-sass": "^3.3.7",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "2",
"file-loader": "^0.10.0",
"jquery": "^3.1.1",
"jwt-decode": "^2.1.0",
"node-sass": "^4.5.0",
"nodemon": "^1.11.0",
"resolve-url-loader": "^1.6.1",
"sass-loader": "^4.1.1",
"sleep": "^5.1.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vee-validate": "^2.0.0-beta.21",
"vue": "^2.1.10",
"vue-loader": "^10.2.0",
"vue-router": "^2.2.0",
"vue-template-compiler": "^2.1.10",
"vuejs-datepicker": "^0.5.5",
"vuex": "^2.1.1",
"webpack": "^2.2.1"
},
"dependencies": {
"bcrypt": "^1.0.2",
"body-parser": "^1.16.0",
"boom": "^4.2.0",
"ejs": "^2.5.5",
"express": "^4.14.1",
"helmet": "^3.4.0",
"jsonwebtoken": "^7.2.1",
"mysql": "^2.13.0",
"sequelize": "^3.30.1",
"sequelize-cli": "^2.5.1",
"source-map-support": "^0.4.11"
},
Cheers,
@resurtm
Currently "2015-01-12T18:30:00.000Z" is the default format that is returned by the datepicker. format
prop which is available now only changes the format in the input box. Would love to see the feature in the future.
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.