RentWeAppFront/components/DatePicker/DateFilter.vue

<template>
  <view class="date-filter">

    <!-- 开始日期 -->
    <view class="filter-item" @click="$refs.startPicker.open(startDate)">
      <text class="label">开始日期</text>
      <text class="value">{{ startDate || '请选择' }}</text>
    </view>

    <view class="divider"></view>

    <!-- 结束日期 -->
    <view class="filter-item" @click="$refs.endPicker.open(endDate)">
      <text class="label">结束日期</text>
      <text class="value">{{ endDate || '请选择' }}</text>
    </view>

    <!-- 开始日期选择器 -->
    <DatePicker 
      v-model="startDate"
      ref="startPicker"
      @confirm="selectStart"
    />

    <!-- 结束日期选择器 -->
    <DatePicker 
      v-model="endDate"
      ref="endPicker"
      @confirm="selectEnd"
    />

  </view>
</template>

<script>
import DatePicker from './DatePicker.vue';

export default {
  name: 'DateFilter',
  components: { DatePicker },

  props: {
    start: { type: String, default: '' },
    end: { type: String, default: '' }
  },

  data() {
    return {
      startDate: this.start,
      endDate: this.end
    };
  },

  methods: {
    /** 选择开始日期 */
    selectStart(e) {
      this.startDate = e;
      this.$emit('update:start', e);
      this.$emit('change', { start: this.startDate, end: this.endDate });
    },

    /** 选择结束日期 */
    selectEnd(e) {
      this.endDate = e;
      this.$emit('update:end', e);
      this.$emit('change', { start: this.startDate, end: this.endDate });
    }
  }
};
</script>

<style scoped lang="scss">
.date-filter {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #ffffff;
  border-radius: 12rpx;
}

.filter-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.label {
  font-size: 24rpx;
  color: #888;
}

.value {
  font-size: 28rpx;
  padding-left: 30rpx;
  color: #333;
  margin-top: 6rpx;
}

.divider {
  width: 2rpx;
  height: 40rpx;
  background: #e5e5e5;
  margin: 0 20rpx;
}
</style>