Vue2-datepicker: Possible to close the datetime picker after choosing minute option in timepicker?

[shawjak3]

This library works great for regular datepicker by closing the popup after you select a date. Is there a way to get that same behavior on the last pickable option for the time picker? Looking for something that allows me to choose the date then the time and after I select the minute I want to have that close the popup.

[mengxiong10]

we can watch the value and then close the picker when the minutes or seconds is changed.

<date-picker v-model="value" ref="datepicker" type="time" />

watch: {
   value (val, oldVal) {
     const newSeconds = val && val.getSeconds()
     const oldSeconds = val && val.getSeconds()
      if (newSeconds !== oldSeconds) {
          this.closeDatePicker()
      }
   }
},
methods: {
  closeDatePicker () {
    this.$refs.datepicker.closePopup()
  }
}

[eakenbor]

@mengxiong10, the watch does not work for datetime. Also, @blur does not emit the input value when you click on the time in the datetime modal - only when you click on the date part of it. Please is there anyway to get around this?

[tomearly]

Did anyone get anywhere with this? I am experiencing the same issue.

[mengxiong10]

@tomearly
I'll release v3.0.0 this week.
v3.0.0 will easy to implement this

[mengxiong10]

You can use the prop open to control the visible of popup in v3.0.

    <date-picker
      v-model="value"
      value-type="format"
      type="time"
      placeholder="Select time"
      :open.sync="open"
      @change="handleChange"
    ></date-picker>

export default {
  data() {
    return {
      value: null,
      open: false,
    };
  },
  methods: {
    handleChange(value, type) {
      if (type === 'minute') {
        this.open = false;
      }
    },
  },
};