html5中input新增type值的使用

最新推荐文章于 2021-06-17 16:01:54 发布

weixin_34032621

最新推荐文章于 2021-06-17 16:01:54 发布

阅读量146

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/momozjm/p/6165187.html

本文介绍了HTML5中input新增的type属性值，包括type=date和type=time的使用方法，并通过示例展示了如何设置和获取这些输入类型的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

二狗在最近的项目以html5和webapp为主，并接触到了input新增type值的使用，下面就把这些玩意一一以实例列举出来

一：type = date:定义日期：年-月-日

input type="date"可以获取年月日的值，也可以给它的value设置自定义的值哦。

注意：如果你想给input设置你自定义的value值，自定义的值的格式 一定要和input type=date的格式 一样才行。

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/jquery.js"></script>
	</head>

	<body>
		定义日期字段
		<input type="date" id="myDate"/>
	</body>
	<script>
	$(document).ready(function(){
		var date = new Date();
		var myDate = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
　　　　　　　　　　//这里的myDate的格式一定要是"year-month-day"
		console.log(myDate);
		$("#myDate").val(myDate);  //将当前日期赋值给input
		$("#myDate").change(function(){  //这个函数我是为了将input的结果输出来
			var val = $("#myDate").val();
			console.log(val);   
			
		})
	})
		
	</script>
</html>

二：一：type = time:定义时间：时:分

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/jquery.js"></script>
	</head>

	<body>
		
		<br />
		定义日期字段的时、分、秒（带有 time 控件）
		<input type="time" id="myTime"/>
	</body>
	<script>
	$(document).ready(function(){
		var date = new Date();
		var myTime = date.getHours() + ":" + (date.getMinutes());
　　　　　　　　　　//这里的myTime 的"格式一定要是 hours:minutes"
		console.log(myTime);
		$("#myTime").val(myTime);
		$("#myTime").change(function(){
			var val = $("#myTime").val();
			console.log(val);
			
		})
	})
		
	</script>
</html>

转载于:https://www.cnblogs.com/momozjm/p/6165187.html