element-ui时间选择器(el-date-picker)-⽀持多种输⼊格式、中
⽂格式
全局注册⾃定义指令
// 时间选择器 - 多种输⼊格式 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 // 转换时间格式 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 } }) } } })
⽤法:v-date-format
v-model=\"form.applicantBirthday\" type=\"date\"placeholder=\"请选择⽇期时间\" format=\"yyyy年MM⽉dd⽇\" value-format=\"yyyy-MM-dd\">
⾃定义赋值
v-date-format=\"{ keys: ['additionalInfo', 'otherInfo', i, 'infoValue'] }\" format=\"yyyy年MM⽉dd⽇\" v-model=\"p.infoValue\" type=\"date\"placeholder=\"选择⽇期时间\" @change=\"translateTimes(p,i)\">