Vue 使用Vant制作H5开始时间至截止时间选择器

Vue 使用Vant制作H5开始时间至截止时间选择器

selectDateOrName.vue

<template>
  <div>
    <template v-if='dateFilter'>
      <van-cell is-link
                @click="showPopup('start')"
                title="开始时间"
                :value="formatStartDate" />
      <van-cell is-link
                @click="showPopup('end')"
                title="结束时间"
                :value="formatEndDate" />
    </template>
    <template v-if='nameFilter'>
      <van-search placeholder="请输入搜索关键词"
                  v-model="name" />
    </template>

    <div class="button-line">
      <div class="button">
        <van-button type="default"
                    size="large"
                    @click="clearData">清空</van-button>
      </div>
      <div class="button">
        <van-button plain
                    hairline
                    type="primary"
                    size="large"
                    @click="search">搜索</van-button>
      </div>
    </div>
    <van-popup v-model="showStartDatePopup"
               position="bottom">
      <!--:style="{height:'50%'}"-->
      <van-datetime-picker v-model="startDate"
                           type="date"
                           @confirm="checkStartDate"
                           @cancel="closeStart" />
    </van-popup>
    <van-popup v-model="showEndDatePopup"
               position="bottom">
      <!--:style="{height:'50%'}"-->
      <van-datetime-picker v-model="endDate"
                           type="date"
                           :min-date="startDate"
                           @confirm="checkEndtDate"
                           @cancel="closeEnd" />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'selectDateOrName',
  props: {
    dateFilter: Boolean, //使用日期过滤器
    nameFilter: Boolean, //使用名称过滤器
  },
  data() {
    return {
      name: '',
      formatStartDate: '',
      formatEndDate: '',
      startDate: new Date(),
      endDate: new Date(),
      showStartDatePopup: false,
      showEndDatePopup: false,
    }
  },
  methods: {
    loadData() {
      //初始化数据
      this.clearData()
    },
    clearData() {
      this.formatStartDate = ''
      this.formatEndDate = ''
      this.startDate = new Date()
      this.endDate = new Date()
      this.name = ''
    },
    showPopup(type) {
      if (type === 'start') {
        this.showStartDatePopup = true
      } else if (type === 'end' && this.formatStartDate != '') {
        this.showEndDatePopup = true
      }
    },
    checkStartDate() {
      this.formatStartDate = this.$dateFormat(this.startDate, 'YYYY-MM-DD')
      this.showStartDatePopup = false
    },
    checkEndtDate() {
      this.formatEndDate = this.$dateFormat(this.endDate, 'YYYY-MM-DD')
      this.showEndDatePopup = false
    },
    closeStart() {
      this.showStartDatePopup = false
    },
    closeEnd() {
      this.showEndDatePopup = false
    },
    search() {
      let payload = {}
      if (this.nameFilter) {
        payload = { ...payload, name: this.name }
      }
      if (this.dateFilter) {
        if (this.formatStartDate) {
          if (!this.formatEndDate) {
            this.$toast.fail('请选择结束时间')
            return
          }
          if (this.formatStartDate >this.formatEndDate) {
            this.$toast.fail('结束时间不能早于开始时间')
            return
          }
        }
        payload = { ...payload, begin: this.formatStartDate }
        payload = { ...payload, end: this.formatEndDate }
      }
      this.$emit('search', payload)
    },
  },
  mounted() {
    this.loadData()
  },
}
</script>
<style scoped>
.button-line {
  width: 100%;
  background-color: #fff;
  display: inline-flex;
}

.button {
  width: 50%;
  text-align: center;
}
</style>

调用组件

<template>
 <div class="select">
      <van-collapse v-model="activeNames"
                    accordion>
        <van-collapse-item :value="activeNames==='1'?'收起':'更多'"
                           name="1">
          <selectDateOrName :dateFilter="true"
                            :nameFilter="false"
                            @search="handleSearch" />
        </van-collapse-item>
      </van-collapse>
        </div>
</template>
<script>
import selectDateOrName from '@/components/selectDateOrName'
export default {
name:'select',
 components: { selectDateOrName },
 data() {
    return {
     activeNames: '0',
           }
   },
   methods:{
   handleSearch(extra) {
     console.log(extra)
    },
   }
}
</script>

效果图