123 lines
3.4 KiB
Vue
123 lines
3.4 KiB
Vue
|
<template>
|
|||
|
|
<div class="select">
|
|||
|
|
<van-field
|
|||
|
|
v-model="result"
|
|||
|
|
v-bind="$attrs"
|
|||
|
|
readonly
|
|||
|
|
is-link
|
|||
|
|
@click="show = !show"
|
|||
|
|
/>
|
|||
|
|
<van-popup v-model="show" position="bottom">
|
|||
|
|
<!-- $attrs 可以把根节点的attr放到目标组件上，如此可以像使用 DatePicker 组件一样使用这个新组件 -->
|
|||
|
|
<van-datetime-picker
|
|||
|
|
v-bind="$attrs"
|
|||
|
|
:type="type"
|
|||
|
|
title="请选择日期"
|
|||
|
|
:min-date="minDate"
|
|||
|
|
:max-date="maxDate"
|
|||
|
|
@cancel="cancel"
|
|||
|
|
@confirm="confirm"
|
|||
|
|
/>
|
|||
|
|
</van-popup>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: 'VantFieldDate',
|
|||
|
|
model: {
|
|||
|
|
prop: 'selectValue'
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
type: {
|
|||
|
|
type: String,
|
|||
|
|
default: null
|
|||
|
|
},
|
|||
|
|
selectValue: {
|
|||
|
|
type: [String, Number, Date],
|
|||
|
|
default: undefined // 值不能是 null，DatePicker会报错
|
|||
|
|
},
|
|||
|
|
minDate: {
|
|||
|
|
type: Date,
|
|||
|
|
default: undefined
|
|||
|
|
},
|
|||
|
|
maxDate: {
|
|||
|
|
type: Date,
|
|||
|
|
default: undefined
|
|||
|
|
},
|
|||
|
|
// 展示的格式化
|
|||
|
|
format: {
|
|||
|
|
type: String,
|
|||
|
|
default: null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 展示的格式化，时间提交的值是Date类型数据
|
|||
|
|
formatFormula() {
|
|||
|
|
if (this.format) {
|
|||
|
|
return this.format
|
|||
|
|
} else if (this.type === 'date') {
|
|||
|
|
return 'yyyy-MM-dd'
|
|||
|
|
} else if (this.type === 'datetime') {
|
|||
|
|
return 'yyyy-MM-dd hh:mm'
|
|||
|
|
} else if (this.type === 'time') {
|
|||
|
|
return 'hh:mm'
|
|||
|
|
} else if (this.type === 'year-month') {
|
|||
|
|
return 'yyyy-MM'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
result() {
|
|||
|
|
return this.selectValue ? this.dateFormat(this.selectValue, this.formatFormula) : ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
dateFormat: (value, format) => {
|
|||
|
|
if (!value) return
|
|||
|
|
if (!(value instanceof Date)) {
|
|||
|
|
value = new Date(value)
|
|||
|
|
}
|
|||
|
|
let o = {
|
|||
|
|
'M+': value.getMonth() + 1, // month
|
|||
|
|
'd+': value.getDate(), // day
|
|||
|
|
'h+': value.getHours(), // hour
|
|||
|
|
'm+': value.getMinutes(), // minute
|
|||
|
|
's+': value.getSeconds(), // second
|
|||
|
|
'q+': Math.floor((value.getMonth() + 3) / 3), // quarter
|
|||
|
|
'S': value.getMilliseconds() // millisecond
|
|||
|
|
}
|
|||
|
|
if (!format || format === '') {
|
|||
|
|
format = 'yyyy-MM-dd hh:mm:ss'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (/(y+)/.test(format)) {
|
|||
|
|
format = format.replace(RegExp.$1, (value.getFullYear() + '').substr(4 - RegExp.$1.length))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
for (let k in o) {
|
|||
|
|
if (new RegExp('(' + k + ')').test(format)) {
|
|||
|
|
format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return format
|
|||
|
|
},
|
|||
|
|
confirm(value) {
|
|||
|
|
// 更新 v-model 绑定的 value 值，第二个参数是毫秒数，第三个参数是原始值，根据自己的项目的数据结构来修改
|
|||
|
|
// input 事件同时也会触发 vee-validate 的验证事件
|
|||
|
|
this.$emit('input', value.getTime(), value)
|
|||
|
|
// onChange事件，虽然重写 @input可以实现，但这样会破坏 v-model 写法。
|
|||
|
|
this.$emit('change', value.getTime(), value)
|
|||
|
|
this.show = false;
|
|||
|
|
},
|
|||
|
|
cancel() {
|
|||
|
|
this.$emit('cancelDate');
|
|||
|
|
this.show = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|