Personalized date range filter

I've been attempting to narrow down the data based on two specific dates, but I seem to be having trouble getting it to work correctly. Is there anyone out there who can lend a hand?

Here is my HTML:

<input type="date" ng-model="from_date">
<input type="date" ng-model="to_date">

And here is my ng-repeat:

<tr ng-repeat="item in outlets | dateRange:from_date:to_date">
    <td>{{ item.offerID }}</td>
    <td>{{ parseDate(item.startDate) | date:'yyyy-MM-dd' }}</td>

Lastly, here is my script:

 app.filter('dateRange', function () {
    return function (items, fromDate, toDate) {
        var filtered = [];
        console.log(fromDate, toDate);
        var from_date = Date.parse(fromDate);
        var to_date = Date.parse(toDate);
        angular.forEach(items, function (item) {
            if (item.startDate > from_date && item.startDate < to_date) {
                filtered.push(item);
            }
        });
        return filtered;
    };
});

Here is some sample JSON data from the server:

{
"offerID": "1"
, "merchant": "Rifa Ladies Salon"
, "outelt": "Rifa Ladies Salon Business Bay"
, "offer": "Rifa Ladies Salon- Offer 1"
, "offerStatus": "LIVE"
, "startDate": "2016-07-12"}

Answer №1

When comparing using Date.parse, make sure to adjust your filter:

if (item.startDate > from_date && item.startDate < to_date) {

item.startDate is in the 'YYYY-MM-DD' format, while from_date and to_date are converted to timestamps using Date.parse(),

Decide whether to consistently use Date.parse() or not, and implement the fix below:

if (Date.parse(item.startDate) > from_date && Date.parse(item.startDate) < to_date) {
}

Complete filter function:

app.filter('dateRange', function () {
    return function (items, fromDate, toDate) {
        var filtered = [];
        var from_date = Date.parse(fromDate);
        var to_date = Date.parse(toDate);
        if (!to_date || !from_date) {
            return items;
        }
        angular.forEach(items, function (item) {
            if (Date.parse(item.startDate) > from_date && Date.parse(item.startDate) < to_date) {
                filtered.push(item);
            }
        });
        return filtered;
    };
});

See the working example here: http://plnkr.co/edit/SPnN4wptw1Sltsp1lawD?p=preview

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

Unable to retrieve file from server

Apologies for the basic question, but I'm feeling a bit lost at the moment. I've been diving into learning JavaScript and decided to set up a page on the 00webhost site to experiment and run tests. Everything was going well until I hit a roadblo ...

Using jQuery to dynamically insert input fields before displaying the Ajax response

As a newly initiated individual to jscript and AJAX, I must admit that this realm seems complex to me. However, I have made significant progress in just 2 days. I am currently working with a GET API that generates the AJAX output progressively using docum ...

Removing a section of HTML from an EmailMessage Body in EWS

Is there a way to remove certain parts of the EWS EmailMessage .Body.Text value in C# before replying with a ResponseMessage? The elements that need to be removed include clickable and non-clickable buttons in HTML format. Since custom tags cannot be dec ...

The modal is functioning properly on Firefox and Internet Explorer, but it is experiencing issues

Having an issue with my modal not functioning properly in Chrome. When I click on it, only the background fades and both the before and after content load in the Chrome Dev tools simultaneously with no visible content in between. Here is a link to the Cod ...

AngularJS Partial Views: Enhancing Your Website's User Experience

As a newcomer to the world of Angular, I am seeking guidance on a specific issue. I have encountered a one-to-many relationship scenario where one Category can have multiple Product items. The challenge lies in my layout page setup where I display various ...

What is the best way to implement function chaining in TypeScript?

I'm interested in implementing function chaining in typescript. Let's consider a sample class: export class NumberOperator { private num; constructor(initialNum) { this.num = initialNum; } public add(inc = 1) { this.num += inc ...

Is it possible to update a ko.observable in Durandal from a different view?

Essentially, my goal is to achieve the following: In the main.html file: <div style="cursor:pointer" data-bind="compose: {model: $data, view: "child.html"}" /> <div style="background-color:#CCC; cursor:pointer; width:45px;" data-bind="visible: s ...

The use of AngularJs with a hash in the href can disrupt scrolling functionality and alter the URL to include a combination of hash

How can I make AngularJs scroll to a specified anchor element using the href attribute with an #id? The issue When using an anchor link with a hash, like href="#recommanded", it becomes url#/recommanded instead of url#recommanded, causing it not to scrol ...

The accuracy of the fromPointToLatLng function in Google Map's JS API seems to be inconsistent with the actual events

My objective is to enhance user experience with a drawing tool on the map interface. I aim for a functionality where, upon single-clicking somewhere on the map using tools like the rectangle tool, the map automatically centers on that clicked location. Thi ...

Navigate down the page until you reach the section that is set to display as a block

Is it possible to make the page automatically scroll to a specific element located in the middle of the page when changing its display property from none to block? ...

Having trouble retrieving information from .pipe(map()) method

Encountering some issues with Observable handling. I have a function that returns an Observable. public getData(userId) { const data = this.execute({userId: userId}); return {event: "data.get", data: data} } private execute(input: SomeDt ...

Do we always need to use eval() when parsing JSON objects?

<!DOCTYPE html> <html> <body> <h2>Creating a JSON Object in JavaScript</h2> <p> Name: <span id="jname"></span><br /> Evaluated Name: <span id="evalname"></span><br /> <p> <s ...

Why aren't NavBar Image Links Functional, even though the code seems flawless? What could be the issue?

Looking at the current HTML code snippet I have within the <head> section, it includes: <ul class="nav"> <li> <a href="http://www.greg-holmes.com/#/title" target="_blank"> <img src="img/home.png"> ...

Challenges with JavaScript and JQuery - Extracting and Displaying YouTube Information on Website

While I have some experience with Javascript and JQuery, my latest project on FirstPersonTheater.net is not going as planned. I am using PHP to generate a video ID in javascript code to retrieve information about YouTube videos such as title, uploader, vie ...

The responsive navigation bar yielded an unforeseen outcome

Looking to create a responsive navigation bar similar to the one shown here My code successfully shows and hides the navigation items, but it's not updating the burger icon No console errors or warnings are present This is my HTML: <nav> ...

Retrieving information from an openDatabase using AngularJS

Encountering an issue while trying to retrieve data from openDatabase and display it in a listview. Following advice from a thread, I added $scope.$apply(); after $scope.items = $data;, but this resulted in an error: [$rootScope:inprog] $apply already in p ...

Positioning a pair of dropdown menus side by side

Could anyone provide guidance on how to position two select boxes side by side within a table cell, ensuring they are responsive at the same time? Any help would be greatly appreciated. Thank you in advance! ...

Eliminate screen flickering during initial page load

I've been developing a static website using NuxtJS where users can choose between dark mode and default CSS media query selectors. Here is the code snippet for achieving this: <template> <div class="container"> <vertical-nav /> ...

Tips for positioning the search bar on the opposite side of the navbar in Bootstrap 5

In my navbar, I have items aligned on the left and a search bar aligned on the right. However, when I try to move the items to the right using the ms-auto class, only the items move and the search bar stays in place. How can I adjust the alignment so that ...

Exploring the Depths of the DOM: Enhancing User Experience with Jquery

I am facing an issue with my AJAX request in my page. After retrieving data from the database and trying to append it to a div, I am attempting to create an accordion interface without success. Below is a snippet of my source code after the AJAX call: ...