1

I have columns in my table that are dates. They're presented to the user in MMM YYYY (e.g. JAN 2020) format. I want the user to be able to filter based on those months and years - if they type "Jan" they should get all the January rows, etc. Same for years.

According to the Vuetify documentation for Data Tables:

You can override the default filtering used with search prop by supplying a function to the custom-filter prop. If you need to customize the filtering of a specific column, you can supply a function to the filter property on header items. The signature is (value: any, search: string | null, item: any) => boolean. This function will always be run even if search prop has not been provided. Thus you need to make sure to exit early with a value of true if filter should not be applied.

I have a couple of headers that call supply the filterDate function as required:

{
    text: "Contract Delivery",
    value: "contractDate",
    align: "center",
    sortable: true,
    filter: this.filterDate
},
{
    text: "Nominal Delivery",
    value: "targetDeliveryDate",
    align: "center",
    sortable: true,
    filter: this.filterDate
},

... and the function itself:

const formatter = new Intl.DateTimeFormat("en-us", {
  year: "numeric",
  month: "short"
});

export default {
   // ... other stuff redacted
   methods: {
      filterDate(dateString, search) {
         // dateString is a string from the database, not a handy month and year

         if (dateString == null || search == null || search == "") return true;

         let month = "";
         let year = "";

         formatter
            .formatToParts(new Date(dateString)) // make it a date and get the bits
            .map(({ type, value }) => {
                switch (type) {
                   case "month":
                     this.month = value.ToLowerCase();
                     break;
                   case "year":
                     this.year = value;
                     break;
            });

          return month.indexOf(search.toLowerCase()) !== -1 || year.indexOf(search) !== -1
        });

      }    
   }
}

... but this obviously doesn't work - and I can't make it work even if I make the entire formatDate just return true. I'm at a loss.

Scott Baker
  • 10,013
  • 17
  • 56
  • 102

0 Answers0