二狗在最近的项目以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>