How can we create a custom text search filter for month and date strings in Bootstrap-table2?

I'm working on a BootstrapTable that has a single column with a dataField of birthday, where the date is formatted as "day/month" (e.g. "3/10" for October 3rd). I managed to create a formatter that changes each string like "3/10" to display as "October 3rd" in the table. Now, I want to add a textFilter and I'm currently using a default one. However, there's an issue - if the user types in "October", nothing shows up. You have to type in "10" for October 3rd to appear. I'm attempting to implement a custom filter so that typing in a substring like "Octo" will show all October birthdays and filter out non-October dates. How can I achieve this in my code below?

filterByPrice = (filterVal, data) => {
        if (filterVal) {
            var fields = data.birthday.split('/');
            var month = parseInt(fields[1]);
            var day = parseInt(fields[0]);
            
                switch(month){
                    case 1:
                        month = "January";
                        break;
                    // other cases omitted for brevity
                }
                var dateString = month + " " + day;
                data.filter(dateString.includes(filterVal));
        }
        return data;

const {columns} = {
            columns: [{
                dataField: 'birthday',
                text: 'Birthday',
                filter: textFilter({
                    onFilter: this.birthdayFilter
                }),
                formatter: birthdayFormatter,
            }]
        }

Answer №1

After some investigation, I managed to solve the issue at hand. It appears that there is a specific parameter named filterValue which conducts searches according to the formatter.

{
    dataField: 'birthday',
    text: 'Birthday',          
    filter: textFilter(),
    filterValue: birthdayFormatter,
    formatter: birthdayFormatter
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving the required Ng-checked checkbox (or radio button) in an ng-repeat loop within Angular framework

Looking for a way to validate a form that contains multiple radio checkboxes within an ng-repeat loop. How can I ensure the selected option is validated with the radio button input? Validation outside of the ng-repeat loop is functioning properly. For ex ...

Guide on displaying an array with keys in an HTML file using a promise function and React

I have a Firebase database with the tags "bookName" and "author". How can I display an array from the function "getBook"? import React, {Component} from 'react'; import firebase from '../firebase/firebase.js'; export default class Bo ...

"Need help with displaying dates in a Material-UI table in ReactJS? Learn how to easily convert a date object to

When working with the DatePicker in material-ui, it generates date Objects. However, I want to display the selected value in a table. To achieve this, I need to convert the Object to a string since it is not possible to pass an Object directly to a table c ...

Angular filtering arrays of data

$scope.currentEvent = Object { item_id: "10535", name: "johnny", user_type: "1",category_id: "5"}, Object { item_id: "10534", name: "smith", user_type: "1",category_id: "6"}, Object { item_id: "10536", name: "Greg", user_type: "1",category_id: "7"}; $sco ...

Utilize Express efficiently by requiring modules only once for multiple routes within the application

Here is an overview of my project directory structure: MyProject -app.js -routes -routeone -routetwo In the app.js file, I have the following setup: var express = require('express'); var app = express(); var routeone = ...

Having trouble with ng-click in my AngularJS Restful application

I was attempting to create CRUD operations in AngularJS. Unfortunately, I am facing an issue where my ng-click is not functioning properly. Below is the code for my list.html: <div class="container"> <input type="text" ng-controlle ...

Using jQuery validation to verify that a minimum of one radio button holds a true value

I have a form with two questions. The first question asks if the product value exceeds a certain fixed amount, and the second question asks if the product value is below that fixed amount. Upon submitting the form, validation should ensure that at least on ...

Having trouble parsing asynchronous script with cheerio parser

Utilizing cheerio for web crawling poses a challenge when encountering websites with asynchronous scripts. When attempting to extract all the scripts from such websites, they are often missed in the process. Here is an example of the code I am currently us ...

Maintain fullcalendar event filtering across multiple renderings

I currently have a fullcalendar that initially displays all events. I am using a select dropdown to filter the events, which works well. However, when the calendar re-renders after moving to the next month, it shows all events again. Here is my calendar in ...

What is the reason behind the failure of executing "this.$refs.inputField.focus()"?

I've set up an input field with a ref="inputField" as shown below: <input ref="inputField"> <button @click="btn">Click</button> When the button is clicked, I want the input field to receive focus. Here& ...

Exploring the possibilities of PHP, AJAX, and JSON

I am currently exploring the functionalities of ajax and json. Within my page named addAccount.php, I have a FORM containing the following INPUT elements: <input type="text" id="partnerCode" /> <input type="button" id="pCodeSearch" value="Sear ...

Storing the locations of draggable items with personalized user-created material

If I needed to store dynamically created content in a specific position within a container, what would be the best approach? For instance, if a user enters a YouTube URL into an input box and it generates an embedded video in a box container upon hitting ...

Tips for incorporating your personal touch while utilizing Snipcart

I have created an ecommerce platform with GatsbyJS and Snipcart, but I am struggling to override the default theme provided by Snipcart. When I try to change the main default CSS through gatsby-config.js, it does not seem to work. Does anyone have a soluti ...

Encountering a Circular JSON stringify error on Nest.js without a useful stack trace

My application is being plagued by this critical error in production: /usr/src/app/node_modules/@nestjs/common/services/console-logger.service.js:137 ? `${this.colorize('Object:', logLevel)}\n${JSON.stringify(message, (key, value ...

Hearken to the modifications in the header of ag-grid

I referenced this example to create a custom header for my https://stackblitz.com/edit/clabnet-ag-grid-rich. Here is how I made modifications to it: I added a button that opens a modal popup to edit the header of a column. Everything works correctly, but ...

In the readmore.js script, position the "readmore" link within a div instead of outside of it

I have added annotations that vary in length, so I am looking to integrate the readmore.js plugin. To ensure uniform sizing for all annotations (even empty ones), I need to set a minimum height for the div container. <annotation> <div style="wi ...

Objects and strings cannot be inserted into a JavaScript array

For hours, I've been attempting to troubleshoot this code. Currently, it successfully finds the number of anchors, and I have an array that is of undetermined size. Within the for loop, it retrieves the anchor and extracts the .href. I've confirm ...

Is it possible to set up VS Code's code completion feature to automatically accept punctuation suggestions?

For all the C# devs transitioning to TypeScript in VS Code, this question is directed at you. I was captivated by the code completion feature in VS C#. To paint a clearer picture, let's say I'm trying to write: console.log('hello') W ...

Upload Request Failure Due to Drag and Drop Functionality in HTML5

Recently, I implemented a drag and drop upload form on a webpage. The 'normal' file input functioned perfectly as expected when prompting for a file to be selected. However, I encountered an issue where the POST request was missing the file infor ...

django Ajax GET request could not locate the specified URL

I'm facing an issue while trying to pass parameters through Ajax with Django 1.11. The error message states: Not Found: /enquiry/followup_alter/. Below is the relevant code snippet. Error: Not Found: /enquiry/followup_alter/ Ajax: $(docume ...