Короткий путь, чтобы назначить дату ngbDatepicker

Я использую реактивные формы в моем Angular 2 webapp, и у меня возникли проблемы с назначением даты ngbDatepicker (ngbootstrap 1 alpha 6). Мой объект имеет объект даты, такой как:

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

и в моей реактивной форме он настроен следующим образом:

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

и я латаю форму вот так:

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

проблема в том, что ngbDatepicker возьмем со следующей структурой:

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

Я нашел обходной путь, который делает:

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) => {

        });

и все работает так, как ожидалось (дата обновляется всякий раз, когда форма исправляется), но это слишком многословно (18 строк кода), и моя форма имеет дюжину дат!

Итак, мой вопрос Могу ли я добиться того же результата с гораздо меньшим разрешением?

6
angular ng-bootstrap

3 ответов

@ncohen мы заполняем боль тоже, см.:https://github.com/ng-bootstrap/ng-bootstrap/issues/754. На данный момент нет идеального решения, и в конечном итоге нужно исходить из самого углового в виде парсеров / форматтеров, известных из AngularJS. В угловом РЕПО уже есть 2 проблемы, которые отслеживают ваш вариант использования в качестве запроса функции:

Я считаю, что на данный момент ваш лучший вариант-извлечь подробный код в функцию утилиты и вызвать его, когда требуется преобразование (как предложено в одном из комментариев).

2

Я не знаю, Может ли это помочь вам

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>
4

Я только что нашел ваш вопрос, ища решение той же проблемы. То, что я сделал, - это leveraged momentjs, который является библиотекой манипуляций датой / временем (http://momentjs.com), и я манипулирую датами, поступающими из базы данных через momentjs, прежде чем исправлять их в форму и инициализировать ngbDatepicker.

this.START_DATE значение из базы данных, и он приходит в виде строки 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
})

это более многословно, чем это должно быть, вы можете создать объект и назначить атрибуты в одной строке, но это гораздо более читабельно.

в основном создайте объект даты момента, передав дату в виде строки в функцию moment (), а затем вызовите функцию toObject в результате, которая дает вам такой объект: {years: 2017, months: 7, date: 27, hours: 0, minutes: 0, seconds: 0, milliseconds: 0}

затем создайте пустой объект в формате ngbDatepicker хочет видеть {day:0,month:0,year:0}, и сопоставьте соответствующие атрибуты с момента объекта в ngbDatepicker объект, затем вызовите this.formpatchValue и передать вновь созданный объект с соответствующим форматом.

соответствующие документы momentjs здесь http://momentjs.com/docs/#/displaying/as-object/

1