需求:根據開始時間,通過填寫階段時長,自動填寫結束時間,同時開始時間和節數時間可以手動輸入
代碼如下:
<el-form ref="ruleForm2" :rules="rules2" :model="formData" inline label-position="right" label-width="120px"> <el-form-item label="開始時間" prop="beginTime"><el-date-pickerv-model="formData.beginTime"v-elDateFormateditablevalue-format="timestamp"type="date"placeholder="請選擇日期"clearablestyle="width: 180px"@change="changeEndTime"/></el-form-item><!-- 添加一個階段時長 --><el-form-item label="階段時長" prop="stageDuration"><el-input v-model="formData.stageDuration" style="width: 180px" @blur="stageDurationBlur" /><span class="span_style">(最小單位半月)</span></el-form-item><el-form-item label="結束時間" prop="endTime"><el-date-pickerv-model="formData.endTime"v-elDateFormateditablevalue-format="timestamp"type="date"placeholder="請選擇日期"clearablestyle="width: 180px"/></el-form-item>
</el-form>
?
changeEndTime(time) {
//這里是項目的一個判斷 與主體邏輯無關if (this.formData.stageNature == 'point') {// this.formData.endTime = this.timestampToYYYYMMDD(time)this.formData.endTime = time} else {this.calculateEndDate()}},stageDurationBlur(e) {if (this.formData.stageNature !== 'point' && this.formData.beginTime && e.target.value) {this.calculateEndDate()}},calculateEndDate() {if (this.formData.beginTime && this.formData.stageDuration) {const beginTime = new Date(this.formData.beginTime)const duration = parseFloat(this.formData.stageDuration)if (!isNaN(duration) && duration > 0) {const daysToAdd = Math.floor(duration * 15) // 將輸入的值乘以15天const endTime = new Date(beginTime)endTime.setDate(beginTime.getDate() + daysToAdd)this.formData.endTime = endTime.getTime()} else {this.formData.endTime = ''}}},
?
手動輸入日期,默認回顯日期功能,我這邊后端參數需要的是時間戳,使用時需要看清楚后端需要的數據類型
watch: {formData: {handler(newValue, oldValue) {if (newValue.beginTime && newValue.beginTime != '') {// 判斷有沒有橫杠 輸入的日期 格式是 2024-07-15的,或者是20240715這種 if (typeof newValue.beginTime === 'string' && newValue.beginTime.indexOf('-') == -1) {let str = newValue.beginTimeconst positions = [4, 6]const char = '-'for (let i = positions.length - 1; i >= 0; i--) {const position = positions[i]str = str.substring(0, position) + char + str.substring(position)}this.formData.beginTime = str}} else {this.formData.beginTime = ''}},immediate: true,deep: true}},
效果圖: