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

mooseCH pro asked 5 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

Damian Gemza staff answered 4 years 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>



<button class="btn btn-primary waves-light" mdbWavesEffect (click)="open()">Button</button>
@ViewChild('datePicker') datePicker: MDBDatePickerComponent;

publicmyDatePickerOptions:IMyOptions= {


open() {


For me it's working like a charm. Best Regards, Damian

aionys pro commented 4 years ago

Thanks Damian for the suggestion.

Damian Gemza staff answered 5 years 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"


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?
Best Regards,

aionys pro commented 4 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

Please insert min. 20 characters.


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



Specification of the issue

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