设置datetime-local的默认时间值

Question

我使用此html标记作为日期时间选择器:

<input  type="datetime-local">

我希望能够仅为时间部分设置默认值,这样如果有人插入日期并且没有插入时间(将其保留为 - : - : - ),那么我将能够将其设置为例如00:00:00

问题是,我只知道如何设置既包括日期和时间以及一个值,如果有人只插入一个日期W/O的时候,我无法读取该值并得到一个空值.

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

Answer 1

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

请注意，date除非该字段完全填写，否则该字段没有任何价值。所以我使用blurevent 而不是keyupor 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： 侦听器在字段change上工作time（当具有默认值时），但我注意到 google-chrome 中的模糊行为，如果您更改通过鼠标单击提交的时间值，则在之后触发更改事件mouseOut！这对上面的答案没有影响。

脚注 2： 您可以将结果字段隐藏在display:nonediv 内。