如何在Vuejs中使用规则验证vue-ctk-日期-时间选择器？

Question

我正在尝试使用vue-ctk-date-time-picker应用:rules所需的验证。

它为其他元素工作，但不工作with vue-ctk-date-time-picker。

请纠正我。

这是我正在尝试的脚本

dateTimePickerRules: [(v) => !!v || 'This Field is required'],



<vue-ctk-date-time-picker
    id="RangeDatePicker"
    v-model="tempInterpreterProjectDate"
    classname="form-control"
    color="dodgerblue"
    :only-date="true"
    :no-shortcuts="true"
    format="YYYY-MM-DD"
    formatted="ddd, MM/DD/YYY"
    :range="true"
    :rules="dateTimePickerRules"
    @input="selectedInterperateDate"
></vue-ctk-date-time-picker>

Answer 1

vue-ctk-date-time-picker不是一种活性成分。没有像属性这样的rules。您需要实现自定义验证，例如在表单提交(检查tempInterpreterProjectDate是否有一个值)

Answer 2

我已经成功地验证了vue-ctk-date-time-picker的可执行性。

<ValidationObserver ref="dateTimeRef">
    <ValidationProvider
        v-slot="{ errors }"
        name="Date/time"
        rules="required"
    >
        <vue-ctk-date-time-picker
        id="RangeDatePicker"
        v-model="tempInterpreterProjectDate"
        classname="form-control"
        color="dodgerblue"
        :only-date="true"
        :no-shortcuts="true"
        format="YYYY-MM-DD"
        formatted="ddd, MM/DD/YYY"
        :error-messages="errors"
        :range="true"
        @input="selectedInterperateDate"
        ></vue-ctk-date-time-picker>
        <span class="v-messages theme--light error--text">{{
        errors[0]
        }}</span>
    </ValidationProvider>
</ValidationObserver>

我正在验证这个领域，就像这样

// it will return eithter true or false
const isDateTimeValid = await this.$refs.dateTimeRef.validate()