#Subtract dates, display them in the view in days and hours updating without page refresh goal

27 messages · Page 1 of 1 (latest)

low sun
#

Hey there I am trying to complete a solution using new techniques (to me) in Angular. Currently I have:

#

@robust vessel I made a thread just FYI.

#

So I would replace this transform function with one that takes two dates and converts it to days and hours right?

# 
import { Pipe, PipeTransform } from '@angular/core';
import { formatRelative } from 'date-fns';

@Pipe({ name: 'appRelativeDate', pure: false })
export class RelativeDatePipe implements PipeTransform {
  private _nowDate = new Date();

  public transform(date: Date): string {
    return formatRelative(date, this._nowDate);
  }
}
robust vessel
#

add a second parameter to transform

low sun
robust vessel
#

i guess. I don't understand what you are doing

low sun
#

In the view, in a circle, and those days and hours should update without page refresh.

#

That's my goal anyways.

robust vessel
#

Seems weird to have relative dates not based on the current time. But the good news is that situation is a pure pipe.

low sun
#

It's going to display in a circle like this to reminder a user how much time they have until a filing is due.

image.png
low sun
#

How do I start considering you have this new information? I feel like I need to somehow subtract the dates to get the difference.

robust vessel
#

that is what formatRelative does

low sun
#

Oh very nice from the library you showed me?

#

Yes ^ lol

low sun
# 
@Pipe({ name: 'appRelativeDate', pure: false })
export class RelativeDatePipe implements PipeTransform {
  private _nowDate = new Date();

  public transform(date: Date, dateTwo: Date): string {
    return formatRelative(date, dateTwo);
  }
}
robust vessel
#

It's in the guide

#

If the pipe accepts multiple parameters, separate the values with colons. For example, {{ amount | currency:'EUR':'Euros '}} adds the second parameter, the string literal 'Euros ', to the output string. Use any valid template expression as a parameter, such as a string literal or a component property.

#

The template expression {{ amount | currency:'EUR' }} transforms the amount to currency in euros. Follow the pipe name (currency) with a colon (:) character and the parameter value ('EUR').

low sun
robust vessel
#

if that is what you want to have. Probably best you start with just a function to do what you want. Then put it into Angular how it best fits. A Component to create DOM, a Directive to modify existing DOM, a Pipe to transform {{ interpolations }}

# 
function transform(startDate: Date, dueDate: Date): string {
  // Fill in code. Use a Date Library like date-fns or something else.
}
mild drum
#

if data is always current date really only need to pass due date

low sun