Changing Placeholder or Default Value Case in Date Input Field

Hello :sunny:

Does anyone know how I can change the placeholder or default value to have lowercase or uppercase for the day in the date input?

By default, the placeholder text comes with a capital letter, and the default text comes with a lowercase letter. I want these to be consistent.

Default value with lowercase letter:


Placeholder value with a capital letter:
Skjermbilde 2024-03-02 kl. 10.31.19

Hi @Xtine

There is no way to do it within default or placeholder values.

You can however create a custom calendar to hack this.
Change any text/color option on the calendar element to 0 opacity. This way your calender is available to interact but not actually visible. Overlay a calender icon on top of this calendar element. This would server as a icon that you can click to see the dates.
On the left of this group of icon+calendar element, place a text whose value is Date time picker’s value formatted as Fre, 01.03.24 : lowercase.
You can probably create a reusable element and use it all over your app.

See this editor for a demo POC | Bubble Editor

1 Like