ng2-datepicker 设置空值答案

【问题标题】：ng2-datepicker set empty valueng2-datepicker 设置空值
【发布时间】：2018-06-18 20:00:17
【问题描述】：

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

我的模板文件

<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: ''。

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

【问题讨论】：

标签： angular ng2-datepicker

【解决方案1】：

您可以使用 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']='';
}

【讨论】：

【解决方案2】：

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

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

组件：

@ViewChild('date') date: ElementRef;

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

【讨论】：

【解决方案3】：

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

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

并且工作正常：

【讨论】：

奇怪的是它仍然不起作用。我确实设置了构造函数（）{this.empty_date = null;}。它仍然显示今天的日期...
可以粘贴整个组件吗？
我刚刚使用了 bootstrap 中的 datepicker，它按照我想要的方式工作。