I am having the issue with v-model because when I apply new v-model variable it, the component doesn't pass the data to it and I have noticed that the field already has v-model variable which is "value" but when I try top print out this data and selecting new date it doesn't work... How should I do this part?

I'm reading docs at https://chmln.github.io/flatpickr/events/ but can't figure out how to manage events.

I tried this

<template>
    <datepicker :config="options" v-on:on-open="myMethod"></datepicker>
</template>

and this

<template>
    <datepicker :config="options" v-on:onOpen="myMethod"></datepicker>
</template>

and this

<template>
    <datepicker :config="options" @onOpen="myMethod"></datepicker>
</template>

Nothing happens :(

What am I missing?

I can't use datepicker in the modal component.
Because the modal component will cover the datepicker.

There is my screenshot:

Can i get any suggestions?
Thanks.

Hi, thanks for this package.

I can't make works the data-toggle neither data-clear buttons on a second datepicker added on same view.

      <datepicker
        id="start_at"
        name="start_at"
        :config="{
          wrap: true,
          dateFormat: 'd-M-Y h:i:S',
          allowInput: true,
          enableTime: true
        }"
        readonly>

        <a class="button" data-toggle><i class="fa fa-calendar"></i></a>
        <a class="button" data-clear><i class="fa fa-close"></i></a>
      </datepicker>
      <datepicker
        id="finish_at"
        name="finish_at"
        :config="{
          wrap: true,
          dateFormat: 'd-M-Y h:i:S',
          allowInput: true,
          enableTime: true
        }"
        readonly>

        <a class="button" data-toggle><i class="fa fa-calendar"></i></a> // <-- this
        <a class="button" data-clear><i class="fa fa-close"></i></a> // <-- and this one doesn't works
      </datepicker>

Don't know if i have to add a id or name to the elements.

Any suggestion will be grateful.

I'm using vue-bulma-datepicker on a project and I'm getting this error when running unit tests

    PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
      SyntaxError: Unexpected token ')'
      at webpack:///~/vue-bulma-datepicker/src/BasicInput.js:9:0 <- index.js:8795

the only way I managed to fix it is by changing the following on BasicInput.js

    inputClass: {
      type: Object,
      // default: () => ({})
      default: function () {
        return {}
      }
    },

I'm not sure if this is an error on the package or some miss-configuration on my babel settings.

With Laravel 5.4 & Laravel mix 1.0 the npm run production fails. npm run dev works fine.

Error:

/js/app.js from UglifyJs
Unexpected token: punc ()) [./node_modules/vue-bulma-datepicker/src/BasicInput.js:9,0][/js/app.js:49307,16]

npm install vue-bulma-datepicker --save

This dependency was not found:

vue-style-loader!css-loader!../../vue-loader/lib/style-rewriter?id=data-v-58620bec!stylus-loader!../../vue-loader/lib/selector?type=styles&index=0!./index.vue in ./~/vue-bulma-datepicker/src/index.vue

To install it, you can run: npm install --save !!vue-style-loader!css-loader!../../vue-loader/lib/style-rewriter?id=data-v-58620bec!stylus-loader!../../vue-loader/lib/selector?type=styles&index=0!./index.vue

Please implement proper working v-model with datepicker to be able to set initial date value.

Hi,

using the following code:

<datepicker :config="{ dateFormat: 'd-m-Y'" v-model="datum"></datepicker>

displays the datepicker properly and allows me to select a date, however upon selecting a new date, v-model is not being updated.
I also tried like this:

<datepicker :config="{ dateFormat: 'd-m-Y', onChange: dateChange() }" v-model="datum"></datepicker>

though it only gets triggered the first time upon setting the datum value from an axios request; where the data is being changed.
It seems like selecting a new date using the datepicker, doesn't trigger anything for me and doesn't update the v-model at all.
Using Vue 2.2.6

Is it possible to list your dev dependencies so this can be used by others? For example, stylus is a dependency but can't be used right now as it's not included.

Best case scenario though, a distribution version of the component should be made available so people using the component does not need to know your dev-dependencies.

I still need to investigate the cause, but after updating to v1.3.0 my unit tests are now failing:

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  SyntaxError: Unexpected token ')'
  at webpack:///~/vue-bulma-datepicker/src/BaseInput.js:6:0 <- index.js:32158

