Utilize md-datepicker to apply filtering on ng-repeat results

My attempts to filter my ng-repeat items using the uploadDate have been unsuccessful. I have tried everything, but it always fails. I am seeking assistance from someone who can help me resolve this issue.

Controller

ExtractionService.getUserUploadedData(d).then(function (msg) {
   angular.forEach(msg.data, function (val) {
          var src = val.uploadDate;
          src = src.replace(/[^0-9 +]/g, '');
          var uploadDate = new Date(parseInt(src));
          console.log(uploadDate); //it returns a ISO date string format
          var dd = {
              uploadDate: uploadDate,
              filename: val.filename,
              bch: val.bch,
              Id: val.edmId
          }
          $scope.datalistings.push(dd);
    })             
});

HTML

<md-datepicker ng-model="search.uploadDate" ng-change="search.uploadDate = (search.uploadDate.toISOString())" md-placeholder="Enter Date" md-open-on-focus></md-datepicker>

In the code above, I attempted to convert the search.uploadDate model to an ISO string date format using .toISOString(), however, it failed to properly filter the results in the ng-repeat loop.

<tr ng-repeat="info in filtereddata = (datalistings | filter: {uploadDate:search.uploadDate})" class="animate-repeat">
      <td>{{$index+1}}</td>
      <td>{{info.uploadDate}}</td>
      <td>{{info.filename}}</td>
      <td>{{info.bch}}</td>
</tr>

I also tried converting the info.uploadDate like this

{{info.uploadDate.toISOString()}}
, but unfortunately, that approach also did not work. Can anyone provide some insight or assistance?

Answer №1

To implement a customized DateFilter, follow the steps outlined below:

.filter('DateFilter', function() {
    return function(dataArray, uploadDate) {
        if (!dataArray) {
            return;
        } else if (!uploadDate) {
            return dataArray;
        } else {
            return dataArray.filter(function(item) {
                var uploadDateInput = new Date(item.uploadDate);
                if (uploadDate !== null) {
                    var term = (uploadDateInput.getDate() === uploadDate.getDate() && uploadDateInput.getMonth() === uploadDate.getMonth() && uploadDateInput.getYear() === uploadDate.getYear());
                    return term;
                }
            });
        } 
    };
});

Apply it within an ng-repeat directive using | DateFilter : yourinputdate

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

Leveraging npm packages within a Meteor project through cosmos:browserify

Trying to implement Radium, a JavaScript library for inline CSS, by following the instructions located here. In my app.browserify.js file: Radium = require("radium"); Within package.json: "radium": "0.13.4" Upon attempting to utilize Radium in the app&a ...

Tips for modifying the audio session category in iOS using React Native

When using React Native, I know that to allow background audio playback (especially for react-native video), I need to adjust the audio session as outlined here in the Apple development documentation. However, I'm unsure of where to integrate the Obj ...

Tips for creating test cases for the following Angular method

Looking for advice on creating Jasmine unit test cases for a method that opens a custom type dialog in my component. export class OpenPopUpComponent implements OnInit { constructor(public dialog:NewCustomDialog) {} ngOnInit() { } open ...

When working with Next.js, I encountered a scenario where the useEffect() function was being triggered twice. I attempted to solve this issue by providing an empty array as the second argument, but to no

When working with Next-JS, I encountered an issue where the useEffect() function was running twice. While I heard that using an empty array as the second argument can fix this in React, it did not work in my case within Next-JS (which is based on React). ...

Sending data from an Angular application using AJAX to FormSpree.io

Currently, I am using a jQuery script to send ajax requests to for static form submission. The documentation provided by FormSpree suggests the following approach: $.ajax({ url: "//formspree.io/<a href="/cdn-cgi/l/email-protection" class="__cf_email ...

Difficulty interpreting description and metadata within a JSON object using JavaScript

In my NODE JS code, I have a JSON object as shown below. I am attempting to retrieve the description and metadata values, but I am only getting undefined results. Are "description" and "metadata" reserved keywords in any way? If so, how should I handle an ...

What is the sequence of Javascript Execution for the event of window.location.href?

After browsing through this discussion on asynchronous JavaScript location.href call and watching a video explaining the event loop, I found no clear explanation regarding the behavior of href within window.location: The script order in the source code is ...

How can I create a route using associations for /users/me in Sails.js?

My primary model is called Accounts. Additionally, I have several Has Many models such as Notifications and Friends Within my file named main.js, I would prefer to execute commands like: socket.get('/users/me/notifications'); instead of: soc ...

Ways to display a collection of random images with a click of a button?

I've created a simple php webpage that is supposed to display random images from my images folder when a button is clicked. However, I'm facing an issue where no images are showing up and I can't seem to pinpoint the problem in my code. ...

Tips for extracting a value from a mongodb aggregate operation

I am attempting to retrieve a value from a MongoDB aggregate in order to display it on an EJS page using the totalAmount variable. The result I am currently receiving is [{"totalAmount":42}] and my goal is to extract only the number, in this case, 42. My ...

The remaining visible portion of a viewport is equivalent to the height of an element

Is there a way to dynamically set a div's height so that it expands from its starting position to the end of its parent div, which is 100% of the viewport minus 20 pixels? Here is an example of how you can achieve this using jQuery: $(document).read ...

Detect changes in class properties using Node.js

Is it feasible to establish direct proxy watchers for class properties in Node.js? class User{ constructor(name){ this.name = name; let pObject = new Proxy(this,{ set: () => { console.log("something cha ...

Comparing react-intl and react-i18next for internationalizing ReactJS applications

I am in the process of developing a multilanguage application using ReactJS. This application will require a custom dictionary for various languages, as well as automatic formatting for date/time, numbers, and currency. After researching, I have come acro ...

Implementing CSS styling within a JavaScript file

I have a vague memory of an easy way to incorporate CSS code within a JS file, but I can't recall the specific details. Simply inserting CSS code into a JS file doesn't seem to work, so there may be a need for comments or some other method. *No ...

Enhancing HTML through Angular 7 with HTTP responses

Sorry to bother you with this question, but I could really use some help. I'm facing an issue with updating the innerHTML or text of a specific HTML div based on data from an observable. When I try to access the element's content using .innerHTM ...

Can a single controller be shared between isolated directives?

This code snippet demonstrates a timeframe feature that displays tag information on the left and event information on the right. Each type of timeline within the timeframe contains two directives for the tag/event, each utilizing an abstract directive inte ...

Oops! You can only have one parent element in JSX expressions

I'm working on creating a password input box, but I keep encountering an error when integrating it into my JS code. Here's the snippet of my code that includes TailwindCSS: function HomePage() { return ( <div> <p className=&q ...

Exploring innovative CSS/Javascript techniques for creating intricate drawings

When using browsers other than Internet Explorer, the <canvas> element allows for advanced drawing. However, in IE, drawing with <div> elements can be slow for anything more than basic tasks. Is there a way to do basic drawing in IE 5+ using o ...

Extract JSON content from an array's values containing underscores

I am currently working with an array of objects and need to implement a filter on it. The objects in the list contain an owner_id property within the JSON... Currently, I am looping through all the items in the array. However, I want to exclude those wher ...

Displaying data on View is not working after navigation

I'm facing an issue where the data is not displaying on the view after routing, even though it appears in the console. Surprisingly, if I don't change the view, the data shows up. Additionally, if I call the service directly from the view, I can ...