Topic: Set date picker to be readonly

et3rnal87 pro asked 2 years ago


Expected behavior

I expect mdb components to be able to take html default attributes

Actual behavior

I can't set the date picker input to be readonly

Resources (screenshots, code snippets etc.)

The reason I need readonly to be true so that I prevent the keyboard from showing in mobile devices if you have a better fix for that I'm interested.

Or do you provide a directive style implementation!?

In an unrelated matter: This "Ask Question" form doesn't work well in Firefox (no MDB version drop-down, tags doesn't clear after selecting, validation doesn't work and more, reload the page and all will work!)


Bartosz Termena staff answered 2 years ago


Dear @et3rnal87

Try to set editableDateField: false in your DatePickerOptions: https://mdbootstrap.com/docs/angular/forms/date-picker/#a-options

  public myDatePickerOptions: IMyOptions = {
    // Your options
    editableDateField: false,
  };

HTML

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

This option specifies whether input field is editable or not (adds readonly attribute to the input field).

Thank you for reporting the problem about "Ask Question" form. We'll take a closer look at that. Could you provide me your firefox version?

Best Regards, Bartosz.


et3rnal87 pro commented 2 years ago

Thank you, I did go through the documentation but i was looking for read-only, maybe it is worth mentioning that in the docs :)


et3rnal87 pro commented 2 years ago

How can I do the same for TimePicker?


Arkadiusz Idzikowski staff commented 2 years ago

Timepicker doesn't have such option in the current version, but we will definitely add it in the future.


et3rnal87 pro commented 2 years ago

Please. Mainwhile, any workarounds ?


Bartosz Termena staff answered 2 years ago


Dear @akrolis

Use disabled Input, which specifies the disabled state of date picker, like in example below:

<div class="container">
  <div class="row">
    <div class="md-6">
      <form [formGroup]="datePickerForm">
        <mdb-date-picker
          name="mydate"
          [options]="myDatePickerOptions"
          [placeholder]="'Selected date'"
          formControlName="datePickerControl"
          required
          [disabled]="isDisabled"
        ></mdb-date-picker>
      </form>
    </div>

    <mdb-checkbox
      [(ngModel)]="isChecked"
      (ngModelChange)="getCheckboxesValue()"
      name="templateChecked"
      >Disable</mdb-checkbox
    >
  </div>
</div>

TS: // Your options

  public myDatePickerOptions: IMyOptions = {
    // Your options
  };
  isChecked = false;

  isDisabled: boolean;

  datePickerForm: FormGroup;

  ngOnInit() {
    const selectedDate = { date: { year: 2019, month: 5, day: 8 } };
    this.datePickerForm = new FormGroup({
      datePickerControl: new FormControl(selectedDate),
    });
  }

  getCheckboxesValue() {
    if (this.isChecked) {
      this.isDisabled = true;
    }
    if (!this.isChecked) {
      this.isDisabled = false;
    }
  }

Hope it helps! Best Regards, Bartosz.


akrolis pro commented 2 years ago

Hi, @bartej

in my project, both the checkbox and the datepicker are inside a much larger form, so I can't use ngModel for the checkbox.

Still, with the code you provide as it is, I still get this warning in the Chrome console:

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors.

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

It should be possible to disable the datepicker programatically to avoid this warning.


Bartosz Termena staff commented 2 years ago

Dear @akrolis You are right, there is strange behavior after setting the formcontrol to disable - the datepicker still allows the first click to open the datepicker modal.

We will take a closer look at that, and try to resolve this problem as soon as possible.

Best Regards, Bartosz.


akrolis pro answered 2 years ago


Hi,

since I have the checkbox and datepicker in a reactive form, I can't use [disabled].

I tried to do it programatically but got some strange behaviour in the datepicker.

After setting the formcontrol to disable the datepicker still allows the first click to open the datepicker modal, so it's not actually disabled.

My code:

html:

<form [formGroup]="testForm">
    <div class="row">
    <div class="col-md-6">
        <div class="row">
                <div class="col-md-3 mt-3">
                        <mdb-checkbox 
                        formControlName="expired" 
                        (change)="onChange($event)"
                        [inline]="true">
                            Expired
                        </mdb-checkbox>
                    </div>
                    <div class="col-md-3">
                        <mdb-date-picker 
                            name="expirationdate"
                            formControlName="expirationdate"
                            [options]="myDatePickerOptions" 
                            [placeholder]=""
                            [label]="'Expiration Date'"

                            >
                        </mdb-date-picker>
                    </div>
        </div>

    </div>
</div>
 </form>

ts:

ngOnInit() {
    this.testForm = new FormGroup({
        expired: new FormControl(false),
        expirationdate: new FormControl({value:'2019-10-23', disabled: true})
      });

};

onChange(change: MdbCheckboxChange){
    if(change.checked){
        this.testForm.controls.expirationdate.enable();
    } else {
        this.testForm.controls.expirationdate.disable();
    }

}

et3rnal87 pro commented 2 years ago

Try adding [disabled]="isDisabled" to <mdb-date-picker... and in .ts isDisabled:bool = false if(change.checked){ this.isDisabled = true; }


Bartosz Termena staff commented 2 years ago

@et3rnal87 Exactly! Thank you for helping others :)


akrolis pro answered 2 years ago


Hello,

is there a way to enable/disable the datepicker dinamically (i.e.: control it with a checkbox)?

Thanks in advance.


et3rnal87 pro commented 2 years ago

you can use [disabled]="true"


Bartosz Termena staff commented 2 years ago

Try to do exactly as @et3rnal87 says :)

Best, Bartosz.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.2.0
  • Device: PC
  • Browser: Chrome
  • OS: Win10
  • Provided sample code: No
  • Provided link: No