80 lines
1.9 KiB
Vue
80 lines
1.9 KiB
Vue
<template>
|
|
<view>
|
|
<view class="u-flex">
|
|
<view class="item" @click="pirckerShow(startDate, 'startDate')">
|
|
<text class="u-m-r-12" v-if="!startDate">请选择日期范围</text>
|
|
<text class="u-m-r-12" v-else>{{ startDate }}</text>
|
|
<up-icon name="arrow-down" size="14"></up-icon>
|
|
</view>
|
|
<view class="u-m-l-8 u-m-r-8">—</view>
|
|
<view class="item" @click="pirckerShow(endDate, 'endDate')">
|
|
<text class="u-m-r-12" v-if="!endDate">请选择日期范围</text>
|
|
<text class="u-m-r-12" v-else>{{ endDate }}</text>
|
|
<up-icon name="arrow-down" size="14"></up-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<up-datetime-picker
|
|
:show="show"
|
|
v-model="value1"
|
|
closeOnClickOverlay
|
|
@close="close"
|
|
@cancel="close"
|
|
@confirm="confirm"
|
|
mode="date"
|
|
></up-datetime-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from "vue";
|
|
import dayjs from "dayjs";
|
|
const startDate = defineModel("startDate", {
|
|
type: String,
|
|
default: "",
|
|
});
|
|
const endDate = defineModel("endDate", {
|
|
type: String,
|
|
default: "",
|
|
});
|
|
|
|
const minDate = ref(0);
|
|
const maxDate = ref(dayjs().add(80, "year").valueOf());
|
|
function close() {
|
|
show.value = false;
|
|
}
|
|
const value1 = ref(Date.now());
|
|
const show = ref(false);
|
|
const nowKey = ref("");
|
|
|
|
function pirckerShow(date, key) {
|
|
nowKey.value = key;
|
|
console.log(date);
|
|
show.value = true;
|
|
}
|
|
|
|
function confirm(e) {
|
|
console.log(e);
|
|
|
|
if (nowKey.value == "startDate") {
|
|
startDate.value = dayjs(e.value).format("YYYY-MM-DD");
|
|
} else if (nowKey.value == "endDate") {
|
|
endDate.value = dayjs(e.value).format("YYYY-MM-DD");
|
|
}
|
|
value1.value = e.value
|
|
show.value = false;
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.item {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
line-height: 64rpx;
|
|
border: 2rpx solid #dddfe6;
|
|
padding: 0 12rpx;
|
|
display: flex;
|
|
}
|
|
</style>
|