Vue.js 中 El-date-picker 的日期验证和错误处理 - 解决 "TypeError: dateObject.getTime is not a function" 报错

{ "title": "<el-form-item label="会计期间：" required> <el-col :span="8"> <el-form-item prop="startAccountingTime"> <el-date-picker ref="startPicker" clearable size="mini" v-model="form.startAccountingTime" type="date" value-format="yyyy-MM-dd" placeholder="选择起始日期" style="width: 130px"

———— ", "description": "startAccountingTime: [ { type: \"date\", required: true, message: \"请选择会计开始时间\", trigger: \"blur\", }, ], endAccountingTime: [ { type: \"date\", required: true, message: \"请选择会计结束时间\", trigger: \"blur\", validator(rule, value, callback) { if ( this.form.startAccountingTime && this.form.endAccountingTime ) { const startDate = moment( this.form.startAccountingTime, \"YYYY-MM-DD\" ); const endDate = moment( this.form.endAccountingTime, \"YYYY-MM-DD\" ); if (startDate.isValid() && endDate.isValid()) { if (startDate.isAfter(endDate)) { callback(new Error(\"起始日期不能晚于结束日期\")); } else { callback(); } } else { callback(new Error(\"日期格式不正确\")); } } else { callback(); } }, }, ], "Error in event handler for \"el.form.blur\": \"TypeError: dateObject.getTime is not a function报错解决内容：这个报错的原因是`dateObject`不是一个有效的日期对象，无法调用`getTime`方法。\n\n要解决这个问题，您可以检查一下`form.startAccountingTime`和`form.endAccountingTime`的值是否是有效的日期对象。您可以使用`moment`库来进行日期的格式化和判断。\n\n在验证函数中，您可以添加以下代码来检查日期是否有效：\n\n```javascript\nvalidator(rule, value, callback) {\n if (this.form.startAccountingTime && this.form.endAccountingTime) {\n const startDate = moment(this.form.startAccountingTime, \"YYYY-MM-DD\");\n const endDate = moment(this.form.endAccountingTime, \"YYYY-MM-DD\");\n if (startDate.isValid() && endDate.isValid()) {\n if (startDate.isAfter(endDate)) {\n callback(new Error(\"起始日期不能晚于结束日期\"));\n } else {\n callback();\n }\n } else {\n callback(new Error(\"日期格式不正确\"));\n }\n } else {\n callback();\n }\n},\n```\n\n这样就可以避免`dateObject.getTime is not a function`的报错。", "keywords": "Vue.js, El-date-picker, 日期验证, 错误处理, TypeError: dateObject.getTime is not a function, moment.js", "content": " ———— startAccountingTime: [{ type: \"date\", required: true, message: \"请选择会计开始时间\", trigger: \"blur\", }, ], endAccountingTime: [{ type: \"date\", required: true, message: \"请选择会计结束时间\", trigger: \"blur\", validator(rule, value, callback) { if (this.form.startAccountingTime && this.form.endAccountingTime) { const startDate = moment(this.form.startAccountingTime, \"YYYY-MM-DD\"); const endDate = moment(this.form.endAccountingTime, \"YYYY-MM-DD\"); if (startDate.isValid() && endDate.isValid()) { if (startDate.isAfter(endDate)) { callback(new Error(\"起始日期不能晚于结束日期\")); } else { callback(); } } else { callback(new Error(\"日期格式不正确\")); } } else { callback(); } }, }, ],Error in event handler for \"el.form.blur\": \"TypeError: dateObject.getTime is not a function报错解决内容：这个报错的原因是`dateObject`不是一个有效的日期对象，无法调用`getTime`方法。\n\n要解决这个问题，您可以检查一下`form.startAccountingTime`和`form.endAccountingTime`的值是否是有效的日期对象。您可以使用`moment`库来进行日期的格式化和判断。\n\n在验证函数中，您可以添加以下代码来检查日期是否有效：\n\n```javascript\nvalidator(rule, value, callback) {\n if (this.form.startAccountingTime && this.form.endAccountingTime) {\n const startDate = moment(this.form.startAccountingTime, \"YYYY-MM-DD\");\n const endDate = moment(this.form.endAccountingTime, \"YYYY-MM-DD\");\n if (startDate.isValid() && endDate.isValid()) {\n if (startDate.isAfter(endDate)) {\n callback(new Error(\"起始日期不能晚于结束日期\"));\n } else {\n callback();\n }\n } else {\n callback(new Error(\"日期格式不正确\"));\n }\n } else {\n callback();\n }\n},\n```\n\n这样就可以避免`dateObject.getTime is not a function`的报错。