I am currently working on a function that displays real-time dates based on user input. Currently, when the user enters the input, it is displayed in the front end as follows:
28.10.2018 10:09
However, I would like the date to change dynamically based on how long ago the input was submitted - whether it was days, weeks, or even years ago.
For example, if the input was entered yesterday, I want it to display something like this:
1d, meaning one day ago. The same logic applies for weeks (1w), years (1y), etc.
So far, I have tried implementing the following functions:
Function for retrieving the date and input text:
this.activeRouter.params.subscribe((params) => {
let id = params['id'];
this.userService.getComments(id)
.pipe(
map(data => data.sort((a, b) => new Date(b.localTime).getTime() - new Date(a.localTime).getTime()))
)
.subscribe(data => this.comments = data);
});
Function for adding text input and date to the server:
addComments(task_id) {
const formData = this.addForm.value;
formData.task_id = task_id;
this.userService.addComments(formData)
.subscribe(data => {
this.comments.push(this.addForm.value);
this.addForm.reset();
});
const date = new Date();
// more code here...
}
HTML code for displaying the data on the front-end:
<div class="comments_details">
<h1>Mike Ross</h1>
<span class="days">{{comment.localTime | date:'dd.MM.yyyy H:mm'}}</span>
</div>
Service function for fetching and adding data to the server:
addComments(comments: Comment) {
comments.localTime = new Date();
return this.http.post(this.commentsUrl, comments);
}
getComments(id: number) {
return this.http.get<Comment[]>(this.commentsUrl);
}
What changes do I need to make in my code to achieve the desired date format?