Vue问题1：TypeError：date.getHours is not a function

最新推荐文章于 2025-06-21 16:40:34 发布
原创 最新推荐文章于 2025-06-21 16:40:34 发布 · 1.9w 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文解决了使用Vue日期选择器时遇到的问题，包括如何避免date.getTimesisnotafunction错误，如何正确设置时间控件的值格式及如何进行输入框验证。

再用vue的时间控件的时候


遇到了如下的问题：


解决方法：在<el-date-picker></el-date-picker>时间控件加上value-format="yyyy-MM-dd"


以防出现date.getTimes is not a function以下的applyTime设置为null


时间控件输入框的校验的type=“date”去除；



Element-ui date-picker组件报错 date.getHours is not a function
科技向善
02-09 2677
在这个例子中，date是一个Date对象。当从服务器获取数据或者从其他地方获取日期，并且这个日期不是Date对象的时候，需要先将其转换为Date对象。这个错误通常意味着date这个变量并不是一个真正的日期对象，而是其他类型，例如字符串或数字。因此，无法调用日期对象的getHours方法。在Element-ui中使用date-picker组件时，应该保证绑定的数据是Date对象，而不是其他类型。
Vue elementui时间控件编辑时报错：date.getHours is not a function
weixin_42524279的博客
06-25 2151
解决方法3：不要格式化： value-format=“yyyy-MM-dd HH:mm:ss” ，这样的话传给接口的时间会少了8个小时，要另外想办法处理，这个方法未测试。时间控件，这里用了type=“datetime”,并且设置了格式化， value-format=“yyyy-MM-dd HH:mm:ss”遇到编辑时报错的情况，然后无法修改时间：date.getHours is not a function。
JS报错Uncaught (in promise) TypeError: (intermediate value).format is not a function
weixin_68502577的博客
06-21 352
【代码】JS报错Uncaught (in promise) TypeError: (intermediate value).format is not a function。
vue+element-ui项目前端报错TypeError: date.getHours is not a function
绝圣弃智-零的博客
04-30 2万+
问题与答案都存在于场景、情景、背景之中。 问题背景： chrom浏览器，vue+element-ui项目，前端以表格形式显示员工信息，包括出生日期等。可编辑员工信息，包括出生日期等。出生日期使用了el-date-picker。 问题描述： 在编辑员工信息，编辑出生日期时，点击出现日期选择框，但是选择日期时，无反应，F12发现有错误： TypeError: date.getHo...
使用iview日期选择器时出现Error in v-on handler: “TypeError: date.getHours is not a function“
LanseMOgang的博客
05-13 2569
Error in v-on handler: “TypeError: date.getHours is not a function“
关于时间框 date.getHours is not a function 报错问题解决
weixin_64374806的博客
10-13 9379
前端时间框报错TypeError: date.getHours is not a function
CoachView.vue:29 [Vue warn]: Error in created hook: "TypeError: this.formatDate is not a function"
最新发布
09-03
[Vue warn]: Error in created hook: "TypeError: this.formatDate is not a function" ``` ### ❌ 错误原因： 这个错误说明你在 `created` 生命周期钩子中调用了 `this.formatDate(...)`，但 `formatDate` 并不是...
<script setup lang="ts"> import { computed, ref } from "vue"; import { onLoad } from "@dcloudio/uni-app"; import store from "../../store"; import xunHelper from "../../common/utils/xunHelper"; const saleImages = computed(() => store.state.sale.saleImages || []); function delImage(i) { const list = JSON.parse(JSON.stringify(saleImages.value)); list.splice(i, 1); store.commit("sale/SET_SALEIMAGE", list); } function getTimeNumber() { const date = new Date(); const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1，并用padStart填充前导零 const day = String(date.getDate()).padStart(2, '0'); // 用padStart填充前导零 const hour = String(date.getHours()).padStart(2, '0'); const minutes = String(date.getMinutes()).padStart(2, '0'); const seconds = String(date.getSeconds()).padStart(2, '0'); return year + month + day + hour + minutes + seconds; } async function chooseImage() { uni.chooseImage({ count: 1, success: async (res) => { const tempFilePath = res.tempFilePaths[0]; // 添加遮罩和文字 const maskedImagePath = await this.drawMaskOnImage( tempFilePath, '商品照片' // 这里可以自定义文字 ); // 将带遮罩的图片转换为Base64 const base64Res = await uni.getFileSystemManager().readFile({ filePath: maskedImagePath, encoding: 'base64' }); // 存储处理后的图片 store.commit("sale/SET_SALEIMAGE", [...this.saleImages, { path: maskedImagePath, // 显示带遮罩的图片 file: base64Res.data, // Base64编码 pathname: `${Date.now()}.jpg` }]); } }); } // 在methods中添加 async function drawMaskOnImage(tempFilePath, description) { // 获取图片信息 const imgInfo = await uni.getImageInfo({ src: tempFilePath }); // 设置Canvas尺寸与图片一致 this.canvasWidth = imgInfo.width; this.canvasHeight = imgInfo.height; // 创建Canvas上下文 const ctx = uni.createCanvasContext('maskCanvas', this); return new Promise((resolve) => { // 绘制原始图片 ctx.drawImage(tempFilePath, 0, 0, imgInfo.width, imgInfo.height); // 绘制底部遮罩层（高度为图片高度的20%） const maskHeight = imgInfo.height * 0.2; ctx.setFillStyle('rgba(0, 0, 0, 0.5)'); ctx.fillRect(0, imgInfo.height - maskHeight, imgInfo.width, maskHeight); // 绘制文字（居中） ctx.setFontSize(16); ctx.setFillStyle('#FFFFFF'); ctx.setTextAlign('center'); ctx.fillText( description || '默认描述', imgInfo.width / 2, imgInfo.height - maskHeight / 2 ); // 绘制完成 ctx.draw(false, () => { // 获取带遮罩的图片临时路径 uni.canvasToTempFilePath({ canvasId: 'maskCanvas', success: (res) => { resolve(res.tempFilePath); }, fail: (err) => { console.error('Canvas转换失败', err); resolve(tempFilePath); // 失败时返回原图 } }); }); }); } const nav = () => uni.navigateBack(); </script> <template> <view> <view class="list"> <view v-for="(item,index) in saleImages" :key="index" class="item"> <image :src="item.path" class="image"></image> <uni-icons @click="delImage(index)" class="item-close" type="close" color="#8f8f8f" size="24px"></uni-icons> </view> <view @click="chooseImage" class="upload-icon"> <uni-icons type="camera" size="40px" color="#999999"></uni-icons> <text>点击拍照/选择</text> </view> </view> <view class="p-row-30 m-t-60"> <view @click="nav" class="button-theme">确定</view> </view> <canvas canvas-id="maskCanvas" :style="{position: 'absolute', left: '-9999px', width: canvasWidth + 'px', height: canvasHeight + 'px'}"> </canvas> </view> </template> <style lang="scss"> .list { display: flex; align-items: center; flex-wrap: wrap; width: 100%; padding: 30rpx; .item { position: relative; width: 150rpx; height: 150rpx; border-radius: 10rpx; margin-right: 20rpx; margin-top: 20rpx; .item-close { position: absolute; right: -8px; top: -8px; } .image { width: 100%; height: 100%; border-radius: 10rpx; border: 1px solid #d8d8d8; } } .upload-icon { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 150rpx; height: 150rpx; border-radius: 10rpx; border: 1px dashed #999999; font-size: 20rpx; color: #999999; margin-top: 20rpx; } } </style> TypeError: _this.drawMaskOnImage is not a function at _callee$ (chooseImage.vue:30) at s (regeneratorRuntime.js?forceSync=true:1) at Generator.<anonymous> (regeneratorRuntime.js?forceSync=true:1) at Generator.next (regeneratorRuntime.js?forceSync=true:1) at asyncGeneratorStep (asyncToGenerator.js?forceSync=true:1) at c (asyncToGenerator.js?forceSync=true:1) at asyncToGenerator.js?forceSync=true:1 at new Promise (<anonymous>) at Object.<anonymous> (asyncToGenerator.js?forceSync=true:1) at Object.success (chooseImage.vue:26)(env: Windows,mp,1.06.2412050; lib: 3.7.12) mp.esm.js:126 {reason: TypeError: _this.drawMaskOnImage is not a function at _callee$ (http://127.0.0.1:19572/appservi…, promise: Promise}(env: Windows,mp,1.06.2412050; lib: 3.7.12)
08-16
我们遇到的问题是：在Vue和UniApp项目中，调用`this.drawMaskOnImage`方法时出现`TypeError: _this.drawMaskOnImage is not a function`错误。这通常表示在调用该方法时，`this`指向不正确或者方法未被正确绑定到Vue...
<template> <div> <el-dialog :visible.sync="dialogVisible" width="70%" :show-close="false" :close-on-click-modal="false" append-to-body @open="handleOpen" @close="handleClose" > <template slot="title"> <div style="text-align: center; font-size: 22px;"> {{ title }} </div> </template> <el-form :model="detailForm" label-width="130px" v-loading="loading"> <el-row> <el-col :span="8"> <el-form-item label="日期："> <el-input readonly v-model="detailForm.recordDate"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="班别："> <el-input readonly v-model="detailForm.workClass"></el-input> </el-form-item> </el-col> </el-row> <el-form-item label="异常机况："> <el-table :data="eqpList" style="width: 100%" id="eqpTable"> <el-table-column prop="area" label="Area"></el-table-column> <el-table-column prop="eqpId" label="Eqp Id"></el-table-column> <el-table-column prop="eqpName" label="Eqp Name"></el-table-column> <el-table-column prop="eqpStatus" label="Eqp Status"></el-table-column> <el-table-column prop="eqpHour" label="Hour"></el-table-column> <el-table-column prop="eqpUser" label="User"></el-table-column> <el-table-column prop="comments" label="Comment"></el-table-column> </el-table> <el-input type="textarea" v-model="detailForm.abnormal" :autosize="{ minRows: 2 }" placeholder="请输入异常机况 或 选中粘贴图片" @paste="handlePaste($event, abnormalImageRef)" :readonly="!detailForm.editAuth" ></el-input> <el-upload ref="abnormalImageRef" v-model="detailForm.abnormalImageList" action="#" :http-request="handleHttpUpload" list-type="picture-card" :before-upload="beforeUpload" :on-success="() => uploadSuccess('abnormalImageList')" :on-error="uploadError" :accept="fileType.join(',')" :on-preview="handlePreview" :disabled="!detailForm.editAuth" > <i class="el-icon-plus"></i> </el-upload> </el-form-item> <el-form-item label="产片："> <el-table :data="lotList" style="width: 100%" id="lotTable"> <el-table-column prop="eqp" label="机台"></el-table-column> <el-table-column prop="priority" label="Priority"></el-table-column> <el-table-column prop="lotId" label="Lot ID"></el-table-column> <el-table-column prop="maskTitle" label="Mask Title"></el-table-column> <el-table-column prop="dueDay" label="Due Day"></el-table-column> </el-table> <el-input type="textarea" v-model="detailForm.product" :autosize="{ minRows: 2 }" placeholder="请输入产片 或 选中粘贴图片" @paste="handlePaste($event, productImageRef)" :readonly="!detailForm.editAuth" ></el-input> <el-upload ref="productImageRef" v-model="detailForm.productImageList" action="#" :http-request="handleHttpUpload" list-type="picture-card" :before-upload="beforeUpload" :on-success="() => uploadSuccess('productImageList')" :on-error="uploadError" :accept="fileType.join(',')" :on-preview="handlePreview" :disabled="!detailForm.editAuth" > <i class="el-icon-plus"></i> </el-upload> </el-form-item> <el-form-item label="工程师交接事项："> <el-input type="textarea" v-model="detailForm.engHandover" :autosize="{ minRows: 2 }" placeholder="请输入工程师交接事项 或 选中粘贴图片" @paste="handlePaste($event, engHandoverImageRef)" :readonly="!detailForm.editAuth" ></el-input> <el-upload ref="engHandoverImageRef" v-model="detailForm.engHandoverImageList" action="#" :http-request="handleHttpUpload" list-type="picture-card" :before-upload="beforeUpload" :on-success="() => uploadSuccess('engHandoverImageList')" :on-error="uploadError" :accept="fileType.join(',')" :on-preview="handlePreview" :disabled="!detailForm.editAuth" > <i class="el-icon-plus"></i> </el-upload> </el-form-item> <el-form-item label="课长：" v-if="detailForm.managerName !== null"> <el-input v-model="detailForm.managerName" readonly></el-input> </el-form-item> <el-form-item label="接班人：" v-if="detailForm.assigneeName !== null"> <el-input type="textarea" v-model="detailForm.assigneeName" readonly autosize></el-input> </el-form-item> </el-form> <template slot="footer"> <el-button type="primary" @click="save" v-if="detailForm.editAuth">保存</el-button> <el-button @click="closeDialog">取消</el-button> <el-button type="primary" @click="submit" v-if="detailForm.submitAuth">提交</el-button> <el-button type="primary" @click="audit" v-if="detailForm.auditAuth">审核</el-button> <el-button type="primary" @click="assign" v-if="detailForm.assignAuth">签核</el-button> </template> </el-dialog> <el-dialog :visible.sync="previewVisible" :show-close="false"> <img width="100%" :src="previewImageUrl" alt="Preview Image"/> </el-dialog> </div> </template> <script> import { getJournalForEdit, saveJournal, submitJournal, auditJournal, assignJournal, clearEditUser } from '@/api/mfgLog/area'; import request from '@/utils/request'; import {Message, MessageBox } from "element-ui"; import dayjs from 'dayjs'; import { getToken } from '@/utils/auth' export default { data() { return { loading: false, dialogVisible: false, title: '光罩厂制造部站点交接记录簿', fileType: ['image/jpeg', 'image/png', 'image/gif'], abnormalImageRef: null, engHandoverImageRef: null, productImageRef: null, previewVisible: false, previewImageUrl: '', detailForm: { recordDate: '', workClass: '', workArea: '', abnormal: '', lotList: [], eqpList: [], abnormalImage: '', abnormalImageList: [], product: '', productImage: '', productImageList: [], engHandover: '', engHandoverImage: '', engHandoverImageList: [], managerName: '', assigneeName: '', editAuth: false, submitAuth: false, auditAuth: false, assignAuth: false, id: '' }, timer: null }; }, mounted() { // 监听事件以重置计时器 window.addEventListener('keydown', this.resetTimer); window.addEventListener('mousemove', this.resetTimer); window.addEventListener('mouseenter', this.resetTimer); // 浏览器关闭事件 window.addEventListener('beforeunload', (e) => { this.userInactive(); }); }, beforeDestroy() { // 清除事件监听和计时器 window.removeEventListener('keydown', this.resetTimer); window.removeEventListener('mousemove', this.resetTimer); window.removeEventListener('mouseenter', this.resetTimer); clearTimeout(this.timer); }, methods: { handleOpen() { this.resetTimer(); }, handleClose() { clearTimeout(this.timer); }, resetTimer() { // 用户进行了操作，重置计时器 if (this.timer) { clearTimeout(this.timer); } this.startTimer(); }, startTimer() { // 设置5分钟后的无操作处理 this.timer = setTimeout(() => { // 用户5分钟内无操作，执行相关逻辑 if (this.dialogVisible) { this.userInactive(); } }, 5 * 60 * 1000); }, userInactive() { // 用户处于非活跃状态的逻辑处理 if (this.detailForm.editAuth) { this.save(); } this.closeDialog(); }, showDialog(row) { this.loading = true; getJournalForEdit(row).then(res => { Object.assign(this.detailForm, res.data); // 显示提示信息 if (!this.detailForm.editAuth && !this.detailForm.assignAuth && this.detailForm.editUser) { Message.warning({ message: "当前日志正在被 " + this.detailForm.editUserName + " 编辑", position: 'top', // 确保消息显示在页面顶部 duration: 5000 // 消息显示时间为 5 秒 }); return 0; } this.detailForm.abnormalImageList = []; if (this.detailForm.abnormalImage?.length > 0) { let abnormalList = this.detailForm.abnormalImage.split(","); for (let index in abnormalList) { this.detailForm.abnormalImageList.push({ url: abnormalList[index] }); } } this.detailForm.productImageList = []; if (this.detailForm.productImage?.length > 0) { let productList = this.detailForm.productImage.split(","); for (let index in productList) { this.detailForm.productImageList.push({ url: productList[index] }); } } this.detailForm.engHandoverImageList = []; if (this.detailForm.engHandoverImage?.length > 0) { let engHandoverList = this.detailForm.engHandoverImage?.split(","); for (let index in engHandoverList) { this.detailForm.engHandoverImageList.push({ url: engHandoverList[index] }); } } if (this.detailForm.lotList && Array.isArray(this.detailForm.lotList)) { this.lotList = this.detailForm.lotList; } else { this.lotList = []; // 否则初始化为空数组 } if (this.detailForm.eqpList && Array.isArray(this.detailForm.eqpList)) { this.eqpList = this.detailForm.eqpList; } else { this.eqpList = []; // 否则初始化为空数组 } this.title = "光罩厂制造部 " + this.detailForm.workArea + " 站点交接记录簿"; // 判断当前时间是否允许提交/审核日志 if (this.detailForm.submitAuth || this.detailForm.auditAuth) { // 白班18点30分之前不允许提交和审核 let authTime = this.detailForm.recordDate + " 18:30:00"; if ('N' == this.detailForm.workClass.substring(0, 1)) { // 晚班06点30分之前不允许提交和审核 authTime = dayjs(this.detailForm.recordDate).add(1, 'day').format("YYYY-MM-DD") + " 06:30:00"; } if (dayjs().isBefore(dayjs(authTime))) { this.detailForm.submitAuth = false; this.detailForm.auditAuth = false; } } // 父系统页面打开遮罩 window.parent.postMessage("open", '*'); this.dialogVisible = true; // 设置初始计时器 this.loading = false; }).catch(error => { console.log(error); this.loading = false; }); }, closeDialog() { clearEditUser({ id: this.detailForm.id }).catch(error => { Message.error(error.msg ? error.msg : error); }); this.$emit('close'); // 父系统页面关闭遮罩 window.parent.postMessage("close", '*'); this.dialogVisible = false; }, save() { this.detailForm.abnormalImage = this.detailForm.abnormalImageList.map(item => item.url).join(","); this.detailForm.productImage = this.detailForm.productImageList.map(item => item.url).join(","); this.detailForm.engHandoverImage = this.detailForm.engHandoverImageList.map(item => item.url).join(","); this.loading = true; saveJournal(this.detailForm).then(res => { this.loading = false; Message.success("保存成功"); this.closeDialog(); }).catch(error => { this.loading = false; }); }, submit() { MessageBox.confirm("确认要提交吗？", "提示", { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }).then(res => { this.detailForm.abnormalImage = this.detailForm.abnormalImageList.map(item => item.url).join(","); this.detailForm.productImage = this.detailForm.productImageList.map(item => item.url).join(","); this.detailForm.engHandoverImage = this.detailForm.engHandoverImageList.map(item => item.url).join(","); this.loading = true; submitJournal(this.detailForm).then(res => { this.loading = false; Message.success("提交成功"); this.closeDialog(); }).catch(error => { this.loading = false; Message.error(error.msg ? error.msg : error); }); }).catch(error => { console.log(error); }); }, audit() { MessageBox.confirm("确认要提交审核吗？", "提示", { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }).then(res => { this.detailForm.abnormalImage = this.detailForm.abnormalImageList.map(item => item.url).join(","); this.detailForm.productImage = this.detailForm.productImageList.map(item => item.url).join(","); this.detailForm.engHandoverImage = this.detailForm.engHandoverImageList.map(item => item.url).join(","); this.detailForm.lotList = this.detailForm.lotList this.detailForm.eqpList = this.detailForm.eqpList this.loading = true; auditJournal(this.detailForm).then(res => { this.loading = false; Message.success("审核成功"); this.closeDialog(); }).catch(error => { this.loading = false; Message.error(error.msg ? error.msg : error); }); }).catch(error => { console.log(error); }); }, assign() { MessageBox.confirm("确认要签核吗？", "提示", { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }).then(res => { this.loading = true; assignJournal({ id: this.detailForm.id }).then(res => { this.loading = false; Message.success("签核成功"); this.closeDialog(); }).catch(error => { this.loading = false; Message.error(error.msg ? error.msg : error); }); }).catch(error => { console.log(error); }); }, handleHttpUpload(options) { return process.env.VUE_APP_BASE_API + '/viewException/uploadImage' }, headers(){ return { "Authorization": 'Bearer ' + getToken() } }, beforeUpload(rawFile) { const imgType = this.fileType.includes(rawFile.type); if (!imgType) { Message.warning({ title: '温馨提示', message: '上传图片不符合所需的格式！', }); } return imgType; }, uploadSuccess(imageListName) { Message.success({ title: '温馨提示', message: '图片上传成功！', }); this.detailForm[imageListName].forEach(item => { if (item.url.indexOf("/api/") < 0) item.url = item.response.url; }); }, uploadError() { Message.error({ title: '温馨提示', message: '图片上传失败，请您重新上传！', }); }, handlePaste(event, uploadRef) { const items = (event.clipboardData || window.clipboardData).items; let file = null; if (!items || items.length === 0) { Message.error("当前浏览器不支持粘贴板"); return; } // 搜索剪切板items for (let i = 0; i < items.length; i++) { if (items[i].type.indexOf("image") !== -1) { file = items[i].getAsFile(); break; } } if (!file) { return; } uploadRef.handleStart(file); // 将粘贴过来的图片加入预上传队列 uploadRef.submit(); // 提交图片上传队列 }, handlePreview(file) { this.previewImageUrl = file.url; this.previewVisible = true; } } }; </script> <style scoped> .layout-padding-custom { padding: 20px; } .border-vxe-table { margin-top: 20px; } </style> 报错vue.runtime.esm.js:620 [Vue warn]: Error in v-on handler: "TypeError: reqs[uid].abort is not a function" found in ---> <ElUploadList> at packages/upload/src/upload-list.vue <ElUpload> at packages/upload/src/index.vue <ElFormItem> at packages/form/src/form-item.vue <ElForm> at packages/form/src/form.vue <ElDialog> at packages/dialog/src/component.vue <Detail> at src/views/mfgLog/area/detail.vue <Index> at src/views/mfgLog/area/index.vue <AppMain> at src/layout/components/AppMain.vue <Layout> at src/layout/index.vue <App> at src/App.vue <Root> warn @ vue.runtime.esm.js:620 logError @ vue.runtime.esm.js:1892 globalHandleError @ vue.runtime.esm.js:1887 handleError @ vue.runtime.esm.js:1847 invokeWithErrorHandling @ vue.runtime.esm.js:1870 invoker @ vue.runtime.esm.js:2187 invokeWithErrorHandling @ vue.runtime.esm.js:1862 Vue.$emit @ vue.runtime.esm.js:3897 click @ element-ui.common.js:28831 invokeWithErrorHandling @ vue.runtime.esm.js:1862 invoker @ vue.runtime.esm.js:2187 original._wrapper @ vue.runtime.esm.js:6951 vue.runtime.esm.js:1896 TypeError: reqs[uid].abort is not a function at VueComponent.abort (element-ui.common.js:29351:21) at VueComponent.abort (element-ui.common.js:29717:34) at doRemove (element-ui.common.js:29688:16) at VueComponent.handleRemove (element-ui.common.js:29695:9) at invokeWithErrorHandling (vue.runtime.esm.js:1862:26) at Proxy.invoker (vue.runtime.esm.js:2187:14) at invokeWithErrorHandling (vue.runtime.esm.js:1862:26) at Vue.$emit (vue.runtime.esm.js:3897:9) at click (element-ui.common.js:28831:37) at invokeWithErrorHandling (vue.runtime.esm.js:1862:26)
08-08
首先，用户的问题是关于Vue Element UI的el-upload组件在特定操作时出现的TypeError错误：`TypeError: reqs[uid].abort is not a function`。用户引用了几个站内引用，这些引用讨论了类似的问题，比如取消上传、v-if...
<template> <div> <div> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label=""> 课程名称 <el-input v-model="form.courseName" style="width: 200px"></el-input> 课程时间 <el-date-picker v-model="startEndTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" > </el-date-picker> <el-button style="background-color: red; color: aliceblue" @click="findCoachAll()" >搜索</el-button > </el-form-item> </el-form> </div> <div id="box"> <ul> <li v-for="v in coachList" :key="v.id"> <div> <el-button @click="booking(v.nickName, v.id)"> <img v-bind:src="v.pic" alt="" /> <h4>{{ v.nickName }}</h4> <p style="white-space: pre-wrap">手机号:{{ v.phoneCode }}</p> <p style="white-space: pre-wrap">{{ v.introduce }}</p> </el-button> </div> </li> </ul> </div> <div> <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center > <h4>是否预约{{ this.bookingContent }}教练</h4> <span slot="footer" class="dialog-footer"> <el-button @click="centerDialogVisible = false">取 消</el-button> <el-button type="primary" @click="bookingCoach">确 定</el-button> </span> </el-dialog> </div> <!-- 分页组件 --> <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page="pageNum" @current-change="handlePageChange" ></el-pagination> </div> </template> <script> import { findCoachAll } from "@/api/user"; import { saveUserCoach } from "@/api/user"; export default { data() { return { pageSize: 9, pageNum: 1, total: 0, bookingContent: "", startEndTime: "", centerDialogVisible: false, coachList: [ { value: "0", id: "", pic: "", nickName: "", phoneCode: "", introduce: "", }, ], form: { startTime: "", endTime: "", nickName: "", resName: "", page: "", size: "", }, userCoach: { userId: "", coachId: "", startTime: "", endTime: "", }, }; }, created() { this.findCoachAll(); }, methods: { booking(nickName, id) { this.bookingContent = nickName; this.userCoach.coachId = id; this.centerDialogVisible = true; }, bookingCoach() { this.userCoach.userId = localStorage.getItem("userId"); console.log(this.startEndTime); saveUserCoach(this.userCoach).then((resp) => { if (resp.data.code == 200) { this.$message.success(resp.data.message); } else { this.$message.error(resp.data.message); } this.userCoach.coachId = ""; this.centerDialogVisible = false; }); }, findCoachAll() { this.form.page = this.pageNum; this.form.size = this.pageSize; this.form.startTime = this.formatDate(this.startEndTime[0]); this.form.endTime = this.formatDate(this.startEndTime[1]); this.userCoach.startTime = this.form.startTime; this.userCoach.endTime = this.form.endTime; this.form.resName = this.form.nickName; console.log(this.form); findCoachAll(this.form).then((resp) => { this.coachList = resp.data.data.courses.list; console.log(resp.data.data.courses.list); this.total = resp.data.data.courses.total; }); }, handlePageChange(page) { this.pageNum = page; this.findCoachAll(); }, }, }; </script> <style scoped> #box ul { display: flex; flex-wrap: wrap; position: absolute; top: 220px; } #box li { padding: 3px; list-style: none; margin-right: 15px; border: 1px solid #eee; } #box img { width: 200px; height: 150px; } </style>报错CoachView.vue:29 [Vue warn]: Error in created hook: "TypeError: this.formatDate is not a function"
09-03
[Vue warn]: Error in created hook: "TypeError: this.formatDate is not a function" ``` ### ❌ 错误原因： 你在 `created()` 生命周期钩子中调用了 `this.findCoachAll()`，而 `findCoachAll()` 方法内部调用...
Error in v-on handler: “TypeError: date.getHours is not a function“
z989ccc的博客
07-20 1785
（前提是你设置了 format 和 value-format）很大原因是我们在使用el-data-pick的时候设置了 format 或者是 value-format，但是我们绑定的元素没有初始值，那么就会报以上的错误。
【Java Web基础】（十六）JS报错：Uncaught TypeError: date.getHours is not a function
passer__jw767的博客
02-05 1280
先上报错： 原本的代码： function formateDate(date){ if(!date instanceof Date){ return ; } var year = date.getFullYear(); var month = date.getMonth() + 1; var date = date.getDate(); var hour = date.getHours(); var minute = date.get
element-ui时间控件报错：TypeError: date.getHours is not a function、“TypeError: date.getFullYear is not a fu
weixin_49573452的博客
02-11 1360
原因：后台与前台接受的数据格式不一致 根据后台实际数据格式设置前台数据格式 value-format=“yyy-MM-dd”
el-date-picker 在原有数据上更改日期的时候，报错TypeError: date.getHours is not a function
white_777的博客
08-12 426
TypeError: date.getHours is not a function
vue+element-ui项目前端报错 date.getHours is not a function解决方法
热门推荐
沉默的小猴子的博客
05-30 2万+
解决方法有两种： 一、先看组件内容是否有错； 官方原生默认组件内容： 注意type为datetime <span class="demonstration">默认</span> <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间"> </el-date-...
使用vue render el-date-picker出现 date.getHours is not a function
chedanquestion的博客
07-07 2096
背景是这样的，客户要自己设计表单，所以表单页面全都是用render函数渲染出来的。 项目使用的是element ui。别的都没问题，就这个el-date-picker出问题了。 渲染出来的元素是这样的 看起来也没啥问题，也能点开，但是就是不能选择日期，点击就报date.getHours is not a function。 报错发生在element-ui.common,js的18439行。打断点仔细对比了正常的和渲染出阿狸的元素走的代码，发现下面这行代码 这个this.value在正常的el-date-
el-date-picker：Error in v-on handler: “TypeError: date.getHours is not a function“ found in
Aa12364567的博客
05-18 510
为时间赋值后，再次使用el-date-picker选择时间，报错。解决方法new Date 转换字符串为 Date 类型。出错原因，时间格式不正确。
element：日期插件：date.getHours is not a function
Crazy_GirlLL的博客
01-09 1572
问题在于，如果给inputVal赋值一个默认值，必须要和value-format的格式一样，他才能解析
【已解决】date.getHours is not a function问题
weixin_43522332的博客
05-23 1万+
问题：date.getHours is not a function； 分析：v-model="emp.beginDate" 中的emp.beginDate是一个数组，而data里面的beginDate："2018/01/01"是一个字符串，不符合！ 解决方法： beginDate:"2018/01/01"改为beginDate:'2018/01/01', 成功解决！！！ ...
Vue3开发利器：谷歌浏览器Vue.js devtools 6.1.4
资源摘要信息:"Vue3谷歌浏览器调试工具Vue.js devtools 6.1.4" Vue.js devtools是专门针对Vue.js框架的调试扩展工具，旨在提供更为直观和便捷的方式来进行Vue应用的调试工作。随着Vue.js版本的迭代，Vue.js ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值