Topic: Datepicker exception and not positioned correctly
MikeH
premium
asked 1 day ago
*_Expected behavior_*I am using the basic example of datepicker here: https://mdbootstrap.com/docs/angular/forms/datepicker/#section-basic-exampleExpected behaviour: Datepicker is displayed under the field and no exception is thrown
Actual behavior
The datepicker is not displayed under the field and an exception is displayed in console window.
EDIT:: It seems like the Input string is not formatted correctly: Currently the following ISO8601 input string is delivered: "2099-12-01T06:00:00.0000000" This does not seem to work with the datePicker. What is a valid input string?
*_Resources (screenshots, code snippets etc.)_*Code:
<div class="row mt-4 mb-3 pb-1">
<div class="col-lg-6">
<mdb-form-control>
<input
mdbInput
mdbValidate
[mdbDatepicker]="datepicker"
required
type="text"
name="datum"
id="datum"
[(ngModel)]="Detail.eventFromDate"
#datumField="ngModel"
class="form-control"
[validateSuccess]="false"
/>
<label mdbLabel class="form-label" for="datum">Datum</label>
<mdb-datepicker-toggle
[mdbDatepicker]="datepicker"
></mdb-datepicker-toggle>
<mdb-datepicker [inline]="true" #datepicker></mdb-datepicker>
@if(datumField.invalid && (datumField.dirty || datumField.touched)) {
<div class="mb-3 pb-1">
<mdb-error>Wert fehlt</mdb-error>
</div>
}
</mdb-form-control>
</div>
</div>
Screenshot: https://ibb.co/21YwKFWC
Arkadiusz Idzikowski
staff
answered 19 hours ago
If you want to set a component date by using ngModel
you need to use JavaScript Date Object (like new Date()
).
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 7.1.0
- Device: PC
- Browser: Chrome 134
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes
Arkadiusz Idzikowski staff commented 1 day ago
Can you provide a simplified example code on which we will be able to reproduce this problem? We would need to know what values are used in the inputs in order to do that.
MikeH premium commented 21 hours ago
Hi
As I have written in the post above, the format of the input string is the issue. But for the sake of it: here is an example project: https://github.com/codewebch/mdb-datepicker-example
Please check https://github.com/codewebch/mdb-datepicker-example/blob/master/src/app/datepicker/datepicker.component.html for instructions on how to reproduce the issue