Topic: Datepicker does not reset when the form/input is reset

itkaufmann priority asked 2 years ago


The date should be cleared from the datepicker field when I reset its input field. The date will stay in the input field but the value the FormControl returns will be null. I tried to reset the date manually with the viewchild of the datepicker in the typescript code like this but I just the error message TypeError: Cannot read property 'getDay' of null.

component.html

<input [mdbDatepicker]="datepicker" type="text" [formControl]="dayInput" class="form-control" id="surcharge-day" placeholder="dd.mm.yyyy" (click)="datepicker.open()"/> <mdb-datepicker-toggle [mdbDatepicker]="datepicker"></mdb-datepicker-toggle> <mdb-datepicker #datepicker [options]="translationOptions" [inline]="true" [format]="'dd.mm.yyyy'"></mdb-datepicker>

component.ts

```

@Component({ selector: 'app-component', templateUrl: './component.html' }) export class Component implements OnInit {

@ViewChild('datepicker') datepicker; dayInput: FormControl; translationOptions = mdDatepickerTranslationOptions;

constructor(private formBuilder: FormBuilder) {}

ngOnInit(): void { this.addSurchargedayInput = this.formBuilder.control(null, Validators.required); }

add(): void { this.dayInput.reset(); this.datepicker._selectDate(null); } }

```

Please help me, I really need this to work


Arkadiusz Idzikowski staff commented 2 years ago

@itkaufmann Thank you for reporting this problem, we will fix that in the next update. I'm afraid there is no easy workaround for now that I could suggest. The component uses private methods to handle form control value changes and you won't be able to modify its internal variables.


bernspe priority commented 8 months ago

Do you have a solution now? I am having the same problem...



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0-beta5
  • Device: PC
  • Browser: All
  • OS: All
  • Provided sample code: Yes
  • Provided link: No