- 輸入 20210824腐晾，回車(chē)即可選擇 2021-08-24（保存2021-08-24格式）
- 解決辦法：（自定義指令，加到main.js即可）
參考1：https://blog.csdn.net/weixin_44490109/article/details/114633843（moment報(bào)錯(cuò)，用注釋掉的方法即可）
參考2：https://www.cnblogs.com/senjer/p/13524032.html - main.js（參考2為例）
// 時(shí)間選擇器 - 多種輸入格式
Vue.directive('dateFormat', {
inserted: function (el, binding, vnode) {
const { value: _obj } = binding
const { context: that, data } = vnode
const { expression: key } = data.model
if(that && that._isVue) {
const $this = $($(el).children('input')[0])
$this.on('change', function() {
let value = $this.val()
// 中文日期
if (!value.match(/\d{1,}/g)) {
const chinaNum = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九']
const wList = [...value].map(w => {
const idx = chinaNum.findIndex(p => p == w)
return idx == -1 ? w : idx
})
value = wList.join('')
}
value = value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*/, '$1-$2-$3') // 格式化輸入格式
const time = value && value.constructor == String ? new Date(value) : value // 轉(zhuǎn)換時(shí)間格式
let keys = key.split('.')
// 自定義賦值
if (_obj) {
const { keys: keyList } = _obj
keys = keyList
}
if (keys && keys.length >= 2) {
const [key1, key2, key3, key4] = keys
if (key4) {
that[key1][key2][key3][key4] = time
} else if (key3) {
that[key1][key2][key3] = time
} else {
that[key1][key2] = time
}
} else {
that[key] = time
}
})
}
}
})
- html
<el-date-picker
v-date-format // 輸入格式自定義
v-model="ruleForm.birthday"
type="date"
value-format="yyyy-MM-dd" format="yyyy-MM-dd" // 保存的日期格式
:picker-options="option"
placeholder="出生日期" @change="birthdayChange">
</el-date-picker>
- data
option: {
disabledDate(time) {
// 選擇今日之前的日期（今天不可選）
return time.getTime() > Date.now();
}
},
https://www.cnblogs.com/xjcjcsy/p/7977966.html
- methods
// 選擇出生日期
birthdayChange () {
this.patientAge = this.jsGetAge(this.ruleForm.birthday) + '歲' // 獲取年齡
},
/*根據(jù)出生日期算出年齡*/
jsGetAge(strBirthday) {
var returnAge;
var strBirthdayArr = strBirthday.split("-");
var birthYear = strBirthdayArr[0];
var birthMonth = strBirthdayArr[1];
var birthDay = strBirthdayArr[2];
var d = new Date();
var nowYear = d.getFullYear();
var nowMonth = d.getMonth() + 1;
var nowDay = d.getDate();
if (nowYear == birthYear) {
returnAge = 0; //同年 則為0歲
} else {
var ageDiff = nowYear - birthYear; //年之差
if (ageDiff > 0) {
if (nowMonth == birthMonth) {
var dayDiff = nowDay - birthDay; //日之差
if (dayDiff < 0) {
returnAge = ageDiff - 1;
} else {
returnAge = ageDiff;
}
} else {
var monthDiff = nowMonth - birthMonth; //月之差
if (monthDiff < 0) {
returnAge = ageDiff - 1;
} else {
returnAge = ageDiff;
}
}
} else {
returnAge = -1; //返回-1 表示出生日期輸入錯(cuò)誤 晚于今天
}
}
return returnAge; //返回周歲年齡
},
- 以上兩個(gè)方法的缺陷：
回車(chē)選中后丧叽，點(diǎn)擊其他地方失去焦點(diǎn)后，v-model綁定的格式，會(huì)發(fā)生變化
如：輸入 19980126狡忙，回車(chē)后v-model綁定 1998-01-26，但是如果點(diǎn)擊其他地方址芯，失去焦點(diǎn)灾茁，v-model綁定的值為 Mon Jan 26 1998 08:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
- 缺陷解決辦法：
判斷v-model綁定值的類(lèi)型，做時(shí)間格式轉(zhuǎn)換
1998-01-26 —— string
Mon Jan 26 1998 08:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) —— object
// 選擇出生日期
birthdayChange () {
if (!this.ruleForm.birthday) { // 清空日期的時(shí)候谷炸，清空年齡
this.patientAge = null
return
}
if (typeof this.ruleForm.birthday != 'string') {
this.ruleForm.birthday = this.formatDate(this.ruleForm.birthday)
}
this.patientAge = this.jsGetAge(this.ruleForm.birthday) + '歲'
},
// 日期或日期時(shí)間格式
formatDate (date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
if (month < 10) {
month = "0" + month;
}
if (day < 10) {
day = "0" + day;
}
return year + '-' + month + '-' + day
},
- 備注（2021.11.8）
如果v-model是動(dòng)態(tài)值
let keys = key.split('.') 這行會(huì)報(bào)錯(cuò)
例如：v-model="ruleForm[item.value]"
自定義指令這行代碼北专，可修改為
// let keys = key.split('.')
let keys = key.split('[')
keys = [keys[0], vnode.context, item.value] // item.value可自定義，根據(jù)v-model綁定的值確定旬陡，僅限參考
tips：有朋友提了這個(gè)問(wèn)題拓颓，所以補(bǔ)充一下
