app_vue2/components/Layout/DataTimingRange.vue

<template>
  <main class="d-flex align-baseline">

    <UiInputDatePicker class="time-range" v-if="showRange" label="period_choose" :data="[]" :range="true"/>

    <v-tooltip bottom>
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          class="time-btn"
          max-height="25"
          v-bind="attrs"
          v-on="on"
          @click="showRange=!showRange"
          elevation="0"
          max-width="10px"
          min-width="10px"
        >
          <v-icon color="ot_grey" class="font-weight-normal" x-small>fas fa-history</v-icon>
        </v-btn>
      </template>
      <span>{{$t('history_help')}}</span>
    </v-tooltip>

  </main>
</template>

<script lang="ts">
  import {defineComponent, ref} from '@nuxtjs/composition-api'

  export default defineComponent({
    setup() {
      const showRange = ref(false)

      return {
        showRange
      }
    }
  })
</script>

<style lang="scss">
  .v-btn--active .v-icon{
    color: #FFF !important;
  }
  .time-btn{
    border-width: 1px 1px 1px 0px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.12) !important;
  }
  .time-range{
    max-height: 20px;
    .v-text-field{
      padding-top: 0 !important;
      margin-top: 0 !important;
    }
    .v-icon{
      font-size: 16px;
    }
    input{
      font-size: 14px;
      width: 200px !important;
    }
  }
</style>