设置datetime-local的默认时间值

时间:2014-08-15 09:04:07

标签: javascript jquery html html5 datetime

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

<input  type="datetime-local">

我希望能够为时间部分设置默认值,以便如果 有人插入日期并且没有插入时间(将其保留为 - : - : - )然后我可以将其设置为00:00:00。

问题是我只知道如何设置一个值,包括日期和时间,以及是否有人只插入一个日期w / o我无法读取该值并获得空白值。

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

1 个答案:

答案 0 :(得分:0)

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

请注意,除非字段已完全填写,否则date字段无效。所以我使用blur事件代替keyupchange

$(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:none div。

中隐藏结果字段