Maximizing the potential of md-order-by attribute to organize date columns within an md-data-table

I'm attempting to implement column sorting in an AngularJS md-data-table for a column containing dates. These dates are formatted as strings DD / MM / YYYY, but I'm struggling to get them sorted correctly. I've tried calling a function that returns the timestamp of the date using the md-order-by attribute, but the function isn't being called at all. The current code snippet is shown below, with the "Fecha Nacimiento" column being the one I'm trying to sort:

 <table md-table md-row-select="options.rowSelection" multiple="{{options.multiSelect}}" ng-model="selected"
         md-progress="promise">
    <thead md-head md-order="query.order">
    <tr md-row>
      <th md-column md-order-by="id"><span>Identificador</span></th>
      <th md-column md-numeric md-order-by="fechaTimestamp(fechaNacimiento)"><span>Fecha Nacimiento</span></th>
      <th md-column md-order-by="sexo"><span>Sexo</span></th>
      <th md-column md-numeric md-order-by="altura"><span>Altura(cm)</span></th>
      <th md-column><span>Grabaciones</span></th>
      <th md-column><span>Atributos extra</span></th>
    </tr>
    </thead>
    <tbody md-body>
    <tr md-row md-select="paciente" md-on-select="logItem" md-auto-select="options.autoSelect"
        ng-repeat="paciente in pacientes.data | filter: filter.search | orderBy: query.order | limitTo: query.limit : (query.page -1) * query.limit">
      <td md-cell ng-click="editarCampo($event, paciente, 'identificador')"
          ng-class="{'md-placeholder': !paciente.id}">{{paciente.id || 'Añadir identificador'}}
      </td>
      <td md-cell ng-click="editarFecha($event, paciente)" ng-class="{'md-placeholder': !paciente.fechaNacimiento}">
        {{paciente.fechaNacimiento
        || "Añadir fecha nacimiento"}}
      </td>
      <td md-cell>
        <md-select ng-model="paciente.sexo" name="sexo" ng-change="editarSexo(paciente)" placeholder="Sexo" required>
          <md-option value="Hombre">Hombre</md-option>
          <md-option value="Mujer">Mujer</md-option>
          <md-option value="Otro">Otro</md-option>
        </md-select>
      </td>
      <td md-cell ng-click="editarCampo($event, paciente, 'altura')"
          ng-class="{'md-placeholder': !paciente.altura}">{{paciente.altura || 'Añadir altura'}}
      </td>
      <td md-cell>
        <md-button ng-click="redirect('grabaciones/' + paciente.id)"
                   style="background: lightgrey;" ng-show="paciente.grabaciones"
                   title="Ver grabaciones de {{paciente.id}}">Ver
        </md-button>
      </td>
      <td md-cell>
        <md-button ng-click="verAtributosExtra($event,paciente)" ng-show="paciente.extra"
                   style="background: lightgrey;"
                   title="Ver información extra de {{paciente.id}}">Ver
        </md-button>
        <md-button ng-click="verAtributosExtra($event,paciente)" ng-hide="paciente.extra"
                   style="background: lightgrey;"
                   title="Añadir atributos extra a {{paciente.id}}">Añadir
        </md-button>
      </td>
    </tr>
    </tbody>
  </table>

Many thanks for any assistance provided.

Answer №1

Function call on md-order-by is not functioning properly. To resolve this issue, you will need to modify the date property of each object in the patients.data array. It seems like you are receiving the date in the format of DD/MM/YYYY as a string, correct? In that case, you can manipulate the patients.data array and change the date property to an object with its own 'value' and 'ts' (timestamp) properties. You can bind date.value in the view and date.ts in md-order-by.

To handle this manipulation, I have written an example function:

$scope.addDateTimestamps = function() {
    var arrData = $scope.patients.data;
    var newData = arrData.map(function(item,index) {
        var dateString = item.date;
        var dateParts = dateString.split("/");
        var dateObject = new Date(dateParts[2], dateParts[1] - 1, dateParts[0]);
        item.date = {'value': dateString, 'ts': dateObject.getTime()};
        return item;
    });
    $scope.patients.data = newData;
}

This function converts a DD/MM/YYYY date to a date object and retrieves its timestamp. Call this function when retrieving data from the service and creating the model. You can refer to the following Codepen example where I have added a date field with string values for binding and sorting based on timestamp.

Alternatively, you can simply convert the date property from a string to a timestamp in the array objects, and then use the date filter in the view to display it in various formats. In md-order-by, you can sort based on the date (ts) property.

Codepen Example

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

In what way can a property in JavaScript alter an object?

I am a newcomer to node.js, although I have been writing Javascript for many years. Recently, I encountered an interesting pattern that has left me puzzled: a Flag that is used to set a modifier on the object. For example, in the socket.io documentation: ...

Spring framework experiencing issues with loading CSS and JavaScript files

I'm facing an issue with my Spring-MVC application where the CSS and JS files are not loading even though they are correctly called. Can anyone help me figure out what I'm doing wrong? Resources folder: Project --> webapp --> resources - ...

