Datepicker does not reset when the form/input is reset


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

itkaufmann pro premium priority asked 8 months 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 8 months 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.


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0-beta5
  • Device: PC
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No