Короткий путь присвоить дату ngbDatepicker

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

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 строк кода), и моя форма имеет дюжина дат!

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

источник

2016-10-02 ncohen

переместить код в функцию и вызвать ее на карте. –

@JohnBaird Ну ... я ожидал более творческого решения с помощью директивы или трубы! – ncohen

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

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

источник

2016-10-02 16:52:46

Также: https://github.com/ng-bootstrap/ng-bootstrap/issues/839 – jcroll

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

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>

источник

2017-04-04 18:14:05 Leo

Я только что нашел ваш вопрос в поисках решения той же задачи. То, что я сделал, - это задействованные импульсы, которые представляют собой библиотеку манипулирования датой/временем (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 
})

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

основном создать объект даты момент, передав дату в виде строки в данный момент() функции, а затем вызвать функцию 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/

источник

2017-08-21 06:33:42

Короткий путь присвоить дату ngbDatepicker

ответ

Смежные вопросы