Use @blur event in flatpickr, when output is null-CodePudding

<b-col md="7" offset-md="1">
  <b-form-group>
    <template>
      Time
      <flat-pickr
        id="time"
        v-model="time"
        
        :config="timeConfig"
        @blur="valTime"
      />
  </template>
 </b-form-group>
</b-col>

data() {
  return: {
   time: null,
   timeConfig: {
     dateFormat: 'Y-m-d H:i',
   }
  }
},
methods: {
  valTime(e) {
    console.log(e.target.value) // null
  }
}

I am doing vuejs. I use @blur event in flatpickr it returns null, is there any way I can get the result, where did I go wrong, please advise. Thanks

CodePudding user response：

flat-pickr emits the onChange event when the user selects a new date. The event handler (i.e., valTime() in this case) receives three arguments, but you can just use the first argument to get the selected date:

export default {
  methods: {
    valTime(selectedDates, dateStr, instance) {
      console.log(selectedDates)
    }
  }
}

The vue-flatpickr-component docs describe how to listen to onChange:

<flat-pickr ⋯ @on-change="valTime" />

demo