如何在ng2-smart-table中添加Datetimepicker

Question

我想将datetimepicker组件添加到ng2-smart-table组件。我现在能做的就是添加datepicker，但我也想在其中添加时间。

我已经尝试使用某些owl-date-time组件。但它弄乱了整个窗口。

HTML文件

<div class="input-group">
    <span [owlDateTimeTrigger]="dt" class="input-group-addon"><i class="fa fa-calendar"></i></span>
    <input
        [owlDateTimeTrigger]="dt" [owlDateTime]="dt"
        [(ngModel)]="inputModel"
        placeholder="{{placeholder}}"
        [min]='min' [max]='max'
        readonly
        class="form-control">
</div>
<owl-date-time #dt [stepMinute]="15" [hour12Timer]='true' (afterPickerClosed)="onChange()"></owl-date-time>


**.ts file**

  @Input() placeholder: string = 'Choose a Date/Time';

  @Input() min: Date; // Defaults to now(rounded down to the nearest 15 minute mark)

  @Input() max: Date; // Defaults to 1 month after the min

  stringValue;
  inputModel: Date;

  constructor() {
    super();
  }

  ngOnInit() {
    if(!this.min) {
      this.min = new Date();
      this.min.setMinutes(Math.floor(this.min.getMinutes() / 15) * 15 );
    }

    if(!this.max) {
      this.max = new Date(this.min);
      this.max.setFullYear(this.min.getFullYear() + 1);
    }

    if(this.cell.newValue) {
      let cellValue = new Date(this.cell.newValue);
      if(cellValue.getTime() >= this.min.getTime() && cellValue.getTime() <= this.max.getTime()) {
        this.inputModel = cellValue;
        this.cell.newValue = this.inputModel.toISOString();
      }
    }

    if(!this.inputModel) {
      this.inputModel = this.min;
      this.cell.newValue = this.inputModel.toISOString();
    }
  }

  onChange() {
    if(this.inputModel) {
      this.cell.newValue = this.inputModel.toISOString();
    }
  }
}

@Component({
  template: `{{value | date:'short'}}`,
})
export class SmartTableDatepickerRenderComponent implements ViewCell, OnInit {
  @Input() value: string;
  @Input() rowData: any;

  constructor() { }

  ngOnInit() { }

我想让ng2-smart-table中的日期时间选择器选择一天中的日期和时间。

Answer 1

我解决了！！只要遵循这个https://stackblitz.com/edit/ng-date-picker-smart-table-tjvgbe。

不要忘记将样式添加到angular.json文件中，就像stackblitz链接一样。