charliekassel / vuejs-datepicker Goto Github PK

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.

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
Module not found: Error: Cannot resolve module 'stylus-loader' in ../node_modules/vuejs-datepicker/src/components
@ .//vuejs-datepicker/src/components/Datepicker.vue 2:0-172

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?

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 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?

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

just like attribute : v-model in vue

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

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.

when using language: zh, the .day-headerwill be break， the last word will be droped.
using this to fixed it.

span.cell.day-header {
    white-space: nowrap;
  }

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')

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, 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?

It should be 'Okt' instead of 'Oct' (Oktober is with a 'k' in Dutch see original value :) ).

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!

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.

Would be good a live demo on webpackbin.

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?

The moment.js library could be implemented for formatting dates and time zones. http://momentjs.com/.

What do you think?

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.

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!

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.

To prevent errors like this:

ERROR in .//vuejs-datepicker/src/components/Datepicker.vue
Module not found: Error: Cannot resolve module 'stylus-loader' in ../node_modules/vuejs-datepicker/src/components
@ .//vuejs-datepicker/src/components/Datepicker.vue 2:0-172
#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 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,

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)

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.

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?

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.

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

When setting the disabled 'to' and 'from' dates and making them years apart the picker wont allow switching between years in the fully zoomed out view.

Using Vue2

If you disable all dates in Feb and that's the current month.... it'll open to show Feb. Shouldn't it default to the min selectable month's view ?

On change to vue 2, examples not works.

Changed "ready" to "mounted" and

Window isn't defined when I use it with Vue 2 SSR :(
ReferenceError: window is not defined

Anyone else getting this error?

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(…)

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

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!

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

Any chance of having a weekday displayed along with the week? ISO and simple.

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.

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>

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.

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.

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>

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.

now I using vm.$children[0].$data.formattedvalue to get the formatted value , did there any quick method to get value?

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.

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.