Short way to assign date to ngbDatepicker Short way to assign date to ngbDatepicker angular angular

Short way to assign date to ngbDatepicker


I don't know if it might help you

ng-bootstrap: 1angular: 2bootstrap: 4ngOnInit() {const now = new Date();const since = moment().subtract(14,'d').toDate();this.model.fechaHasta = {year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate()};this.model.fechaDesde = {year: since.getFullYear(), month: since.getMonth() + 1, day: since.getDate()};}

HTML

<div class="input-group">    <input class="form-control" placeholder="yyyy-mm-dd"                name="fechaHasta" [(ngModel)]="model.fechaHasta" ngbDatepicker #d10="ngbDatepicker">    <div class="input-group-addon" (click)="d10.toggle()">       <img src="../../shared/img/calendar-icon.png" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>    </div></div>


I've just found your question while looking for a solution to the same problem. What I've done is leveraged momentjs, which is a date/time manipulation library (http://momentjs.com), and I'm manipulating dates coming from the database via momentjs before patching them into the form and initializing the ngbDatepicker.

this.START_DATE is the value from the database, and it comes as a string START_DATE : "2017-08-27"

var _savedStartDate = moment(this.START_DATE).toObject();var _savedStartDateObject = {day:0,month:0,year:0};    _savedStartDateObject.day = _savedStartDate.date;    _savedStartDateObject.month = _savedStartDate.months;    _savedStartDateObject.year = _savedStartDate.years;this.form.patchValue({  START_DATE: _savedStartDateObject})

This is more verbose than it needs to be, you could create the object and assign the attributes in one line, but this is much more readable.

Basically create a moment date object by passing the date as a string into the moment() function, and then call the toObject function on the result, which gives you an object like this: {years: 2017, months: 7, date: 27, hours: 0, minutes: 0, seconds: 0, milliseconds: 0}

Then create an empty object in the format ngbDatepicker wants to see it {day:0,month:0,year:0}, and map the appropriate attributes from the moment object into the ngbDatepicker object, then call this.formpatchValue and pass in the newly created object with the appropriate format.

The relevant momentjs docs are here http://momentjs.com/docs/#/displaying/as-object/


@ncohen we fill the pain too, see: https://github.com/ng-bootstrap/ng-bootstrap/issues/754. There is no perfect solution at the moment and the ultimately one needs to come from Angular itself in a form of parsers / formatters known from AngularJS. There are already 2 issues in the Angular repo that track your use-case as a feature request:

I believe that for now your best option is to extract verbose code to an utility function and call it when conversion is needed (as suggested in one of the comments).