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

Question

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

我已经尝试使用一些 owl-date-time 组件。但它搞砸了整个 window.

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 link.

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

How to add Datetimepicker in ng2-smart-table

datetimepicker

ng2-smart-table