Datepicker disable & data with reactive forms (Angular 5)

Topic: Datepicker disable & data with reactive forms (Angular 5)

mooseCH pro asked 7 years ago

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

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

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 commented 7 years 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

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

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 commented 7 years ago

Thanks Damian for the suggestion.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

User: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

mooseCH

Pro User

0Support score
1Questions 0Answers

0Snippets likes 0Snippets