My project was set up using Vue Webpack template.

Expected Behavior

When passing { onChange: onChangeHandler } as config options, I expect the onChange to be called everytime something changes.

Actual Behavior

The onChange is called when the datepicker is made visible using v-if. Changes to the actual date range selected do not trigger an onChange.

Steps to Reproduce the Problem

1. Create a datepicker with range config and onChange callback
2. Hide it using v-if
3. Show it, and then try to select a date
4. The onChange is only triggered when the v-if is applied, not when the date is selected

Specifications

• Version: 1.3.5
• Platform: Windows
• Subsystem: Node 6 / npm 3

Implementation

<div class="field has-addons" v-if="customRange">
    <div class="control control--datepicker has-icons-right">
         <datepicker placeholder="Select a range" :config="{ mode: 'range', maxDate: 'today', onChange: setCustomRangeDates }"></datepicker>
              <span class="icon is-small is-right">
                <i class="fa fa-calendar"></i>
              </span>
            </div>
            <div class="control">
              <button class="button is-info" @click="submitCustomRange">
                Search
              </button>
            </div>
          </div>

I trying to use this datepicker in my project but I'm getting this issue:

[Vue warn]: Unknown custom element: <partial> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 
(found in component <datepicker> at E:\_dev\lolch\node_modules\vue-bulma-datepicker\src\Datepicker.vue)

I imported it and also registered in components object as you can see bellow:
import Datepicker from 'vue-bulma-datepicker';

components: {
		Datepicker,
...

And I have it in my template
<datepicker :config="{ dateFormat: 'd-m-Y' }" value="person.born"></datepicker>

Any suggestion?

When datepicker is open, if I select a day it stills remains open. However, when I change one of year/month/hour/minute it sets the value on input but it also closes the datepicker. This means that I want to set hour from 12 to 14 it closes when I click on the arrow-up to increase the hour.

does anyone have the same issue?

The DatePicker looks so awesome. But it lacks a few things. Maybe if it is identical in functionality with jQuery DatePicker it would have been huge difference. Like start and End date. And hooks to every bit of data. Methods and Events.

For now my proposal is to include Date Range Picker. It would be a nice inclusion.

I can't build the project with WebPack. When I run npm run build I get:

ERROR in static/js/vendor.f5f763bc19f974345e9c.js from UglifyJs
Unexpected token: punc ()) [./~/vue-bulma-datepicker/src/BaseInput.js:6,0][static/js/vendor.f5f763bc19f974345e9c.js:5283,16]

I have two datepicker components, a start datepicker and end datepicker.

I tried passing the value of the start datepicker to end datepicker's minDate, it doesn't disable the dates prior to the selected date.

Why there is object expected? How you suppose to build it?

My current datepicker setup:
:inputClass="['classOne', 'classTwo']"

Uncaught TypeError: Cannot read property 'focus' of undefined
    at Array.eval (eval at <anonymous> (:8080/app.js:5257), <anonymous>:1318:32)
    at processPostDayAnimation (eval at <anonymous> (:8080/app.js:5257), <anonymous>:286:26)
    at HTMLDivElement.animateDays (eval at <anonymous> (:8080/app.js:5257), <anonymous>:310:6)

• If you select a date that it not in the current month shown on the date picker, the input tag will still remain focused and the above error will be shown in the console.
• For example, if you have the month of July shown in the datepicker and you select a date that is shown in the datepicker aka (August 1st), the datepicker will remain focused and the error above will be shown in the console.

Flatpickr is crashing in modal component, I has to use this https://www.npmjs.com/package/vuejs-datepicker to solve.

Hi, i am getting this error when i try to set the config param to mode: 'range'.

<datepicker placeholder="Select a range" :config="{ mode: 'range' }"></datepicker>

Any suggestion would be helpful.

Regards.

From @JeOam vue-bulma/vue-admin#26 (comment)

@fundon btw, while using vue-bulma-datepicker with :config="{ static: true}" option, this line of code would cause Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node' error if you tried to jump to another page

npm vue version is 1.x, not sync with github

The following does not set the placeholder. It's always "Pick date"

<datepicker placeholder="Tarih seçiniz" :config="config" readonly @input="input">

I'm trying to install in a Vue 2.0 project, and getting
Peer [email protected] wants vue@^1.0.26 message.

