Set value programmatically

[ankurk91]

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

[luventa]

I'm looking into it.

update 1: config causes initial date is not applied.

update 2: found useful info here...config options

date string needs follow dateFormat

I'm trying to fix this now.

[ankurk91]

@luventa I dont think it is config issue, you can remove :config and try

[luventa]

yes, right, flatpickr wont update its selected date unless setDate is called. Still working on it.

[ankurk91]

Try adding this:

watch: {
  // add watch on value
  value(newValue){   
    this.datepicker.setDate(newValue, true);
  }
},

[luventa]

Already did that but the dateFormat will interrupt date convert. But set prop value to Date type is not a good choice. Also I found some thing else, need to refactor the component.

[luventa]

I've fixed your issue and the demo is here Demo (will work correctly after new version is published). When dateFormat is set, the date string which you are using for v-model needs to follow the format.

I figured out a way to validate the date string for single mode but there are still too may validations further... So I gave up to implement date string validation.

Feel free to reopen this issue. Thanks for report this again. 😄