<template>
  <div class="x-date-range q-gutter-x-sm">
    <q-list :style="listStyle">
      <q-item>
        <q-item-section side>{{ $t('base.dateRange.from') }}</q-item-section>
        <q-item-section>
          <date-input
            :filled="filled"
            :value="from"
            hide-bottom-space
            class="q-px-sm font-12"
            @input="inputHandler($event, 'from')"
          />
        </q-item-section>
      </q-item>
      <q-item>
        <q-item-section side>{{ $t('base.dateRange.to') }}</q-item-section>
        <q-item-section>
          <date-input
            :filled="filled"
            :value="to"
            hide-bottom-space
            class="q-px-sm font-12"
            @input="inputHandler($event, 'to')"
          />
        </q-item-section>
      </q-item>
    </q-list>
  </div>
</template>

<script lang="ts" src="./index.ts"></script>

<style lang="sass" src="./index.sass"></style>
