Angular: тип ввода = дата с начальным значением

У меня есть два входа type=date для фильтрации данных по периоду. Я хотел бы привести их со значением, уже сообщенным при загрузке страницы.

Первый ввод со значением Date() -7.

Второй ввод с Date().

Это мой угловой код:

<input type="date" class="form-control form-date" [(ngModel)]="dtInitial">       
<input type="date" class="form-control form-date" [(ngModel)]="dtFinal">´

С этого момента, спасибо, кто может мне помочь.


typescript angular angular-date-format
person Emerson Jahn    schedule 06.04.2021    source источник
comment
Что ж, ничего не происходит, когда я нажимаю «Выполнить фрагмент кода», потому что Angular не импортируется, и нет свойств dtInitial или dtFinal для работы ngModel. Пожалуйста, покажите больше вашего кода. Вам не нужно использовать функциональность фрагмента стека, если код не работает.   -  person Heretic Monkey    schedule 06.04.2021
comment
@HereticMonkey, я изменил фрагмент стека на код. Спасибо за ответ.   -  person Emerson Jahn    schedule 06.04.2021

Ответы (1)


arrow_upward
0
arrow_downward

Ваш ввод должен принимать строку. Попробуйте преобразовать дату в строку в компоненте.

@Component({
  selector: "example",
  templateUrl: "./app.component.html",
  providers: [DatePipe]
})
export class AppComponent implements OnInit {
  dtInitial: string = "";
  dtFinal: string = "";

  constructor(private datePipe: DatePipe) {}

  ngOnInit(): void {
    let today: Date = new Date();
    let sevenDaysAgo = new Date();
    sevenDaysAgo.setDate(today.getDate()-7)
    this.dtInitial = this.datePipe.transform(today, "yyyy-MM-dd");
    this.dtFinal = this.datePipe.transform(sevenDaysAgo, "yyyy-MM-dd");
 }
}

В качестве альтернативы вы также можете использовать datePipe непосредственно в шаблоне. Вы можете отформатировать дату другими способами. Здесь вы видите несколько различных форматов, которые вы можете использовать: https://developer.mozilla.org/en-US/docs/Web/HTML/Date_and_time_formats#format_of_a_valid_date_string.

Если вы хотите, чтобы входные данные обновлялись при изменении одного из них, вы можете добавить это в компонент.

 updateDateInitial() {
   let newDate = new Date(this.dtInitial);
   newDate.setDate(newDate.getDate()-7)
   this.dtFinal = this.datePipe.transform(newDate, "yyyy-MM-dd");
 }

 updateDateFinal() {
    let newDate = new Date(this.dtInitial);
    newDate.setDate(newDate.getDate()+7)
    this.dtInitial = this.datePipe.transform(newDate, "yyyy-MM-dd");
 }

и это для входов.

<input (change)="updateDateInitial()" type="date" class="form-control form-date" [(ngModel)]="dtInitial">       
<input (change)="updateDateFinal()" type="date" class="form-control form-date" [(ngModel)]="dtFinal">

Вот как вы могли бы это сделать, но в целом вам следует подумать, подходит ли вам два связывания :)

person XRaycat    schedule 06.04.2021
comment
Это должна быть строка в определенном формате для работы с input type="date"... - person Heretic Monkey; 06.04.2021