59 lines
1.1 KiB
Vue
59 lines
1.1 KiB
Vue
<template>
|
|
<view>
|
|
<view class="u-flex date-filter-box " @click="show">
|
|
<view>
|
|
<text class="color-999" v-if="!startDate">开始日期</text>
|
|
<text class="" v-else>
|
|
{{ showDate(startDate)}}
|
|
</text>
|
|
</view>
|
|
<text>至</text>
|
|
<view>
|
|
<text class="color-999" v-if="!endDate">结束日期</text>
|
|
<text class="" v-else>
|
|
{{ showDate(endDate)}}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<my-date-pickerview mode="date" @confirm="datePickerConfirm" ref="datePicker"
|
|
style="z-index: 999"></my-date-pickerview>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from 'vue';
|
|
import dayjs from 'dayjs';
|
|
|
|
const startDate = defineModel('start')
|
|
const endDate = defineModel('end')
|
|
|
|
const datePicker = ref(null)
|
|
|
|
function show() {
|
|
datePicker.value.open()
|
|
}
|
|
|
|
function datePickerConfirm(e) {
|
|
console.log(e);
|
|
startDate.value = e.start
|
|
endDate.value = e.end
|
|
}
|
|
function showDate(str){
|
|
if(str){
|
|
return str.split(' ')[0]
|
|
}
|
|
return ''
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.date-filter-box {
|
|
border: 1px solid #eee;
|
|
padding: 10rpx 32rpx;
|
|
justify-content: space-between;
|
|
border-radius: 12rpx;
|
|
}
|
|
</style> |