如何在Vuejs中使用flatpickr与Vee验证

Question

我已经使用了它，但是在第一次单击时未选择日期，使用的版本是“ vue”：“ 2.x”，“ vue-flatpickr-component”：“^8.1.6”， 我的代码是：

<b-form-group class="requied_field showOnCheck"
    :label="$t('Start On')"
    label-for="v-autoresponder_start_date"
    :description="$t('start_on_desc')">
<validation-provider
    #default="{ errors }"
    :name="$t('Start On')"
    rules="required">
<b-input-group class="input-group-merge">
    <b-input-group-prepend is-text>
        <feather-icon icon="CalendarIcon" />
    </b-input-group-prepend>
    <flat-pickr
        v-model="formData.autoresponder_start_date"
        :disabled="isDisabledField"
        class="form-control"
        id="v-autoresponder_start_date"
        :config="{ defaultDate:'today',enableTime:true, minDate:'today', maxData:formData.autoresponder_end_date, dateFormat: 'Z', altInput: true}"
    />
</b-input-group>
<small class="text-danger">{{ errors[0] }}</small>
</validation-provider>

请任何人解决问题。

Answer 1

    Add your config inside data function
export default {   
    data () {
        return {
            dateConfig: 
            { 
                defaultDate:'today',
                enableTime:true, 
                minDate:'today', 
                maxData:formData.autoresponder_end_date, 
                dateFormat: 'Z', 
                altInput: true
            }       
        }
    },
} 

Use as follows
<flat-pickr
        v-model="formData.autoresponder_start_date"
        :disabled="isDisabledField"
        class="form-control"
        id="v-autoresponder_start_date"
        :config="dateConfig"
    />