Ways to sort through a Unix timestamp

Recently, I encountered an issue with my Ionic mobile application. It has a search button and filter feature that works well for filtering words. However, the problem arises when it comes to filtering dates displayed in the app as timestamps using Angular date filter:

<p>at {{item.fromDate | date:'mediumDate'}}</p>

Here is an image to help you understand the situation:

https://i.sstatic.net/MptYV.jpg

The data displayed includes Unix timestamps for fromDate and toDate.

https://i.sstatic.net/N2Tsz.jpg

I am struggling to implement a search feature for dates due to them being timestamps. Below is the code snippet for the filter function:

getItems(ev: any) {
  console.log("awdaw");
  console.log("awdaw",this.ListOfitems);
  console.log("otin");

  this.ListofItems();
  let val = ev.target.value;
  if (val && val.trim() != '') {
    this.ListOfitems = this.ListOfitems.filter((ListOfitem) => {
      return (ListOfitem.fromAddress.toLowerCase().indexOf(val.toLowerCase()) > -1||
        ListOfitem.toAddress.toLowerCase().indexOf(val.toLowerCase()) >-1) ;


    })
  }

}

Answer №1

One solution is to utilize the mediumDate filter within your filter function.

To do this, you need to make use of the DatePipe:

import { DatePipe } from '@angular/common';

You must inject this into your class. For guidance on how to do this, refer to this answer.

After that, simply:

this.datePipe.transform(ListOfItem.fromDate, 'mediumDate')
this.datePipe.transform(ListOfItem.toDate, 'mediumDate')

This should produce the same string as what you are currently displaying.

Additionally, you need to include these conditions in your filter:

this.datePipe.transform(ListOfItem.fromDate, 'mediumDate').toLowerCase().indexOf(val.toLowerCase()) > -1
this.datePipe.transform(ListOfItem.toDate, 'mediumDate').toLowerCase().indexOf(val.toLowerCase()) > -1

By the way, you can simplify it like this:

const val = (ev.target.value || '').toLowerCase();

This way, you avoid repeating yourself with val.toLowerCase().

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

The display of ngtable is not appearing correctly

I recently downloaded the zip file of this plunkr (http://plnkr.co/edit/ISa4xg?p=preview) onto my computer. Upon running the example, I noticed that while the table displays correctly, the CSS styling is not applied properly (e.g. pagination appears in an ...

Removing a selected row from a data table using an HTTP request in Angular 2

I am working with a table that has data retrieved from the server. I need to delete a row by selecting the checkboxes and then clicking the delete button to remove it. Here is the code snippet: ...

Node.js scheduler library for triggering events based on time in a cron-like fashion

Currently, I am utilizing Node.js to develop a web application. My aim is to trigger events at specific times. While I am aware of using setTimeout and computing the time difference from the present moment, this method does not account for various timezone ...

The JSON object is not providing the length of the array, returning the value as

I'm currently fetching JSON data from a PHP file in the following manner: $.getJSON('fresh_posts.php',function(data){ global_save_json = data.freshcomments; var countPosts = data.freshposts; var howManyPosts = countPosts.length; ...

Steps to set up datetimepicker with varying date ranges for several input fields

I am having trouble getting a new date range for each text box in my form. It seems to only return the date range from the last textbox, even though I have made the textbox IDs dynamic. I have both start and end dates for each textbox and I have calculated ...

Stop unauthorized access to php files when submitting a contact form

I have implemented a contact form on my HTML page that sends an email via a PHP script upon submission. However, when the form is submitted, the PHP script opens in a new page instead of staying on the current page where the form resides. I have tried usin ...

What sets apart a React component from a function-as-component in React?

React is really confusing to me right now. Take this simple react component for example: export default function Foo(){ return( <div> <div>some text</div> </div> ) } I want to add a child compone ...

Is it possible to populate an empty list of objects within the Page_Load scope after the page has finished loading?

I am facing a challenge where I need to populate the list var docfiles = new List<string>(); with file names uploaded by the user using dropzone js. However, the list remains empty because when the page loads for the first time, httpRequest.Files.C ...

What is the best way to seamlessly update a Redux state array in an immutable manner using Typescript?

I'm embarking on a journey to grasp Typescript through the creation of a simple Todo-List application. However, I've hit a roadblock in updating the Redux state array within a slice that I've established (or rather, I'm unsure how to go ...

Apply a Fade In transition to the ul li elements following a JavaScript toggle

I'm currently experimenting with implementing a Fade in from the right animation for the links displayed in the menu after toggling the menu body in the browser. Despite my efforts, I am unable to determine why the animation is not functioning as expe ...

Tips for resetting and enabling file uploads with ng2-file-upload

My file upload functionality is working smoothly using ng2-file-upload. However, I am facing a challenge in handling server-side errors and resetting the file uploader. How can I achieve this? Below are the snippets of code that I am currently using: HTML ...

Tips for effectively utilizing URLSearchParams in Angular 5 HttpClient's "get" function

When working with Angular 4.2, I used the Http service and made use of the get method by passing in a URLSearchParams object as the search parameter: this.http.get(url, {headers: this.setHeaders(), search: params}) Now I am looking to upgrade to Angular ...

run a function once ngFor has completed rendering the data

I'm attempting to run a function every time my ngFor finishes loading data from the API. However, the callback only works on the initial load of the ngFor. How can I make sure that the callback is executed whenever my ngFor data changes? I found a ...

Starting value within angular's toSignal()

Experiencing frustration with setting initialValue to true for a signal, encountering the error message (TS2769: No overload matches this call). The Observable does return an Observable. A workaround was found by omitting the "initialValue" option and ad ...

Having trouble with ng-model in AngularJS and Ionic's date picker functionality?

Having some trouble setting a default value in my ionic date picker, it appears to be getting ignored. The software versions being used are; Ionic "1.3.2" Node v14.15.4 AngularJS v1.8.0 ion-datetime-picker.min.js (version unknown) Here's w ...

Issue encountered when using exports in a React project - Uncaught ReferenceError: exports is not recognized

Recently, as I began my journey with React.js, I encountered a perplexing error. Within my project, there is a file that exports a function in the following format: exports.building = { //... //Something goes here... }; To import this function, I uti ...

Is it possible to apply JavaScript object destructuring but make changes to certain values before assigning them to a new object?

After receiving movie data from an api, I am currently manually creating a new object with a subset of properties and modified values. Is there a more efficient way to achieve this using javascript/typescript object destructuring syntax? I specifically wa ...

Hover Effect for 3D Images

I recently came across an interesting 3D Hover Image Effect that I wanted to implement - https://codepen.io/kw7oe/pen/mPeepv. After going through various tutorials and guides, I decided to try styling a component with Materials UI and apply CSS in a differ ...

Accessing the outer index in a nested loop using Handlebars

Imagine I have the code below: <div> {{#each questions}} <div id="question_{{@index}}"> {{#each this.answers}} <div id="answer_{{howToGetThisIndex}}_{{@index}}"> {{this}} </div> {{/each}} </div> ...

NodeJS video streaming feature does not close the connection when the user disconnects or navigates to a different page

Currently, I'm in the process of developing a video streaming server using nodeJS with express. To monitor the progress status, I am utilizing the "request-progress" module. So far, everything pertaining to video streaming is working perfectly. Howev ...