Hi,
With latest release of Bulma (0.4.0), writing forms must be enclosed by DIV with class field, like this:

<div class="field">
  <label class="label" for="country">Country</label>
  <p class="control is-expanded">
    <span class="select is-fullwidth">
      <select class="is-fullwidth" name="country" v-model="selected_country" @input="updateUser">
        <option v-for="c in countries" v-bind:value="c.id">
          {{ c.country_fr }}
        </option>
      </select>
    </span>
  </p>
</div>

which produces:

If I do the same thing with datepicker and "has-addons" on the enclosing DIV, here's what I have:

<label class="label">Start date</label>
<div class="field has-addons">
  <datepicker name="dateForm" v-model="dateForm" :config="{ dateFormat: 'd/m/Y', wrap: true, locale: fr }">
    <a class="button" data-toggle><i class="fa fa-calendar"></i></a>
    <a class="button" data-clear><i class="fa fa-close"></i></a>
  </datepicker>
</div>

Note that LABEL needs to be outside when using "has-addons". I think this is another issue from Bulma itself.

Below is the specific error message right after the dev server starts (npm run dev):

ERROR in ./~/vue-bulma-datepicker/src/Datepicker.vue
Module not found: Error: Cannot resolve module 'stylus-loader' in /Users/rkwl/Documents/hp_proj/hp/node_modules/vue-bulma-datepicker/src
 @ ./~/vue-bulma-datepicker/src/Datepicker.vue 2:0-166

I installed this component like this: npm install --save vue-bulma-datepicker

I installed stylus-loader but I still have the same error and added this to my webpack.base.conf.js file:

