Topic: Datepicker value format
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>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- 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
Arkadiusz Idzikowski staff commented 3 weeks 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 2 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 2 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 2 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 1 week ago
No, thank you. If possible, write me a PM when you know in which version this will be fixed.
Rafał Seifert staff commented 1 week ago
We will refresh this thread when we fix the problem. You should get a notification then.