Hiding and showing custom px button

Hi Alistair,

I hope you’re doing well.

I wanted to share a workaround I've developed for your use case using CSS. The solution now allows the submit button to be hidden initially and displayed only after a user interacts with the calendar input. 

Here's a brief rundown of the steps I followed:

1. CSS Adjustment: Initially hiding the submit button.
   ```css
   #submitButton {
       display: none; /* Initially hide the submit button */
   }
   ```

2. HTML Modification: I added an `onfocus` attribute to the date input element. This triggers the display of the button when the user clicks on the calendar.
   ```html
   onfocus="this.nextElementSibling.style.display='inline-block'"
   ```

Below is the exact code snippet for the input field and the submit button:

```html
<h2>Select a Date</h2>
<input type="date" id="dateInput" style="outline: none; border: 1px solid; padding: 5px;" onfocus="this.nextElementSibling.style.display='inline-block'" value="">
<button id="submitButton" style="display: none; margin-left: 10px;">Submit</button>
```

Additionally, I have attached a recording explaining the workaround in detail:
https://share.zight.com/z8u2npX1

I’d love to hear your feedback on this approach.