DatePicker raw input value

Hi, I’m trying to do some custom data transformation. I have a requirement to transform eg. 2106 input in DatePicker to
21.06.2023. I could do this manually either on blur event or on invalid value event and then set the parsed value back on the DatePicker from the server side, however, it seems that none of those events (or even the DatePicker itself) provide a way to access the underlying input value.
Is there a way to access the input value or am I missing something?

Open Feature Request: https://github.com/vaadin/flow-components/issues/2466

Hmm, ok. So no easy way to get the raw input value at the moment using the element API? I got something semi-working with

datePicker.getElement().executeJs("""
        this.addEventListener("blur", event => {
            console.log("CLIENT SIDE BLUR!!!!!");
            const value = this.getElementsByTagName('input')[0].value;
            console.log(value);
            console.log(this);
            console.log($0);
            console.log($1);
            $0.invalidValueCallback(value);
            console.log('CLIENT SIDE BLUR DONE!');
            })
        """, this, this.getElement());

but this is not ideal and requires a custom component on which I must define the server side callback that is invoked from the client side…

I don’t know of any “non hacky solutions”

Maybe there are some hacky solutions that do not require server → client → server calls? I feel that the value should exist somewhere on the DatePicker component at blur time… Or is the validation client side and it never gets the value from the browser unless it is actually a date?

I’m open to java reflection hacks :slightly_smiling_face:

It never reaches the server as far as I know

Note DatePicker comes with datefns imtegration. You can set formatters via DatePickerI18n class.

So you do not necessarily need it

that might work, although I don’t think I’ve ever tried filling in a missing year like that, but IF it works, this is probably how you do it

// Provide 2 parsing formats, the first of which will be used to render the current value:
setDateFormat("dd.MM.yyyy", "ddMM");
// Provide a date to be used for filling in missing info, like the year (let's use this year's midpoint, so that it will use 2023 as "fill-in":
setReferenceDate(LocalDate.of(2023, 7, 1));

Lemme know if that works

(oh and the above needs to be done on the DatePickerI18n object, which you then set on the DatePicker instance)