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


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()).



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

  • 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