Short way to set date ngbDatepicker

Question

I use reactive forms in my Angular 2 webapp and I am having problems setting the date of ngbDatepicker (ngbootstrap 1 alpha 6). My object has a date object, for example:

var myObject = {date: new Date(1, 9, 2016)}; 

and in my reactive form it is configured as follows:

 input.form-control(name='date', ngbDatepicker, #date="ngbDatepicker", placeholder='jj.mm.aaaa', formControlName='date', type="text") 

and I correct the form as follows:

 this.form.patchValue({myObject: myObject}); 

The problem is that ngbDatepicker accepts a date with the following structure:

 {day: DD, month: MM, year: YYYY} 

I found a workaround that does:

 this.form.controls.myObject.controls.date.valueChanges .map((value) => { if(value) { if (typeof value.getMonth === 'function') { this.form.controls.myObject.patchValue({ date: { day: value.getUTCDay(), month: value.getUTCMonth(), year: value.getUTCFullYear() } }); } } return value; }) .subscribe((value) => { }); 

And everything works as expected (the date is updated whenever the form is encrypted), but it is too verbose (18 lines of code), and my form has a dozen dates!

So my question is: can I achieve the same result with a much shorter solution?

Answer 1

@ncohen we also make up for pain, see https://github.com/ng-bootstrap/ng-bootstrap/issues/754 . At the moment there is no perfect solution, and ultimately you need to come from Angular yourself in the form of parsers / formatters known from AngularJS. There are already 2 issues in the Angular repository that track your use case as a function request:

• https://github.com/angular/angular/issues/3009
• https://github.com/angular/angular/issues/11097

I believe that at the moment your best option is to extract the verbal code into the utility function and call it when the conversion is required (as suggested in one of the comments).

Answer 2

I don't know if this can help you.

 ng-bootstrap: 1 angular: 2 bootstrap: 4 ngOnInit() { 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> 

Answer 3

I just found your question looking for a solution to the same problem. What I did was involved pulses, which are a date / time processing library ( http://momentjs.com ), and I manipulate the dates from the database through momentjs before inserting them into the form and initializing ngbDatepicker.

this.START_DATE is the value from the database, and it comes as a START_DATE : "2017-08-27" 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 should be, you can create an object and assign attributes in one line, but it is much more readable.

Basically, create a date date object, passing the date as a string to the moment () function, and then call the toObject function as a result, which will give you such an object: {years: 2017, months: 7, date: 27, hours: 0, minutes: 0, seconds: 0, milliseconds: 0}

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

Relevant djd docs here http://momentjs.com/docs/#/displaying/as-object/