Date picker formatting: Custom date-format breaks component usage

[lyyka]

Description

What I expected: When I define date-format (i.e. "d/m/Y") on bx-date-picker component, I expect the component to render the value in that format, but still work with 'Y-m-d' format in the back. So when loading existing values, I wanted to load the value in Y-m-d format and set enabled-range in Y-m-d format too.

What happened instead: I defined date-format as "d/m/Y". enabled-range which was defined in Y-m-d format was no longer working and value was no longer loading correctly. Defining enabled-range in new "d/m/Y" format breaks it, as the "/" is used as delimiter between min/max dates.

Component(s) impacted

bx-date-picker/ bx-date-picker-input

This is my code, trying to use "d/m/Y" format (not working as expected atm):

<bx-date-picker date-format="d/m/Y"
                enabled-range="/{{ now()->subYears(21)->format('d/m/Y') }}"
                class="form-field"
                name="date_of_birth">
    <bx-date-picker-input label-text="* Date of birth"
                          kind="single"
                          value="{{ $user->date_of_birth?->format('d/m/Y') }}"
                          @error('date_of_birth') invalid validity-message="{{ $message }}" @enderror
                          placeholder="dd/mm/yyyy">
    </bx-date-picker-input>
</bx-date-picker>

Browser

Chrome

Carbon Web Components version

latest (https://1.www.s81c.com/common/carbon/web-components/tag/latest/date-picker.min.js)

Severity

Severity 1 = The design is broken in a critical way that blocks users from completing tasks or damages the brand. Affects major functionality, no workaround.

Application/website

Laravel application

CodeSandbox example

?

Steps to reproduce the issue (if applicable)

Already explained in description

Release date (if applicable)

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate issues