Bubble Card - How to change date entity formatting on sub-button

[uneven thicket]

Not sure if this is necessarily bubble card specific, but without creating helper entities, how do I modify the date formatting of these date entities I've put on a sub-button to different format (eg: MMM dd YYYY)? Thanks in advance!

[slow kiln]

Can you post your YAML for that card? I don't use the Bubble card but I think I can come up with something that helps.

[uneven thicket]

I use JS style to edit the sub-text of a card already, I just don't know what each element is called or how to format date entity text. But this is the section with those 3 entities:

        card_type: separator
        name: Hot Tub
        sub_button:
          - entity: date.hot_tub_rinse_filter_due
            show_state: true
            name: Rinse Filter
            icon: mdi:water-pump
            show_name: true
            show_icon: false
          - entity: date.hot_tub_clean_filter_due
            show_state: true
            icon: mdi:air-filter
            show_name: true
            show_attribute: false
            name: Clean Filter
            show_icon: false
          - show_state: true
            show_name: true
            entity: date.hot_tub_change_water_due
            icon: mdi:water
            show_background: true
            show_icon: false
            state_background: true
            show_attribute: false
            name: Change Water
        card_layout: large-2-rows
        rows: "1.3"```

[slow kiln]

This is turning out to be more difficult than I expected. I forgot how difficult modifying Bubble Cards can be. Here's a start; I'll have to mess with it some more later. The first sub-button shows my modification. There could be some other way of doing it but I'm still trying to remember Bubble Card stuff. And, this isn't completely right because I can't figure out how to get the comma out of the date even when defining a locale. ```yaml
type: custom:bubble-card
card_type: separator
name: Hot Tub
sub_button:

• entity: input_datetime.tester
  show_state: true
  name: Rinse Filter
  icon: mdi:water-pump
  show_name: true
  show_icon: false
• entity: input_datetime.tester
  show_state: true
  name: Rinse Filter
  icon: mdi:water-pump
  show_name: true
  show_icon: false
  styles: |
  ${card.querySelector('.bubble-sub-button-1').innerText = "Rinse Filter: " + new Date(hass.states['input_datetime.tester'].state).toLocaleDateString(undefined,
  { month: "long", day: "numeric", year: "numeric", } )}

MMM dd YYYY

card_layout: large-2-rows
rows: "1.3"