Topic: Set date picker to be readonly
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!)
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 5 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 5 years ago
How can I do the same for TimePicker?
Arkadiusz Idzikowski staff commented 5 years ago
Timepicker doesn't have such option in the current version, but we will definitely add it in the future.
et3rnal87 pro commented 5 years ago
Please. Mainwhile, any workarounds ?
Hello,
is there a way to enable/disable the datepicker dinamically (i.e.: control it with a checkbox)?
Thanks in advance.
et3rnal87 pro commented 5 years ago
you can use [disabled]="true"
Bartosz Termena staff commented 5 years ago
Try to do exactly as @et3rnal87 says :)
Best, Bartosz.
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 5 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 5 years ago
@et3rnal87 Exactly! Thank you for helping others :)
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 5 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 5 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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