Custom filtering data table with specific time range



  • 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”


Log in to reply