angular2-date-picker - отображается только текущая дата-время - PullRequest
0 голосов
/ 12 июня 2019

Я использую плагин angular2-date-picker в своем угловом проекте, я хочу отобразить текущее время - 5 минут, поэтому я написал modifyDate () в моем файле component.ts

component.ts :

      modifyDate() {
      let modifiedDate=new Date();
      modifiedDate.setMinutes(modifiedDate.getMinutes()-5);
      console.log("modified: "+modifiedDate);
      return modifiedDate;
     }


     //datetime picker
     startDate: Date =this.modifyDate();
     settings = {
     bigBanner: true,
     timePicker: true,
     format: 'dd-MM-yyyy hh:mm a',
     defaultOpen: false,
     closeOnSelect:false
};

существует component.html файл:

    <angular2-date-picker class="form-control" id="datetimepicker" (onDateSelect)="onDateSelect($event)"  name="datetime" [(ngModel)]="startDate" [settings]="settings"></angular2-date-picker>

После сборки кода выше, в моем DOM я получаю следующие строки:

enter image description here

Как видите, в теге ng-refle-model назначены правильные данные, но ниже, в элементе, я все равно получаю текущую дату и время, и поэтому в моем приложении отображается текущее время. Можете ли вы предложить какие-либо решения?

1 Ответ

0 голосов
/ 12 июня 2019

Невозможно воспроизвести проблему, с которой вы столкнулись. Может быть, чего-то не хватает, чтобы это заработало ...

релевантно HTML :

<angular2-date-picker [(ngModel)]="date" [settings]="settings" name="angular-calendar" (onDateSelect)="onDateSelect($event)"
 ngDefaultControl></angular2-date-picker>
<br/>
    <p>
        Time from selection: <mark> {{date | date:'EE, MMM d, y, H:mm:ss zzzz' }}</mark>
    </p>
    <p>
        minus 5 minutes: <mark>{{newVar}}</mark>
    </p>

релевантно TS :

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 6';
  date = new Date();
  newVar: string = '';
  datePulled:boolean=false;
  settings = {
    bigBanner: true,
    timePicker: true,
    format: 'dd-MM-yyyy',
    defaultOpen: true
  }
  constructor() {
    /* Update #2 */
    if(!this.datePulled){
      let someVar = new Date(this.date);
      someVar.setMinutes(someVar.getMinutes() - 5);
      this.date = someVar;
      this.datePulled = true;
    }
  }
  onDateSelect(evt) {
    if(!this.datePulled){
      let someVar = new Date(this.date);
      someVar.setMinutes(someVar.getMinutes() - 5);
      /* Update #1 */
      this.date = someVar;
      this.newVar = someVar.toString();
      console.log(evt, ' & date:', this.newVar);
    this.datePulled = true;
    }
  }
}

завершено здесь работает стек стека

обновление # 1 : согласно комментарию запрашивающей стороны исходная выбранная дата отодвигается на 5 минут

обновление # 2 : согласно комментарию запрашивающей стороны дата, загружаемая при загрузке страницы, также отодвигается на 5 минут

update # 3 : в соответствии с комментарием запрашивающего, таймер теперь имеет значение true;

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...