is there any way to focus on a specific unit within a datetime-local input control

Question

I need to be able to set the focus on the hours portion of a datetime-local input control.

<input type="datetime-local" />

The solution also needs to be able to handle various datetime formats - which I am currently leaving to the browser to decide.

So this

becomes

Answer 1

Each browser renders input elements in their own way and most of the formatting/layout you see visually is done by the browser's code. Obviously you can still interact with these elements, but only with the native commands you are used to (focus, mouse over, click, etc).

It feels it should be possible to recreate the same state as with user interaction, but this stuff is buried in each individual browsers code.

I think your best bet would be to look into the wide range of JS date pickers that are already out there and see if any match up with your requirements, if not the closest to a solution you will find is to create your own with a bit of clever styling backed by the datetime input field

<input type="datetime-local" style="display:none" />
<div class="custom-datetime-local">
    <span class="day">dd</span>/
    <span class="month">mm</span>/
    <span class="year">yyyy</span>
    &nbsp;
    <span class="hour">--</span>:
    <span class="minute">--</span>
</div>

https://jsfiddle.net/dh4a4f2p/