Laravel Vue date filter widget

Hi guys,

I am trying to filter my records by date, but I got stuck. What I have so far is

<ais-numeric-menu
        attribute="created_at"
        :items="[
        {label: 'All products', value: 0},
        {label: 'Today', start: (Math.round(new Date()/1000) - 86400)},
        {label: 'Week', start: (Math.round(new Date()/1000) - 604800)},
        {label: 'Month', start: (Math.round(new Date()/1000) - 2592000)},
        ]"
        >
        <ul slot-scope="{ items, refine, createURL }">
          <li v-for="item in items" :key="item.value">
            <a
              :href="createURL(item.value)"
              :style="{ fontWeight: item.isRefined ? 'bold' : '' }"
              @click.prevent="refine(item.value)"
            >
              {{ item.label }}
            </a>
          </li>
        </ul>
        </ais-numeric-menu>

I hope you can help me to get this to work.

Best

Hi @NastyPasty,

How are your dates stored in your Algolia index?

Would it be possible to create a codesandbox so that we can troubleshoot with your data? You can find a starter template for Vue herehttps://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/vue-instantsearch.

1 Like

Thanks for your fast reply! My dates are stored as unix timestamps like in the docs described.

Sure I will create a codesandbox if that helps :slight_smile:

EDIT: https://codesandbox.io/s/kind-paper-rj88b

best

1 Like

Do you need something else? I played around a while now with it but cant get it to work. Does this widget need something else to work properly or is ok how I use it? My attribute provides the date in unix timestamps

This seems to be a JavaScript question rather than an InstantSearch question. We created a media demo that allows to filter based on relative dates, you might want to get inspiration from the source code available on GitHub. Note that we relied on date-fns to simplify the date computations.