Encountered a "http://errors.angularjs.org/1.6.5/$injector" error when integrating AngularJS with Laravel

Hello friends, I'm in need of some assistance. I am facing an issue while trying to integrate Laravel with AngularJS. Can anyone provide guidance? "Error: [$injector:modulerr] http://errors.angularjs.org/1.6.5/$injector" To provide more context, I h ...

Searching for a specific entry in home.db using user input is proving difficult when utilizing NEDB and Node.js. Passing parameters to index.js seems to be a challenge in

STUDENT NOTICE. I am currently studying Nodejs, express with NeDB and databases. My goal is to query my home.db (NeDB) for a specific record based on user input (in this case, a person's name). The overall process is illustrated in the following diagr ...

Converting an HTML table to a CSV file with pure JavaScript

I need to implement a CSV download feature on my website that converts the HTML table into downloadable content. While searching for a suitable plugin, I came across resources like http://www.dev-skills.com/export-html-table-to-csv-file/ which uses PHP s ...

By default, use jQuery to load the content of a div

Upon page load, I am looking to display the content within #destiny2. This section includes text and images, as well as additional content for three categories. Initially, the first category should be shown without requiring a click. Subsequently, clicking ...

Running Grunt task after saving in NetBeans 8.0 - A step-by-step guide

In my Maven Spring MVC project within NetBeans 8.0, I am utilizing AngularJS for front end development. With over 30 .js files and counting, I decided to streamline the process by using Grunt to merge and minify them. After installing Node.js, npm, and gr ...

Creating Karma and Jasmine unit tests for an Angular service that relies on another module

I have gone through numerous articles but still cannot grasp the process of creating it. There is a particular module (“A”) that includes a service (“B”) which contains a specific function (“C”). This function uses another function (“E”) f ...

Retrieve upcoming events using Node.js from the Eventbrite API

Struggling to find working examples, the npm package README example gives me an error. Utilizing https://github.com/Datahero/node-eventbrite Integrating it into app.js, setting up the token variable with my token. Inserting this code snippet: try { ...

A guide to using JavaScript to create a button that can dynamically change stylesheets

Just a heads up, I'm not using classes in this particular scenario. Can't seem to find the answer to this exact question. With javascript, how can I code a button to switch stylesheets every time it's clicked? I've experimented with d ...

When additional lines are drawn elsewhere on the HTML5 Canvas, the diagonal lines will gradually appear thicker and more pronounced

For horizontal and vertical lines, using a translation of 0.5 for odd stroke widths results in crisper and sharper lines. But what about diagonal lines? Link to jsfiddle <!DOCTYPE html> <html lang="en"> <body style="background: black"& ...

Generate - Create 2 different versions of the web application

Currently, I am in the process of learning Grunt and exploring ways to generate 2 variations of an application with different configuration settings. My goal is to have one version where a boolean in a specific .js file is set to false, and another versio ...

Obtaining form data from connected drop-down menus and sending it to PHP

My webpage contains a form with 2 dependent drop-down lists. When a user selects a value from the first list, it populates the second list for the user to make another selection. However, when I try to submit the form data to a PHP page to insert into a M ...

Tips for Locating an Element by Its Attribute in JQuery

I currently have a variable that holds a list of selects, and my goal is to filter out only those with a 'dependsOn' attribute set to 'EventType'. My initial attempt below doesn't seem to work as intended and returns a count of 0: ...

Retrieve a specific value from an array within Firestore

I am facing an issue where I can only retrieve the values I need from the array by adding a specific string like "اقلام" or "سبورة". However, I want the value to be passed as a prop from another component or screen. Is there a way to resolve this ...

A guide to injecting HTML banner code with pure Vanilla Javascript

Looking for a solution to incorporate banner code dynamically into an existing block of HTML on a static page without altering the original code? <div class="wrapper"><img class="lazyload" src="/img/foo01.jpg"></div> <div class="wrapp ...

Initiate the ng-table grouping function with minimized rows

I have implemented the grouping feature of ng-table from http://plnkr.co/edit/CBcbkc Currently, the table loads with all rows expanded, but due to having more than 100 records, I want them to be collapsed by default. Is there a way to achieve this? ...

Is it possible to intercept and handle every exception that arises from a $compiled directive?

In my scenario, I have a directive within Angular (which I'll refer to as parentDirective) that utilizes the $compile function to compile another directive called childDirective, appending it to itself. Here is an example of how this is implemented: ...

Conceal all table rows with the exception of the row that has been clicked

I am working on a table that uses ng-repeat to populate its rows. When a row is clicked, I am able to retrieve data related to the object using ng-click. The table gets populated with information from a JSON file. My question is, how can I make it so tha ...

Display all active services in a new list item using AngularJS Ionic's ng-repeat directive

I've been working on a shopping cart feature for my Ionic app and everything is coming together nicely, except for the running itemized total. By default, the items in my array are set to active:false and when selected, they switch to active:true and ...