有没有办法专注于日期时间本地输入控件中的特定单位

Question

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

<input type="datetime-local" />

该解决方案还需要能够处理各种日期时间格式 - 我目前正在离开浏览器来决定.

所以这

变

Answer 1

每个浏览器都以自己的方式呈现输入元素,并且您可视化看到的大多数格式/布局都是由浏览器的代码完成的.显然,您仍然可以与这些元素进行交互,但只能使用您习惯的本机命令(焦点,鼠标悬停,单击等).

感觉应该可以重新创建与用户交互相同的状态,但这些内容隐藏在每个浏览器代码中.

我认为你最好的选择是调查已经存在的各种JS日期选择器,看看是否符合你的要求,如果不是最接近你会发现的解决方案,那就是创建你自己的由datetime输入字段支持的聪明样式

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

Answer 2

据我所知，没有办法关注日期时间本地字段的小时。事实上，甚至还没有所有浏览器支持 datetime-local 字段。您无法在 Firefox 和 IE 上使用 datetime-local。您可能会忽略 IE，但如果 Firefox 也在列表中，您最好重新考虑是否应该坚持使用 datetime-local。

如果您使用普通的 javascript datetime-picker 插件，您可以尝试使用 vanilla javascript 提供的 setSelectionRange() 方法来关注小时位置。

例如，如果在 ID 为 startDate 的 div 中有一个日期输入字段，并设置了正确的日期时间格式，则可以通过以下方式执行此操作：

var startDateBox = $("#startDate input")[0];
startDateBox.setSelectionRange(11, 13);
startDateBox.focus();

JS 小提琴演示