Invalid HTML IDs

[tillsanders]

Each day in the calendar is given an HTML id with it's date. This is very handy, e.g. for styling. However, these ids are invalid because they start with a digit. This is an excerpt of the HTML generated by VueDatePicker:

<div class="dp__calendar_row" role="row">
	<div id="2024-11-25" role="gridcell" class="dp__calendar_item" tabindex="0" data-test-id="Mon Nov 25 2024 00:00:00 GMT+0100 (Central European Standard Time)">
		<div class="dp__cell_inner dp__pointer dp__today dp__date_hover">25</div>
	</div>
	<div id="2024-11-26" role="gridcell" class="dp__calendar_item" tabindex="0" data-test-id="Tue Nov 26 2024 00:00:00 GMT+0100 (Central European Standard Time)">
		<div class="dp__cell_inner dp__pointer dp--future dp__date_hover">26</div>
	</div>
	<!-- [...] -->
</div>

As you can see, the ids assigned are the year, month and day with hyphens in between, e.g. 2024-11-25. This is not a valid id as per the CSS standard (https://developer.mozilla.org/en-US/docs/Web/CSS/ident).

This can cause unexpected problems. For example, running this code will yield an error in the console:

document.querySelector('#2024-11-25')

Uncaught DOMException: Document.querySelector: '#2024-11-25' is not a valid selector

It is possible to escape the first digit (#\2024-11-25). This will silence the error but the result will be null.

Tested with Firefox 132 and VueDatePicker v10.0.0.

Solution

Prefix the ids with a string. E.g. dp-.