设置 datetime-local 的默认时间值

2024-04-30

我使用这个 html 标签作为日期时间选择器:

<input  type="datetime-local">

我希望能够为仅时间部分因此,如果 有人插入日期但不插入时间(将其保留为 --:--:--),那么我可以将其设置为 00:00:00 例如。

问题是我只知道如何设置包括日期和时间的值,如果有人只插入日期而没有时间,我无法读取该值并获得空白值。

有可能克服这个问题吗?或者是否有任何其他日期时间选择器可以用于所描述的场景?


我们无法更改浏览器针对元素的行为。所以这是对第二个问题的答案,即这种情况是否有另一种解决方案。我使用了两个独立的字段date and time其控制单个datetime-local field.

请注意,date除非字段完全填写,否则归档没有任何价值。所以我用了blur事件而不是keyup or change.

$(document).ready(function() {
  var mydate, mytime, mystring;
  $("#dateField").blur(function() {
    if ($(this).val()) {
      setResult();
    }
  })

  $("#timeField").change(function() {
    setResult()
  })
})

function setResult() {
  mydate = $("#dateField").val();
  mytime = $("#timeField").val();
  mystring = mydate + 'T' + mytime;
  document.getElementById('resultField').value = mystring;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dateField" type="date"><input id="timeField" type="time" value="18:30">

<br>
<strong>Result</strong>:
<br>
<input id="resultField" type="datetime-local">

脚注1: The change监听器工作于time字段(当有默认值时),但我注意到 google-chrome 中有一个模糊的行为,如果您更改通过鼠标单击提交的时间值,则会在之后触发更改事件mouseOut!这对上面的答案没有影响。

脚注2:您可以将结果字段隐藏在display:none div.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

设置 datetime-local 的默认时间值 的相关文章

随机推荐