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: ''};
}

我还尝试了在options1中使用this.empty_date = "";、this.empty_date = null;和displayValue: ''。

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

Answer 1

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

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>上添加了一个模板引用，并在组件上添加了use 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']='';
}