How to control the placeholder-text of the webkit-calendar?

[StephieTack]

I'm using the in a web application to select a month. Initially, the selected month is displayed correctly in the input field. However, when the user clears the input, the native "löschen" button of the Webkit calendar (which is part of the browser's built-in UI) appears, and the input field shows ------- --. I want to customize the behavior of this clear button to display a custom text instead of the default ------- --, or hide the clear button entirely when the user clears the input field.

I've tried using a placeholder and other styling techniques but haven't been able to get the desired behavior. How can I modify the placeholder-text or hide the default "löschen" button when the input field is cleared?

feature/statistics

UserStory:
https://github.com/users/Jennifer-Hinrichsen/projects/3/views/1?pane=issue&itemId=83576529&issue=Jennifer-Hinrichsen%7Cemotion-tracker%7C20

Any help or suggestions would be greatly appreciated!

[F-Kirchhoff]

The input with type="month" only works in chromium based browsers like Chrome, Edge or Opera.
If you want the user to select a date range I would suggest to use 2 input type="date" instead. One for the start of the range, one for the end date. You can filter your entries with something like entry.date > startDate && entry.date < endDate afterwards.
Please make sure to set the lower boundary for the enddate with <input type="date" min={startDate}>. Hope that helps!

[StephieTack]

I am not quite sure if I described my point good enough.
Switching to is not a suitable solution for my case since it doesn't provide the same UX.
I orientated on our existing form. There we also have the type="datetime-local" and it is also not provided by Firefox.
Could you also suggest a solution for my type="month"-problem? In my opinion the implementation is as expected - only the display of "------- --" while click on "löschen" in the calendar is not perfect.