html - 有什么方法可以专注于日期时间本地输入控件中的特定单元

Question

我需要能够将焦点设置在本地日期时间输入控件的小时部分。

<input type="datetime-local" />

该解决方案还需要能够处理各种日期时间格式 - 我目前将其留给浏览器来决定。

所以这个

成为

Answer 1

每个浏览器都以自己的方式呈现输入元素，并且您在视觉上看到的大部分格式/布局都是由浏览器的代码完成的。显然，您仍然可以与这些元素进行交互，但只能使用您习惯的 native 命令(聚焦、鼠标悬停、单击等)。

感觉应该可以重新创建与用户交互相同的状态，但是这些东西被隐藏在每个单独的浏览器代码中。

我认为你最好的选择是研究已经存在的范围广泛的 JS 日期选择器，看看是否有任何符合你的要求，如果不是最接近的解决方案，你会发现创建你自己的带有一些由日期时间输入字段支持的巧妙样式

<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/