loaders: [
    { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' }
  ]...

But the error is still there.

Vue: v1.0.21
bulma: v0.1.2
template: Webpack

On version 1.3.0, I am using the datepicker like this:

<datepicker name="toDate" class="input" type="date" :config="{dateFormat: 'm-d-Y'}" v-model="toDate" placeholder="To" />

When I change to a different route, every click on the page produces this error message:

Uncaught TypeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node'.

I am using version 2.2.6 of VueJS. No functionality is being lost, just a ton of errors in the console. If I remove the datepicker, the error is no longer emitted.

Any ideas?

Hello,

And thank you for your awesome job !

The base style of flatpickr changed to flatpickr.styl

<datepicker v-model="publishedAt"></datepicker>

the value of 'publishedAt' doesn't change when date is picked

Hi, just tried to use this component and it crashes to blank page
Vue v2.1.10
Used it as:

import Datepicker from 'vue-bulma-datepicker';

export default {
  name: "Clients-new",

  components: {
    VLayout: require('layouts/default/default.vue'),
    Datepicker,
  },
}; 

Uncaught SyntaxError: Unexpected token export
at Object. (app.js:1374)
at webpack_require (app.js:556)
at fn (app.js:87)
at eval (eval at (app.js:1068), :23:24)
at Object. (app.js:1068)
at webpack_require (app.js:556)
at fn (app.js:87)
at eval (eval at (app.js:1416), :7:3)
at Object. (app.js:1416)
at webpack_require (app.js:556)
(anonymous) @ app.js:1374
webpack_require @ app.js:556
fn @ app.js:87
(anonymous) @ index.vue?52ce:11
(anonymous) @ app.js:1068
webpack_require @ app.js:556
fn @ app.js:87
(anonymous) @ index.vue?e15a:7
(anonymous) @ app.js:1416
webpack_require @ app.js:556
fn @ app.js:87
(anonymous) @ new.js?afa7:7
(anonymous) @ app.js:1104
webpack_require @ app.js:556
fn @ app.js:87
(anonymous) @ new.vue?03a4:3
(anonymous) @ app.js:1398
webpack_require @ app.js:556
fn @ app.js:87
(anonymous) @ routes.js?38fb:32
(anonymous) @ app.js:936
webpack_require @ app.js:556
fn @ app.js:87
(anonymous) @ bootstrap.js?901c:84
(anonymous) @ app.js:744
webpack_require @ app.js:556
fn @ app.js:87
(anonymous) @ index.vue?6dc0:18
(anonymous) @ app.js:1080
webpack_require @ app.js:556
fn @ app.js:87
(anonymous) @ index.vue?0af8:3
(anonymous) @ app.js:1386
webpack_require @ app.js:556
fn @ app.js:87
(anonymous) @ main.js?3479:8
(anonymous) @ app.js:1050
webpack_require @ app.js:556
fn @ app.js:87
(anonymous) @ app.js:587
webpack_require @ app.js:556
(anonymous) @ app.js:579
(anonymous) @ app.js:582
backend.js:1

webpack:///./~/vue-click-outside/index.js?5eb1

The first methods hook gets overwritten by the other methods hook.

When I try to parse it with browserify I get this error:

[20:57:51] Starting 'browserify'...
{ Error: Parsing file /home/emil/node_modules/vue-bulma-datepicker/src/Datepicker.vue: Unexpected token (1:0)

I import it using

import Datepicker         from 'vue-bulma-datepicker';

I am looking for a working demo of this component. Trying to integrate into our app, however, webpack throws a fit. I have already had to install a slew of loaders which shouldn't be required when working with an npm module?

> [email protected] build /Users/mikee/Documents/Projects/dev/vue/vue-formly-test
> webpack --progress --colors --hide-modules

Hash: �[1m655d16f1ca86bbf1255a�[39m�[22m
Version: webpack �[1m2.2.1�[39m�[22m
Time: �[1m8461�[39m�[22mms
    �[1mAsset�[39m�[22m    �[1mSize�[39m�[22m  �[1mChunks�[39m�[22m  �[1m�[39m�[22m           �[1m�[39m�[22m       �[1mChunk Names�[39m�[22m
�[1m�[33mbundle.js�[39m�[22m  �[1m�[33m575 kB�[39m�[22m       �[1m0�[39m�[22m  �[1m�[32m[emitted]�[39m�[22m  �[1m�[33m[big]�[39m�[22m  main

�[1m�[31mERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-bulma-datepicker/src/index.vue
Module not found: Error: Can't resolve './SingleInput' in '/Users/mikee/Documents/Projects/dev/vue/vue-formly-test/node_modules/vue-bulma-datepicker/src'
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-bulma-datepicker/src/index.vue 15:19-43
 @ ./~/vue-bulma-datepicker/src/index.vue
 @ ./src/app.js�[39m�[22m

�[1m�[31mERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-bulma-datepicker/src/index.vue
Module not found: Error: Can't resolve './WrapperInput' in '/Users/mikee/Documents/Projects/dev/vue/vue-formly-test/node_modules/vue-bulma-datepicker/src'
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-bulma-datepicker/src/index.vue 19:20-45
 @ ./~/vue-bulma-datepicker/src/index.vue
 @ ./src/app.js�[39m�[22m

�[1m�[31mERROR in ./~/flatpickr/dist/flatpickr.js
Module build failed: ReferenceError: Unknown plugin "transform-remove-strict-mode" specified in "/Users/mikee/Documents/Projects/dev/vue/vue-formly-test/node_modules/flatpickr/.babelrc" at 0, attempted to resolve relative to "/Users/mikee/Documents/Projects/dev/vue/vue-formly-test/node_modules/flatpickr"
    at /Users/mikee/Documents/Projects/dev/vue/vue-formly-test/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
    at Array.map (native)
    at Function.normalisePlugins (/Users/mikee/Documents/Projects/dev/vue/vue-formly-test/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/Users/mikee/Documents/Projects/dev/vue/vue-formly-test/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at OptionManager.init (/Users/mikee/Documents/Projects/dev/vue/vue-formly-test/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/mikee/Documents/Projects/dev/vue/vue-formly-test/node_modules/babel-core/lib/transformation/file/index.js:216:65)
    at new File (/Users/mikee/Documents/Projects/dev/vue/vue-formly-test/node_modules/babel-core/lib/transformation/file/index.js:139:24)
    at Pipeline.transform (/Users/mikee/Documents/Projects/dev/vue/vue-formly-test/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/Users/mikee/Documents/Projects/dev/vue/vue-formly-test/node_modules/babel-loader/lib/index.js:46:20)
    at Object.module.exports (/Users/mikee/Documents/Projects/dev/vue/vue-formly-test/node_modules/babel-loader/lib/index.js:155:20)
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-bulma-datepicker/src/index.vue 7:17-37
 @ ./~/vue-bulma-datepicker/src/index.vue
 @ ./src/app.js�[39m�[22m

I would like to use am/pm for date format.
Is there ampm option??
Does vue-bulma-datepicker support ampm option?

Hi, I'm sorry poor English.
could you add :class attribute in these files for customizing class ?

https://github.com/vue-bulma/datepicker/blob/master/src/SingleInput.vue#L2
https://github.com/vue-bulma/datepicker/blob/master/src/WrapperInput.vue#L3

Hi. I'm trying to change rangeSeparator and firstDayOfWeek via l10n property, but without any success

I just tried updating to v1.2.6, but now my app fails to build with the following error:

This dependency was not found in node_modules:

* vue-bulma-datepicker in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./path/to/my/component.vue

Did you forget to run npm install --save for it?

I had a look inside node_modules/vue-bulma-datepicker and it seems like the release is corrupted by some kind of windows file path issue:

vue-bulma-datepicker/
  src/
    # empty
  LICENSE
  package.json
  README.md
  src\index.vue
  src\SingleInput.vue
  src\WrapperInput.vue

just a quick notice.. chrome works just fine

Hi,

First, thank you for that awesome component! Works like a charm!

I am looking for a simple way to clear the input programmatically without the use of the data-clear button?

I use the <datepicker> component in the template of another component. I would like to be able to clear the input of the datepicker within a @submit event from the parent form.

Thank you for your help.
Regards,
Clément

index.vue is unable to correctly use the BaseInput mixin because of this http://stackoverflow.com/questions/33505992/babel-6-changes-how-it-exports-default

In order to make it work I have to change mixins: [BaseInput] to mixins: [BaseInput.default] but this never used to be the case. Something is going on and I haven't a clue how to fix it.

Hi,
I've launched latest https://github.com/vue-bulma/vue-admin and there is a problem with the datepicker component.
In the console (in watch function), I never have a single valid value displayed, but every time I have:

TypeError: e.composedPath is not a function
TypeError: hooks[i] is not a function

Any idea why?

As referred in API section, https://chmln.github.io/flatpickr/, I will like to programmatically control it. For instance, when user want to reset/clear form, I'll like to set datetime picker to its default value. I should be able to do so by using setDate(), but how do I talk to the instance at the first hand?

I was unable to set date programmatically.
Using v1.3.3 with vue v2.3.3

<template>
  <section>
    <datepicker v-model="date"></datepicker>

    <button @click.prevent="setNewDate">Set new date</button>
    {{date}}
  </section>
</template>

<script type="text/javascript">
  import Datepicker from 'vue-bulma-datepicker'

  export default {
    data: function () {
      return {
        date: '2018-01-01', // initial date will be applied       
      }
    },
    components: {
      Datepicker
    },
    methods: {
      setNewDate: function () {
        // new date will not be applied
        this.date = "2017-12-12";
      }
    }
  }
</script>

P.S. I don't think the issue caused by config.dateFormat

When another input element on the same page is updated. Datepicker component resets its value to the beginning and the value entered is lost.

An error occurs when updating the page content:

[Vue warn]: Error in callback for watcher "config": 
(found in <Datepicker> at mydisk:\myproject\node_modules\vue-bulma-datepicker\src\index.vue

Hello

When I open the calendar and then I click outside the calendar, this closes the calendar. So far so good. But when I try to click again on the input to open the calendar, is like the input is frozen for some reason. And looking the input, it´s like the input stay focused when I close the calendar clicking outside without choosing a date.

Missing support for Server Side Rendering: this is due to this issue vue-bulma/click-outside#5 (vue-bulma-click-outside dep).

Following a workaround:

data() {
  return {
    datepickerVisible: false
  }
},
beforeMount() {
  this.$options.components.Datepicker = require('vue-bulma-datepicker')
  setTimeout(() => {this.datepickerVisible = true},0)
}

And then, inside the HTML template:

<p class="control" v-if="datepickerVisible">
  <datepicker :inputClass="{ test: true }" v-model="myDateModel"></datepicker>
</p>

Hi, i tried to give a computed property to the datepicker but is not accepting instances of Date or numbers (timestamps) and i need to give the hour to my datepicker.

I got:

[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, got Date

As flatpickr documentation say it can specify date as Date, timestamps and strings.

To give it a default time when the module has just mounted i give the date value as ISO Date string format as workaround to set the clock on last edited value.

I don't know if i am doing something wrong or this feature is not supported yet.

Regards