2016-05-24 3 views
0

У меня есть ввод текста двухстороннюю связанные с моделью собственности в Date типа:Обновления после модели привязки

<input type="text" [(ngModel)]="model.DateStart" ngControl="dateStart" id="dateStart" #dateStart /> 

Значение model.DateStart (DateTime типа) заключается в следующем:

2016-05-24T13:49:40.4367997+03:00 

Какого Я хочу показать следующее:

24.05.2016 

Я заполняю данные модели в конструкторе и после привязки ИНГ модель я обновить значение входного сигнала с помощью JQuery:

Observable.forkJoin(
       .. 
     ).subscribe(
      results => { 
       this.model = results[0]; 

       let element: any = $(input); 
       element.bootstrapMaterialDatePicker(); 
       element.val("24.05.2016"); 
       console.log(element.val()) // displays "24.05.2016" 
      }, 

Дело в том, когда страница загружает текстовое поле отображает 2016-05-24T13:49:40.4367997+03:00.

Кажется, что мой пользовательский формат перезаписывается впоследствии. Есть ли способ сделать это, не задавая тип model.DateStart для строки и форматируя его перед привязкой?

Я не могу использовать тип ввода = дата из-за компонента выбора даты и времени.

ответ

1

попробовать это: создать пользовательскую трубу, которая будет принимать дату в качестве аргумента и возвращает формат того, что вы хотите, то есть

import {Pipe} from "angular2/core"; 

@Pipe({ 
    name : "formatDate" 
}) 

export class FormatDatePipe{ 
    transform(value){ 
     var date_data = new Date(value); 

     var yyyy = date_data.getFullYear().toString(); 
     var mm = (date_data.getMonth()+1).toString(); // getMonth() is zero-based 
     var dd = date_data.getDate().toString(); 

     return yyyy +"-"+ (mm[1]?mm:"0"+mm[0]) +"-"+ (dd[1]?dd:"0"+dd[0]); // returns 2016-05-16 
    } 
} 

Затем в элементе отображения сделать:

{{modal.DateStart|formatDate}} 

Надеюсь, вы понимаете, как писать пользовательские каналы; если нет, то используйте this для справки

+0

Спасибо, но я не думаю, что вы можете использовать трубы в двусторонней переплёте. [(ngModel)] = "model.DateStart | date: 'medium'" дает мне ошибку «Не могу иметь трубку в выражении действия». – dstr

+0

@ dstr owh! Просто попробовал это на одном из моих элементов и ударил ту же самую ловушку. Сожалею. Позвольте мне попробовать другую работу, обновит –

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