Have you examples or ideas how to add placeholder to the DateField?

[ArtemFedorchuk]

I need to do like this :

Currently, I have like this:

Are there ways to add the placeholder if the field has no value or is not focused?
And I want to do opening Calendar if you click anywhere inside the field not only the icon.
The Calendar should be closed if the DateField focus is lost.

[devongovett]

A placeholder other than the default one isn't really possible because the individual segments are focusable. If you swapped the segments with plain text, then there would be no way to click on a segment to focus it.

It sounds like you don't really want the date to be keyboard editable though? In that case, you could use a custom Button that triggers a popover with a Calendar inside to select the date, instead of a DateField. Then clicking on that button would open the calendar.

[ArtemFedorchuk]

I have an idea how to do it.
We should have two components:

1. Segments
2. Placeholder
   Then we should check the value === null && if the focus on the Wrapper is false in this way you can see a placeholder but if you set the focus on the field you can see the segments.
   Maybe I'm mistaken, what do you think?

Similar behaviour you can see in the MUI librari I'd like something like this.

[snowystinger]

You could probably accomplish that with what @devongovett outlined above, just when the button gains focus, replace it with the actual DateField and auto focus the first segment. If it's empty and blurs, then place back the button. The whole thing acts like a button on touch for mobile anyways, it automatically pops up the calendar when you click anywhere on it.

One thing to note about that MUI one is that due to the focus/blur nature, I can't seem to autofill it using any of my password managers or chrome form filling.

[ArtemFedorchuk]

Thanks a lot