如何在时间选择器内将选择的时间显示格式为yyyy-mm-dd

在 Vue 组件中，可以通过 `formatTimestamp` 方法将时间戳格式化为 `yyyy-mm-dd` 格式，并在时间选择器的 `@confirm` 事件中更新 `editableData.CORRE_FINTIME` 的值。以下是具体实现步骤： 1. **定义 `formatTimestamp` 方法**：该方法将时间戳转换为 `yyyy-mm-dd` 格式。 2. **在 `confirm` 方法中调用 `formatTimestamp` 方法**：当用户在时间选择器中选择时间并确认时，将选择的时间格式化为 `yyyy-mm-dd` 并更新 `editableData.CORRE_FINTIME`。 ### 代码示例 #### 定义 `formatTimestamp` 方法 在 `methods` 对象中添加 `formatTimestamp` 方法： ```javascript methods: { formatTimestamp(timestamp) { const date = new Date(timestamp); return date.toISOString().substring(0, 10); // 格式化为 YYYY-MM-DD }, // 其他方法... } ``` #### 在 `confirm` 方法中调用 `formatTimestamp` 方法 在 `confirm` 方法中调用 `formatTimestamp` 方法，将选择的时间格式化为 `yyyy-mm-dd`： ```javascript methods: { formatTimestamp(timestamp) { const date = new Date(timestamp); return date.toISOString().substring(0, 10); // 格式化为 YYYY-MM-DD }, confirm(e) { this.show2 = false; this.editableData.CORRE_FINTIME = this.formatTimestamp(e.value); }, // 其他方法... } ``` ### 完整的 `methods` 对象 ```javascript methods: { formatTimestamp(timestamp) { const date = new Date(timestamp); return date.toISOString().substring(0, 10); // 格式化为 YYYY-MM-DD }, takePhoto() { uni.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['camera'], // 只能选择拍照 success: (res) => { const tempFilePaths = res.tempFilePaths; this.fileList = [ // 更新 fileList { url: tempFilePaths[0], status: 'success', message: '' } ]; // 保存图片到相册 uni.saveImageToPhotosAlbum({ filePath: tempFilePaths[0], success: function() { uni.showToast({ title: '已保存到相册', icon: 'success' }); }, fail: function(err) { uni.showToast({ title: '保存失败，请检查权限设置', icon: 'none' }); console.error('保存图片到相册失败:', err); } }); console.log(this.fileList); } }); }, async afterRead(event) { let lists = [].concat(event.file); let fileListLen = this[`fileList${event.name}`].length; lists.map((item) => { this[`fileList${event.name}`].push({ ...item, status: 'uploading', message: '上传中' }); }); for (let i = 0; i < lists.length; i++) { const result = await this.uploadFilePromise(lists[i].url); let parsedResult = JSON.parse(result); let item = this[`fileList${event.name}`][fileListLen]; this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, { status: 'success', message: '', url: parsedResult.data })); fileListLen++; } console.log(this.fileList); }, deletePic(e) { this['fileList'].splice(0, 1); }, uploadFilePromise(url) { const header = { 'Authorization': `Bearer ${getToken()}` }; return new Promise((resolve, reject) => { uni.uploadFile({ url: 'http://27.156.229.2:9001/api/danger_rectify_record/upload', filePath: url, header: header, name: 'fileinput', success: (res) => { console.log('Upload success:', res); resolve(res.data); }, fail: (err) => { console.error('Upload failed:', err); reject(err); } }); }); }, fetchData() { const params = { page: 1, rows: 30, sort: "DANGER_R_ID", order: "desc", wheres: JSON.stringify([{ name: "ORDER_STATUS", value: "1" }, { name: "DANGER_R_ID", value: this.selectedRecordId }]) }; request({ url: '/api/danger_rectify_record/getPageData', method: 'POST', header: { 'content-type': 'application/json', 'Authorization': `Bearer ${getToken()}` }, data: params, dataType: 'json' }).then(response => { this.data = response; if (this.data.rows.length > 0) { this.editableData = { ...this.data.rows[0] }; } this.editableData.DANGER_PIC = 'http://27.156.229.2:9001/' + this.editableData.DANGER_PIC console.log(this.editableData.DANGER_PIC) this.dataLoaded = true; }).catch(error => { console.error(error); uni.showToast({ title: '请求失败', icon: 'none' }); }); }, handleSubmit() { console.log(this.editableData); const mainData = {}; if (this.fileList.length !== 0) { mainData.CORRE_FINPIC = this.fileList[0].url + this.fileList[0].name; // 使用 fileList 中的路径 } if (this.editableData.CORRE_FINTIME) { mainData.CORRE_FINTIME = this.editableData.CORRE_FINTIME; // 直接发送 YYYY-MM-DD 格式的日期 } mainData.DANGER_R_ID = this.editableData.DANGER_R_ID; mainData.ORDER_STATUS = 2; console.log(mainData); request({ url: '/api/Rectification/update', method: 'POST', header: { 'content-type': 'application/json', 'Authorization': `Bearer ${getToken()}` }, data: { mainData }, dataType: 'json' }).then(response => { console.log(response); uni.showToast({ title: '更新成功', icon: 'success' }); }).catch(error => { console.error(error); uni.showToast({ title: '更新失败', icon: 'none' }); }); }, close() { this.show2 = false; }, cancel() { this.show2 = false; }, confirm(e) { this.show2 = false; this.editableData.CORRE_FINTIME = this.formatTimestamp(e.value); }, change(e) { // console.log('change', e); }, result(time, mode) { const timeFormat = uni.$u.timeFormat, toast = uni.$u.toast; if (mode === 'date') { return toast(timeFormat(time, 'yyyy-mm-dd')); } return ''; }, showDatetimePicker() { this.show2 = true; }, }, ``` 通过以上步骤，你可以确保在时间选择器中选择的时间被格式化为 `yyyy-mm-dd` 格式，并正确显示在表单中。