In AngularJS expressions, you can compare two dates and use ng-hide based on the comparison

Question

In AngularJS expressions, you can compare two dates and use ng-hide based on the comparison

Is it possible to compare two Date strings using Angular JS Expressions?

HTML

  <body ng-controller="app">

    <div>{{Today}}</div>
    <div>{{ItemDate}}</div>
    <div>{{ItemDate<Today}}</div>
  </body>

Script

angular.module('app', [])
.controller('app', controller);

function controller($scope){
  $scope.ItemDate="2018-07-16T14:23:57.566Z";
  $scope.Today= new Date();
}

I am attempting to use ng-hide with {{ItemDate<Today}}

Plunkr Link

Can Angular Expressions perform this task? I wish to achieve this without modifying the script section.

javascript angularjs

Answer 1

Answer №1

It is not recommended to have such logic in your template. A more efficient way is to compare dates in your JS code. Check out this plnkr link for a demonstration.

 $scope.ItemDate="2018-07-16T14:23:57.566Z";
 $scope.Today= new Date();
 $scope.hideDate = (new Date($scope.ItemDate) - $scope.Today < 0);

Answer 2

It is not recommended to have such logic in your template. A more efficient way is to compare dates in your JS code. Check out this plnkr link for a demonstration.

 $scope.ItemDate="2018-07-16T14:23:57.566Z";
 $scope.Today= new Date();
 $scope.hideDate = (new Date($scope.ItemDate) - $scope.Today < 0);

Answer 3

Answer №2

Consider incorporating your expression within the ng-hide attribute:

<div ng-hide="{{(ItemDate|date)<(Today|date)}}">{{ItemDate}}</div>

By doing this, the div with the expression will be hidden.

It is important to be cautious when utilizing these types of logic in your template, as mentioned by Martin.

UPDATE:

Apologies for the mistake in the previous example. The dates tested did not yield the desired outcome. Here is a sample that aligns with Martin's approach, including ng-hide in the HTML:

HTML:

<div>{{Today}}</div>    
<div>{{ItemDate}}</div> 
<div ng-hide="CompareDate">{{ItemDate}}</div>

Script:

$scope.ItemDate="2018-07-16T16:23:57.566Z";
$scope.Today= new Date();
$scope.CompareDate = (new Date($scope.ItemDate) < $scope.Today);

Answer 4

Consider incorporating your expression within the ng-hide attribute:

<div ng-hide="{{(ItemDate|date)<(Today|date)}}">{{ItemDate}}</div>

By doing this, the div with the expression will be hidden.

It is important to be cautious when utilizing these types of logic in your template, as mentioned by Martin.

UPDATE:

Apologies for the mistake in the previous example. The dates tested did not yield the desired outcome. Here is a sample that aligns with Martin's approach, including ng-hide in the HTML:

HTML:

<div>{{Today}}</div>    
<div>{{ItemDate}}</div> 
<div ng-hide="CompareDate">{{ItemDate}}</div>

Script:

$scope.ItemDate="2018-07-16T16:23:57.566Z";
$scope.Today= new Date();
$scope.CompareDate = (new Date($scope.ItemDate) < $scope.Today);

In AngularJS expressions, you can compare two dates and use ng-hide based on the comparison

Answer №1

Answer №2

Similar questions

Similar to `util.inspect` in Node.js, Deno also has a function

Testing NestJS Global ModulesExplore how to efficiently use NestJS global

"Developing an Ionic app that utilizes Angular to send POST requests to a socket

Seamless scrolling experience achieved after implementing a header that appears when scrolling up

The JQuery mobile navigation menu effortlessly appears on your screen

Guide for inserting personalized buttons onto a map with the Bing Maps 6.3 Ajax Control

Obtain the value of the background image's URL

The Redux store has been modified, yet the changes are not reflected in the

Use jQuery to switch back and forth between two different sets of classes

The Nuxt image keeps disappearing every time I navigate to a new page

Are your GetJSON requests failing to execute properly?

Tips for integrating Ionic with AngularIn this guide, we'll show

Ways to troubleshoot CORS issue while working with pseudo API?

Toggle the Editable Feature in AngularJS JSON Editor

The absence of a query function in Select2 and Angular

Is it possible to utilize the userId instead of the jwt token in this scenario?

The Vue Router hooks are not being activated within the component when utilizing Typescript

What is the best way to reduce the size of a Base64/Binary image in Angular6

Creating HTML code using Django and JavaScript

Delving Into the Mysteries of Bootstrap Modal Fading