mobile/src/components/date-range.vue

<template>
  <view>
    <u-input :value="dateStr" type="select" :border="true" placeholder="请输入" clearable @click="show = true" />
    <u-calendar v-model="show" mode="range" @change="change"></u-calendar>
  </view>
</template>
<script>
  export default {
    name: 'DateRange',
    props: ['value'],
    data() {
      return {
        show: false,
        dateStr: ''
      }
    },
    methods: {
      change(val) {
        this.dateStr = val.startDate + ' - ' + val.endDate
        this.$emit('update:value', [new Date(val.startDate).getTime(), new Date(val.endDate).getTime()])
      }
    }
  }
</script>
<style lang="scss" scoped></style>