Datepicker disable & data with reactive forms (Angular 5)

MDB SupportCategory: MDB AngularDatepicker disable & data with reactive forms (Angular 5)
mooseCH Pro User asked 6 months ago in MDB pro, version:5.1.2

Hi,Is there any possibility to disable the Datepicker component? I figured out that if I enter the date manually (by focusing the datepicker with tab) the date is not stored in my Angular Reactive Form Component.If I enter it by using the datepicker with the date-selection, it works properly.Any idea how I can store the date by typing it manually? Best,moose

2 Answers
Damian Gemza answered 6 months ago

Hello mooseCH,

I’ve checked your’s problem, but for me, everything is working fine.

I have imported ReactiveFormsModule in my app.module, and created a datepicker markup in this way:

<form [formGroup]="validatingForm">

<mdb-date-picker #datePicker name="required" [options]="myDatePickerOptions" [placeholder]="'Selected date'" [(ngModel)]="model"

formControlName="required"></mdb-date-picker>

</form>
When i click on input, and paste there some data (for example 01-01-2016), my datePicker modal is changing displaying date to this from input.
Could you provide me reproduce steps so i can check it again in your’s way? Or maybe you can send me an email with your’s project without node_modules directory? d.gemza@mdbootstrap.com
Best Regards,
Damian
aionys Pro User replied 3 months ago

Have the same issue. The input is available by focusing on it with tab. Is it possible to disable input in the datepicker or add some selector to open modal not by clicking on the field?
Version: 5.2.3

Damian Gemza answered 3 months ago

Dear aionys,
For example you could disable datepicker’s input, and add to it some references, and then on button click add some method which call a opening modal event.
Here’s the sample code:

.html:

<div class="row">

<div class="col-md-6 mx-auto my-5">

<mdb-date-pickername="mydate" [options]="myDatePickerOptions" [placeholder]="'Selected date'" [(ngModel)]="model" #datePickerdisabledrequired></mdb-date-picker>

</div>

</div>

<button class="btn btn-primary waves-light" mdbWavesEffect (click)="open()">Button</button>

.ts:

@ViewChild('datePicker') datePicker: MDBDatePickerComponent;

publicmyDatePickerOptions:IMyOptions= {

};

open() {

this.datePicker.openBtnClicked();

}

For me it’s working like a charm.

Best Regards,

Damian

aionys Pro User replied 3 months ago

Thanks Damian for the suggestion.