69 lines
1.4 KiB
Vue
69 lines
1.4 KiB
Vue
<template>
|
|
<section class="AiDate">
|
|
<u-calendar v-model="show" :maxDate="maxDate"
|
|
@change="handleSelect" :mode="mode" @close="show=false"/>
|
|
<div flex @click="show=true">
|
|
<div class="label" v-if="label" v-html="label"/>
|
|
<div class="placeholder" v-else v-html="placeholder"/>
|
|
<u-icon name="arrow-right" color="#ddd"/>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import dayjs from 'dayjs'
|
|
|
|
export default {
|
|
name: "AiDate",
|
|
computed: {
|
|
label() {
|
|
let arr = (this.selected || this.value)?.toString()?.split(",") || []
|
|
arr = arr.map(e => dayjs(e).format("YYYY-MM-DD").replace("Invalid Date", ''))
|
|
return arr.join('至')
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
selected: ""
|
|
}
|
|
},
|
|
props: {
|
|
value: {default: ""},
|
|
placeholder: {default: "请选择"},
|
|
mode: {default: "date"},//date 单个日期|range 日期范围
|
|
maxDate: String
|
|
},
|
|
methods: {
|
|
handleSelect(v) {
|
|
if (this.mode == 'date') {
|
|
this.selected = v.result
|
|
this.$emit('change', v.result)
|
|
} else if (this.mode == 'range') {
|
|
this.selected = [v.startDate, v.endDate]
|
|
this.$emit('change', v)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AiDate {
|
|
color: #333333;
|
|
font-size: 30px;
|
|
|
|
.label {
|
|
font-size: 30px;
|
|
}
|
|
|
|
::v-deep .u-icon {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.placeholder {
|
|
color: $uni-text-color-grey;
|
|
}
|
|
}
|
|
</style>
|