Sorting a date in a simple grid table using AngularJS

Question

Sorting a date in a simple grid table using AngularJS

I'm looking for a way to have a button that, when clicked, will sort a table by today's date in angularjs. This is the view page in my Angular project.

 <div class="form-inline has-feedback filter-header">
      <input type="text" class="form-control" placeholder="Search" ng-model="search.$" />
      <!-- <i class="glyphicon glyphicon-search form-control-feedback"></i> -->
      <button class="btn btn-default btn-sm" ng-click="hideFilter=!hideFilter">Advanced Search</button>
              </div>

        <a class="btn btn-default btn-sm pull-right" href="/#/add">Add New</a>
      </div> <!-- Grid filter ends -->

      <table class="table table-striped table-condensed table-responsive table-hover">
        <thead class="data-grid-header">
          <!-- table header -->
          <tr>
            <th>
              <span class="fa fa-th-large"></span>&nbsp;&nbsp;
              <a href="" ng-click="orderByField='title'; reverseSort = !reverseSort">Title</a>
            </th>
            <th class="hidden-xs">
              <span class="fa fa-calendar"></span>&nbsp;&nbsp;
              <a href="" ng-click="orderByField='startDate'; reverseSort = !reverseSort">Schedule Date</a>
            </th>
          </tr>

          <!-- table filter -->
          <tr ng-hide="hideFilter">
            <th><span ng-hide="hideFilter"><input type="text" ng-model="search.title"></span></th>
           </tr>      

        </thead>

        <tbody class="data-grid-data">
          <tr ng-repeat="visit in visitsList | filter: dateRange | filter: search |orderBy:orderByField:reverseSort">
            <td>{{visit.title}}</td>
            <td>{{visit.startDate | date:medium}}
         </tr>
       </tbody>
      </table>

I need help figuring out how to set up the controller to sort by the current date. Any assistance would be greatly appreciated. Thanks in advance.

javascript angularjs

Answer 1

Answer №1

If you want to filter the data in a table for today's date, you can create a function in your controller to achieve this.

$scope.filterDates = function() {
    //Get the current date.
    var currentDate = $filter('date')(new Date(), "MM/dd/yyyy");
    $scope.users.forEach(function(user) {
        //Convert dates to currentDate format for comparison.
        user.previousLogin = $filter('date')(user.previousLogin, "MM/dd/yyyy");
    });
    //Filter and update the users list.
    $scope.filteredUsers = $filter('filter')($scope.users, {previousLogin: currentDate});
}

After defining the function, you can call it using ng-click from your button.

Check out the Fiddle for an example: https://jsfiddle.net/npwug6xd/

Answer 2

If you want to filter the data in a table for today's date, you can create a function in your controller to achieve this.

$scope.filterDates = function() {
    //Get the current date.
    var currentDate = $filter('date')(new Date(), "MM/dd/yyyy");
    $scope.users.forEach(function(user) {
        //Convert dates to currentDate format for comparison.
        user.previousLogin = $filter('date')(user.previousLogin, "MM/dd/yyyy");
    });
    //Filter and update the users list.
    $scope.filteredUsers = $filter('filter')($scope.users, {previousLogin: currentDate});
}

After defining the function, you can call it using ng-click from your button.

Check out the Fiddle for an example: https://jsfiddle.net/npwug6xd/

Answer 3

Answer №2

If you want to arrange the rows based on their start date in ascending order, you can use the following code snippet:

<tr ng-repeat="visit in visitsList | orderBy: 'startDate'">
    <td>{{visit.name}}</td>
    <td>{{visit.startDate | date:medium}}
</tr>

Answer 4

If you want to arrange the rows based on their start date in ascending order, you can use the following code snippet:

<tr ng-repeat="visit in visitsList | orderBy: 'startDate'">
    <td>{{visit.name}}</td>
    <td>{{visit.startDate | date:medium}}
</tr>

Sorting a date in a simple grid table using AngularJS

Answer №1

Answer №2

Similar questions

ng-model does not function properly with ng-repeat in a dropdown menu

Error: When executing the npm run build command, I encountered a TypeError stating that Ajv is not a

What is the proper way to utilize "three.module.js"?

Question about Looping Concept

Vue.js object formatting with whitespace

Tips for preventing the need to create a function within a loop

Error message: The function particle.subSelf() is not defined

What is the method for adding a default endpoint to Angular $http requests?

What are the recommended methods or examples for implementing a scheduling calendar using JavaScript?

When the mouse leaves, the background image will revert back to its original setting

Activate and deactivate animation using one button with jQuery

User-Preferred Dark Mode Toggle Using Material-UI and Fallback Option

Error: The function referenced is not defined when the page loads

How to integrate angular-ui-bootstrap with webpack

After being awaited recursively, the resolved promise does not perform any actions

Tips for managing a list of elements using keyboard input

Explore accessing a PHP array with multiple dimensions using Jquery Ajax

Choose Your Date of Birth from the Drop-Down Menu with ng-options

This function is designed to only work under specific conditions

The function RegisterClientScriptInclude seems to be malfunctioning inexplicably