Topic: Datepicker value format

findok priority asked 1 month ago


Expected behavior When i empty the input field of the datepicker, the value should be null

Actual behavior When the input field is empty, the value is the current Date My format is dd.mm.yyyy. Even when i change the date to an impossible date (99.99.9999) the value of

this.form.get('bis').value

is the current date:

Thu May 23 2024 15:33:54 GMT+0200 (Mitteleuropäische Sommerzeit)

I would like the value to be what is actually in the input-field (a string in format mm.dd.yyyy)

Resources (screenshots, code snippets etc.) I have a reactive form with the field:

bis: ['', [Validators.required, Validators.pattern(/^(0[1-9]|[12][0-9]|3[01])\.(0[1-9]|1[012])\.(\d{4})$/)]],

<mdb-form-control>
          <input
            mdbInput
            mdbValidate
            [mdbDatepicker]="datepicker"
            type="text"
            class="form-control"
            id="bis"
            formControlName="bis"
          />
          <label mdbLabel for="bis" class="form-label">{{ this.idLinkZiel() }} gültig bis</label>
          @if (form.hasError('bis')) {
            <mdb-error>{{ form.errors?.bisInvalid }}</mdb-error>
          }
          <mdb-datepicker-toggle [mdbDatepicker]="datepicker"></mdb-datepicker-toggle>
          <mdb-datepicker #datepicker [confirmDateOnSelect]="true" [options]="mdbDatepickertranslationOptions" [inline]="true" [format]="'dd.mm.yyyy'"></mdb-datepicker>
        </mdb-form-control>

Arkadiusz Idzikowski staff commented 1 month ago

Could you please provide more information on how to reproduce this problem or edit your post and include a full HTML/TS code on which we could use on our end?

How exactly do you update/clear the input field?


Großmeister T priority commented 3 weeks ago

@findokI guess you should work with a real date object in the datepicker component.You may format the displayed date using the format property:

[format]="'dd.mm.yyyy" in mdb-datepicker tag.

When you set formcontrol "bis" to null, there shouldn't be a date displayed.

In .ts the "bis"-date can be transformed to the required format (dd.mm.yyyy) using Angular datePipe for further usage.

Does this help?


findok priority commented 3 weeks ago

@Arkadiusz Idzikowski

I update/clear the field when i delete the content of the input field. Not programmatically, but actually deleteing the content of the input field. And after the input field is empty, the value of this.form.get('bis').value is still the current date.

So..to sum it up: i come to the page, the bis-field is invalid i input a date via the datepicker And no matter what i do afterwards, the value of the bis-form is never null again

@Großmeister T How to "work with a real date"? i tried to initialize the field in the formbuilder with:

bis: [null, [Validators.required]],

Doesnt change anything.

The problem in the first place isnt really the format. I can format the date to any string i want. But the value doesnt represent what is in the input field.

For example if i input:

99.99.9999

the value is: Tue May 28 2024 09:19:28 GMT+0200

That is so confusing


Rafał Seifert staff commented 3 weeks ago

We have investigated the problem. When user interacts with input we monitor these actions and act accordingly with setting input's value for valid date. Unfortunately it look's like we have a bug where we treat empty input as a valid date in which case we set current date. There is no quick workaround for this. We will add this issue to our to-do list and we will have to take a closer look and introduce a possible fix in future relases. May I help you with something else for now?


findok priority commented 2 weeks ago

No, thank you. If possible, write me a PM when you know in which version this will be fixed.


Rafał Seifert staff commented 2 weeks ago

We will refresh this thread when we fix the problem. You should get a notification then.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 6.0.0
  • Device: Pc
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No