How to display Date in Html using angular?

Question

I have two datepickeres in my HTML file using bootstrap and I am trying to display a simple message from this (first selected date) to this (second selected date).

The typescript class is:

 export class Datepicker {
    date: any;
    }

And the HTML is:

 <div class="form-group">
      <label for="hireDate">Hire Date:</label>
      <form class="form-inline">
        <div class="form-group">
          <div class="input-group">
            <input class="form-control" name="hireDate" id="hireDate" placeholder="yyyy-mm-dd"
                   [(ngModel)]="datePicker.date" ngbDatepicker #d="ngbDatepicker">
            <div class="input-group-append">
              <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button">
                <img src="/assets/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>
<div>{{datePicker.date}} </div>

But it gives me Object as a result and not the selected date. Any help?

Amit Chigadani · Accepted Answer · 2018-08-07 20:39:19Z

8

You can use Angular DatePipe to convert the date into the format that you wish to display.

<div> {{datePicker.date | date : 'yyyy-MM-dd'}} </div>

DEMO

EDIT : To convert the date object ({ "year": 2018, "month": 8, "day": 7 }) returned by ngBootstrap to yyyy-MM-dd format, you can do the transformation inside the setter method of datePicker.date property as follows :

module.ts

providers : [DatePipe]

service.ts

export class Datepicker {
  _date: string;
  constructor(private datePipe: DatePipe) {}

  set date(value) {
    let date = new Date(value.year, value.month, value.year);
    this._date= this.datePipe.transform(date, 'yyyy-MM-dd');
  }

  get date() { 
      return this._date
  }
}

edited Aug 7, 2018 at 20:39

answered Aug 7, 2018 at 20:03

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

BillUser88 Over a year ago

Thanks for the idea, but still it gives me that I cannot convert Object to date. Any more solutions?

BillUser88 Over a year ago

AddingEmployeeComponent.html:57 ERROR Error: InvalidPipeArgument: 'Unable to convert "[object Object]" into a date' for pipe 'DatePipe'

Amit Chigadani Over a year ago

Please show the object data that you get by printing {{datePicker.date | json}}. I am not asking the error.

BillUser88 Over a year ago

If I use what you are saying i am getting this: { "year": 2018, "month": 8, "day": 7 } But i want to have the date in a proper date format.

Mohsin Mehmood Over a year ago

@BillUser88 check the second answer that I just posted

|

Mohsin Mehmood · Accepted Answer · 2018-08-07 20:10:05Z

1

ng-bootstrap datepicker selection gives you an object like this

Model: {
  "year": 2018,
  "month": 8,
  "day": 9
}

You can write initialize a date object from selected model like this:

<div> {{ new Date(datePicker.date.year, (datePicker.date.month - 1), datePicker.date.day) | date : 'yyyy-MM-dd'}} </div>

https://ng-bootstrap.github.io/#/components/datepicker/examples#popup

answered Aug 7, 2018 at 20:10

Mohsin Mehmood

4,2662 gold badges15 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to display Date in Html using angular?

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related