Displaying Date in Angular 2 Application with Proper Formatting

Question

Displaying Date in Angular 2 Application with Proper Formatting

I'm currently working on formatting the date pipe in my Angular application to display correctly when used within an input template. Originally, without the date formatting, my code looked like this:

<input class="app-input" [readonly]="!hasAdminAccess"                                  
    [(ngModel)]="staff.profile.hireDate" placeholder="None"
    [field-status]="getPropertyStatus('profile.hireDate')"/>

The closest I've come to using the date pipe is as follows:

<input class="app-input"
{{ staff.profile.hireDate | date:'shortDate' }} placeholder="None"
[field-status]="getPropertyStatus('profile.hireDate')"/>

However, the output in the view displays the following (exactly as shown):

> <input class="app-input" 3/18/2014 placeholder="None"
> [field-status]="getPropertyStatus('profile.hireDate')"/>

As you can see, the date is correctly formatted as:

3/18/2014

But I want only the date to be displayed. I've attempted various adjustments but have yet to achieve the desired outcome. Any suggestions on how to modify the syntax to only show the date?

javascript angular typescript date-pipe

Answer 1

Answer №1

To modify the ngModel after it has been set in typescript, you can utilize the get and set functions along with the ngModelChanged property.

Component Template :

<input class="app-input" [(ngModel)]="hireDate" (ngModelChange)="dateChanged($event)"/>

Component Class :

import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <button (click)="setDate()">Set Date</button>
      <input class="app-input" readonly="true" [(ngModel)]="hireDate" (ngModelChange)="dateChanged($event)" placeholder="None"/>
    </div> 
  `,
})
export class App {
  name:string;
  staff: any;
  myDate: any;
  private _hireDate;

  dateChanged(value) {
    this.hireDate = this.datePipe.transform(value, 'shortDate');
  }

  set hireDate(value) {
    this._hireDate = this.datePipe.transform(value, 'shortDate');
  }

  get hireDate() {
    return this._hireDate;
  }

  setDate() {
    this.hireDate = '10-03-1993';
  }

  constructor(private datePipe: DatePipe) {
  }
}

The input value will be updated upon any changes, potentially causing a UX issue. Users may prefer entering their desired date manually. One workaround is triggering the date change function only after the user has inputted their date (e.g. via a button click).

The set and get functions typically apply to class variables, but for object properties like yours, you can adjust the set function to update the object property as shown below:

  set hireDate(value) {
    this._hireDate = this.datePipe.transform(value, 'shortDate');
    this.staff.profile.hireDate = this._hireDate;
  }

A plunkr example is available here.

Answer 2

To modify the ngModel after it has been set in typescript, you can utilize the get and set functions along with the ngModelChanged property.

Component Template :

<input class="app-input" [(ngModel)]="hireDate" (ngModelChange)="dateChanged($event)"/>

Component Class :

import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <button (click)="setDate()">Set Date</button>
      <input class="app-input" readonly="true" [(ngModel)]="hireDate" (ngModelChange)="dateChanged($event)" placeholder="None"/>
    </div> 
  `,
})
export class App {
  name:string;
  staff: any;
  myDate: any;
  private _hireDate;

  dateChanged(value) {
    this.hireDate = this.datePipe.transform(value, 'shortDate');
  }

  set hireDate(value) {
    this._hireDate = this.datePipe.transform(value, 'shortDate');
  }

  get hireDate() {
    return this._hireDate;
  }

  setDate() {
    this.hireDate = '10-03-1993';
  }

  constructor(private datePipe: DatePipe) {
  }
}

The input value will be updated upon any changes, potentially causing a UX issue. Users may prefer entering their desired date manually. One workaround is triggering the date change function only after the user has inputted their date (e.g. via a button click).

The set and get functions typically apply to class variables, but for object properties like yours, you can adjust the set function to update the object property as shown below:

  set hireDate(value) {
    this._hireDate = this.datePipe.transform(value, 'shortDate');
    this.staff.profile.hireDate = this._hireDate;
  }

A plunkr example is available here.

Displaying Date in Angular 2 Application with Proper Formatting

Answer №1

Similar questions

Leveraging the power of the wildcard feature to execute a variety of scripts when running

Using AngularJS directives in Markdown

Eliminate redundant entries from an Ionic3 array

What is the best way to navigate through a webpage to find a specific folder and show its contents on the page?

Enhancing the efficiency of a Puppeteer web scraping operation

I need to search through a tree structure in typescript based on a specific value without encountering a maximum stack call exceeded error

Leveraging Ajax to send JSON data to PHP session

Struggling with parsing JSON strings into PHP arrays

The "library" is encountering errors due to missing dependencies, specifically @angular/material/form-field

What is the best way to send data from a child component to a parent component in Angular 2?

Deriving the type of a generic parameter from another generic parameter in TypeScript

Utilize Javascript/Jquery to categorize JSON data based on the days of the week (Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday)

Please place the accurate image inside the designated box based on the corresponding ID number

How to inject a variable into an AngularJS service that utilizes both $http and $interval functions?

Template displaying multiple polymer variables side by side

I have a JSON object with a nested "src" value that I want to display on my webpage using Vue. How can I target and select this specific value?

Is there a way to determine if silent login is feasible with adaljs-angular4?

Attempting to display my ejs template from a node server following the activation of a delete button, all without utilizing ajax

Accessing a single element from a nested object in Handlebars.js

Issue encountered while attempting to save hook arrays: Uncaught TypeError - 'choices' is not able to be