首页 > 代码库 > html5中input新增type值的使用
html5中input新增type值的使用
二狗在最近的项目以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="http://www.mamicode.com/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="http://www.mamicode.com/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>
html5中input新增type值的使用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。