ng2-datepicker set empty value

Question

what i am trying to achieve is to set empty date field. By default it fills field with current date.

My template file

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

My .ts file

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

i also tried with this.empty_date = "";, this.empty_date = null; and displayValue: '' inside options1.

How can i set initial field value as empty?

score 0 · Answer 1 · answered Jan 09 '18 at 19:45

0

According to this issue, just initialize your model to null. In the demo that they provide, I just transform from this:

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

To:

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

And worked ok:

answered Jan 09 '18 at 19:45

Randall Valenciano

593
5
20

Strangely it still doesn't work. I did set constructor(){this.empty_date = null;}. It still shows today's date... – Oxyphe Jan 10 '18 at 08:02
Can you paste your entire component? – Randall Valenciano Jan 10 '18 at 13:48
I just used datepicker from bootstrap and it works the way i wanted. – Oxyphe Jan 10 '18 at 15:28

score 0 · Answer 2 · answered Oct 23 '19 at 19:31

0

I added a template reference on the tag <ng-datepicker> and the use reset() method on my component.

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

COMPONENT:

@ViewChild('date') date: ElementRef;

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

answered Oct 23 '19 at 19:31

Colo Ghidini

658
9
20

score 0 · Answer 3 · answered Feb 22 '21 at 07:22

You can easily clear selected date using ElementRef:

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

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

OR

You can clear it from component also:

@ViewChild('date1') date1: ElementRef;

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

ng2-datepicker set empty value

3 Answers3