130 lines
2.4 KiB
Plaintext
130 lines
2.4 KiB
Plaintext
<template>
|
|
<view class="date-range-picker">
|
|
<view class="picker-item">
|
|
<text class="label">开始日期</text>
|
|
<picker mode="date" :value="startDate" @change="onStartDateChange">
|
|
<view class="picker-value">{{ startDate || '请选择' }}</view>
|
|
</picker>
|
|
</view>
|
|
<view class="picker-item">
|
|
<text class="label">结束日期</text>
|
|
<picker mode="date" :value="endDate" @change="onEndDateChange">
|
|
<view class="picker-value">{{ endDate || '请选择' }}</view>
|
|
</picker>
|
|
</view>
|
|
<view class="actions">
|
|
<button class="btn apply" @click="applyRange">应用</button>
|
|
<button class="btn clear" @click="clearRange">清空</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, watch } from 'vue'
|
|
|
|
const props = defineProps({
|
|
initialStartDate: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
initialEndDate: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['apply', 'clear'])
|
|
|
|
const startDate = ref(props.initialStartDate)
|
|
const endDate = ref(props.initialEndDate)
|
|
|
|
watch(() => props.initialStartDate, (val) => {
|
|
startDate.value = val
|
|
})
|
|
|
|
watch(() => props.initialEndDate, (val) => {
|
|
endDate.value = val
|
|
})
|
|
|
|
function onStartDateChange(e : any) {
|
|
startDate.value = e.detail.value
|
|
}
|
|
|
|
function onEndDateChange(e : any) {
|
|
endDate.value = e.detail.value
|
|
}
|
|
|
|
function applyRange() {
|
|
if (startDate.value && endDate.value) {
|
|
emit('apply', { start: startDate.value, end: endDate.value })
|
|
} else {
|
|
uni.showToast({ title: '请选择完整的日期范围', icon: 'none' })
|
|
}
|
|
}
|
|
|
|
function clearRange() {
|
|
startDate.value = ''
|
|
endDate.value = ''
|
|
emit('clear')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.date-range-picker {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
padding: 12px;
|
|
background-color: #f8f9fa;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.picker-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.label {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.picker-value {
|
|
padding: 8px 12px;
|
|
background-color: #fff;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
border-radius: 4px;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn.apply {
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn.clear {
|
|
background-color: #6c757d;
|
|
color: #fff;
|
|
}
|
|
</style>
|