El-date-picker component verification of Element-UI. The start time and the end time are in the same input

what you need to do now is an export function. Clicking on Export will bring up a pop-up window, and then there will be three required items:

  1. data sources
  2. processing status
  3. time range

clipboard.png

the framework used is vue+ElementUI
the verification of the first two items is correct and can be verified. But after I choose the time range, I still prompt me to choose a time.
here is my code:

            <el-dialog
            title=""
            :visible.sync="dialogVisible"
            width="30%">
                <el-form ref="modelExport" :model="modelExport" :rules="rules" >
                    <el-row>
                        <el-col>
                            <el-form-item label=" : " prop="dealer" label-width="108px">
                            <el-select v-model="modelExport.dealer" placeholder="">
                                <el-option                    
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item label=" : " prop="processingStatus" label-width="108px">
                                <el-select v-model="modelExport.processingStatus" placeholder="">
                                    <el-option
                                    v-for="item in optionStatus"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label=" : " prop="dataTime" label-width="108px">    
                            <el-date-picker
                            placeholder=""
                            type="daterange"
                            format="yyyy-MM-dd"
                            v-model="modelExport.dataTime"
                            range-separator=""
                            start-placeholder=""
                            end-placeholder="">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="problem_export("modelExport")"> </el-button>
                <el-button @click="cancel_problem_export("modelExport")"> </el-button>                
            </span>
            </el-dialog>

the following is the data in my data:

            modelExport: {
                //
                dealer: "", //
                processingStatus: "", //
                dataTime: "" //
            },

the following is my verification:

            rules: {
                dealer: [
                    { required: true, message: "", trigger: "blur"}
                ],
                processingStatus: [
                    { required: true, message: "", trigger: "blur"}
                ],
                dataTime:[
                    { required: true, message: "", trigger: "change" }
                ]
            }

feels that you are writing strangely. If it is a time region, then your v-model data should be an array. Try changing it into an array.


what form verification plug-in do you use in this time range rules? Ask for advice ~


I also encounter this problem, have you solved it? How did you handle it?

Menu