Как установить значение поля ввода даты с помощью привязки данных в Angular 5?

Question

У меня есть два поля ввода даты (fromDate & toDate) в моем угловом приложении. У меня также 3 кнопки "Вчера", "Последняя неделя", "Последний месяц". Пользователь может выбрать даты "от" и "до" или нажать одну из кнопок.

Как только кнопка нажата, поля с и до должны быть заполнены соответствующим образом. Я применил директиву ngModel к обоим этим полям ввода даты. Вот мой HTML

        <div class="col-sm-4 filter-box">
            <label>Filter by Date</label>
            <div class="row content-even" >
                <button class="btn btn-primary btn-sm my-1" (click)="yesterdayDateFilter()">Yesterday</button>
                <button class="btn btn-primary btn-sm my-1">Last Week</button>
                <button class="btn btn-primary btn-sm my-1">Last Month</button>                    
            </div>
            <div class="row mt-1 content-even" >
                <div class="form-group">
                    <label for="fromDate">From </label>
                    <input type="date" id="fromDate" [(ngModel)]="fromDate" name="fromDate">
                    {{fromDate}}
                </div>                    
                <div class="form-group">
                    <label for="toDate">To </label>
                    <input type="date" id="toDate" [(ngModel)]="toDate" name="toDate">
                    {{toDate}}
                </div>
            </div>
        </div>

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

yesterdayDateFilter(){        
let yesterday = new Date();
yesterday.setDate(yesterday.getDate()-1);

this.fromDate =  new Date(this.datePipe.transform(yesterday, 'yyyy-MM-dd'));
console.log(this.fromDate); }

Я использую DatePipe в угловых, чтобы преобразовать дату в подходящий формат

импортировать { DatePipe } из '@angular/common';

Теперь, когда я нажимаю кнопку вчерашнего дня, поле с даты остается неизменным, но значение fromDate ( {{fromDate}} в шаблоне) рядом с полем ввода отображается в этом формате

Чт 05 Апр 2018 05:30:00 GMT+0530 (IST)

Я пробовал разные способы для достижения требуемой функциональности, но не смог найти способ. Помогите? Спасибо.

Answer 1

<input type="date" id="fromDate" [(ngModel)]="fromDate" name="fromDate">

Тип "дата" не состоит из datetime. Если вы собираетесь использовать ввод с типом в качестве даты, используйте следующий код для достижения этого. Вам не нужно анализировать преобразованное значение в Date при назначении его модели.

yesterdayDateFilter(){        
   let yesterday = new Date();
   yesterday.setDate(yesterday.getDate()-1);
   this.fromDate = this.datePipe.transform(yesterday, 'yyyy-MM-dd');
   this.toDate=this.datePipe.transform(new Date(), 'yyyy-MM-dd');
   console.log(this.fromDate); 
}

демонстрация

Если вы хотите отобразить как дату, так и время, то вам следует перейти к следующей библиотеке.

нг-подборщик дата и время

Я надеюсь, что это поможет вам. Если у вас есть какие-либо вопросы или сомнения, дайте мне знать.