1. 程式人生 > >java web input type="date"時間的處理

java web input type="date"時間的處理

java web實現的選擇時間input後內容改變後觸發時間
實現時間的比較

<!DOCTYPE html>
<html lang="en">
<head>
	<title></title>
</head>
<body >
 <div><!-- 模組一 -->

  <form onsubmit=" return myfunction()" action="myfunction.jsp" > 
  	<input type="date" name="name" id="name" oninput="alert(this.value);" /><!-- //內容改變時觸發時間 -->
  	<input type="date" name="idData" id="idData" onblur="myfunction()" /> <!-- //失去焦點時觸發時間 -->
 <input type="submit" value="Submit" />

  </form>
 
 </div>
<br>
<div><!-- 模組二 -->

  <form action="myfunction.jsp" > 
  	<input type="date" id="name"  />
  	<input type="date" id="idData" oninput="myfunction()" /> <!-- //內容改變時觸發時間 -->
 <input type="submit" value="Submit" />
  </form>
 </div>
<br>
<div><!-- 模組三 -->

  <form action="myfunction.jsp" onsubmit="return myfunction()" > <!-- 提交內容是驗證時間的比較 -->
  	<input type="date" id="name"  />
  	<input type="date" id="idData"  /> 
 <input type="submit" value="Submit" />
  </form>
 </div>
  <script type="text/javascript">
  	function  myfunction(){
  		var date=  document.getElementById("idData").value;
  		var date1=document.getElementById("name").value;
  		var al = new Date(date).getTime();
         var bl = new Date(date1).getTime();
         alert("提交");
  		if (al>bl) { //比較時間的大小
  			alert("提交");
  			console.info("success");
  			return false;
  		}

  	}
  </script>
</body> 
</html>