angular - ng2-datepicker 设置空值

Question

我想要实现的是设置空日期字段。默认情况下，它用当前日期填充字段。

我的模板文件

<ng-datepicker [(ngModel)]="empty_date" [options]="options1"></ng-datepicker>  

我的 .ts 文件

public options1: DatepickerOptions;
ngOnInit() {
this.options1 = {
      minYear: 2018,
      maxYear: 2100,
      displayFormat: 'DD.MM.YYYY',
      barTitleFormat: 'MMMM YYYY',
      firstCalendarDay: 1
    };
this.empty_date = {formatted: ''};
}

我也试过了this.empty_date = "";，this.empty_date = null;和displayValue: ''里面的options1。

如何将初始字段值设置为空？

Answer 1

根据这个问题，只需将您的模型初始化为空。在他们提供的演示中，我只是从这个转换：

export class AppHomeComponent {
  date: Date;
  options: DatepickerOptions = {
    locale: enLocale
  };
  constructor() {
    this.date = new Date();
  }
}

至：

export class AppHomeComponent {
  date: Date;
  options: DatepickerOptions = {
    locale: enLocale
  };
  constructor() {
    this.date = null;
  }
}

并且工作正常：

Answer 2

我在标签上添加了模板引用，并在我的组件上添加<ng-datepicker>了使用方法。reset()

HTML： <ng-datepicker #date></ng-datepicker>

零件：

@ViewChild('date') date: ElementRef;

resetDate() {
    this.date.reset();
}

Answer 3

您可以使用 ElementRef 轻松清除所选日期：

<ng-datepicker [(ngModel)]="empty_date" [options]="options1" #date1></ng-datepicker>  

<button (click)="date1.displayValue=''">Clear Date</button>

或者

您也可以从组件中清除它：

@ViewChild('date1') date1: ElementRef;

resetDate() {
    this.date1['displayValue']='';
}