Custom filtering data table with specific time range

[wng97]

Hi all, any idea with the filter-method if i want to use it on date filtering for specific days range? i tried to search through the quasar documents for an example, but after looking through it i still dont quite understand how to use it. Any Hero gonna save me out, thanks.

Below is some of my code:

    <q-table
      title="Loan List"
      :filter="filter"
      :filter-method="dateFilter"
      :data="dataTable"
      :columns="dataColumns"
      :pagination.sync="pagination"
      row-key="id"
    >
      <template slot="top-left">
        <!-- <q-input color="secondary" v-model="filter" label="Filter" /> -->
	      <q-input
          :value="selectedDate"
          mask="date"
          :rules="['date']"
          placeholder="Date"
        >
          <template v-slot:append>
            <q-icon name="event" class="cursor-pointer">
              <q-popup-proxy
                ref="qDateProxy"
                transition-show="scale"
                transition-hide="scale"
              >
                <q-date
                  :value="selectedDate"
                  :filter-method="dateFilter"
                  range
                >
                </q-date>
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
      </template>

      <template v-slot:top-right>
        <q-btn
          color="primary"
          label="Create New Loan"
          @click="onClickAddLoan"
        />
      </template>

      <q-tr slot="body" slot-scope="props" :props="props">
        <q-td auto-width key="id" :props="props">
          <q-btn
            round
            dense
            size="sm"
            color="secondary"
            icon="edit"
            v-on:dblclick.native="onClickUpdateLoan(props.row.id)"
          >
            <q-tooltip>Double Click to Open</q-tooltip>
          </q-btn>
        </q-td>
        <q-td key="dailyLoanDate" :props="props">{{
          date_format(props.row.dailyLoanDate)
        }}</q-td>
        <q-td key="createdBy" :props="props">{{ props.row.createdBy.username }}</q-td>
        <q-td key="company" :props="props">{{ props.row.company.name }}</q-td>
        <q-td key="inAmount" :props="props">{{
          props.row.inAmount | toCurrency
        }}</q-td>
        <q-td key="capitalOutAmount" :props="props">{{
          props.row.capitalOutAmount | toCurrency
        }}</q-td>
        <q-td key="cashAmount" :props="props">{{
          props.row.cashAmount | toCurrency
        }}</q-td>
        <q-td key="dailyExpenseAmount" :props="props">{{
          props.row.dailyExpenseAmount | toCurrency
        }}</q-td>
        <q-td key="outAmount" :props="props">{{
          props.row.outAmount | toCurrency
        }}</q-td>
        <q-td key="balance" :props="props">{{
          props.row.dailyLoan | toCurrency
        }}</q-td>
      </q-tr>
    </q-table>

I want to give User have their options to filtering up specific range of dailyLoanDate but I have no idea what should i do with my filtering method “dataFilter”