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

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

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

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

  1. <!doctype html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="UTF-8">
  6. 		<title></title>
  7. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. 		<script src="js/jquery.js"></script>
  9. 	</head>
  10.  
  11. 	<body>
  12. 		定义日期字段
  13. 		<input type="date" id="myDate"/>
  14. 	</body>
  15. 	<script>
  16. 	$(document).ready(function(){
  17. 		var date = new Date();
  18. 		var myDate = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
    　　　　　　　　　　//这里的myDate的格式一定要是"year-month-day"
  19. 		console.log(myDate);
  20. 		$("#myDate").val(myDate);  //将当前日期赋值给input
  21. 		$("#myDate").change(function(){  //这个函数我是为了将input的结果输出来
  22. 			var val = $("#myDate").val();
  23. 			console.log(val);   
  24.  
  25. 		})
  26. 	})
  27.  
  28. 	</script>
  29. </html>

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

  1. <!doctype html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="UTF-8">
  6. 		<title></title>
  7. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. 		<script src="js/jquery.js"></script>
  9. 	</head>
  10.  
  11. 	<body>
  12.  
  13. 		<br />
  14. 		定义日期字段的时、分、秒（带有 time 控件）
  15. 		<input type="time" id="myTime"/>
  16. 	</body>
  17. 	<script>
  18. 	$(document).ready(function(){
  19. 		var date = new Date();
  20. 		var myTime = date.getHours() + ":" + (date.getMinutes());
    　　　　　　　　　　//这里的myTime 的"格式一定要是 hours:minutes"
  21. 		console.log(myTime);
  22. 		$("#myTime").val(myTime);
  23. 		$("#myTime").change(function(){
  24. 			var val = $("#myTime").val();
  25. 			console.log(val);
  26.  
  27. 		})
  28. 	})
  29.  
  30. 	</script>
  31. </html>

　　

　

html5中input新增type值的使用的更多相关文章

  1. html5中input的type类型有哪些（总结）

    html5中input的type类型有哪些(总结) 一.总结 一句话总结:时间.颜色.(邮件.电话.url).(数字.数字范围).搜索search 二.html5中input的type类型 值 描述 ...

  2. Html5中input新增的表单元素和属性介绍。

    input标签主要用于Web表单的创建交互,以便接受来自用户的数据. 我们通过更改type属性的值,来实现不同的输入类型.在以前的写法中表单元素必须放在form元素所包含的里面,而在html5中,我们 ...

  3. HTML5中input新增类型+表单新增属性+其他标签属性

    @ (猴头) Input 新增属性 email  邮箱(只在手机端有效) url  网址(只在iphone手机有效) tel  手机号(只在手机端有效) number  数字(右侧有上下按钮,只能输入 ...

  4. HTML5中input[type='date']自定义样式

    HTML5提供了日历控件功能,缩减了开发时间,但有时它的样式确实不如人意,我们可以根据下面的代码自行修改. 建议:复制下面的代码段,单独建立一个css文件,方便我们修改. /* 修改日历控件类型 */ ...

  5. 笔记：HTML5中input元素新增的type值

    在HTML5中,input元素的type值增加了不少,使input的功能强大了很多. 但在各大浏览器中并不是所有的type值都支持. 以下是比较有用.并且浏览器支持的稍好一些的值: type=colo ...

  6. HTML5中input标签有用的新属性

    HTML5对input增加了一些新标签,个人觉得比较常用有效的以下几个 placeholder=“请输入” 常见用于默认提示 autofocus 自动聚焦到当前输入框 maxlength=" ...

  7. Jquery中input：type=radio的监听，获取设置值

    一.html <div id='demo'> <input type='radio' name='sex' value='男' > <input type='radio' ...

  8. 【HTML5】input元素type属性值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. html5中 input的pattern属性 和 details/summary元素

    html5--3.21 课程小结与其他新增元素 一.总结 一句话总结: input的pattern属性可以设置正则验证,比如检测学号的位数和数字区间 details/summary元素配合起来可以做元 ...

随机推荐

  1. codevs 1993 草地排水 USACO

    /*Dinic*/ #include<iostream> #include<cstdio> #include<cstring> #include<queue& ...

  2. MySQL存储过程（一）

    1.1 CREATE  PROCEDURE (创建) CREATE PROCEDURE存储过程名 (参数列表) BEGIN SQL语句代码块 END 注意: 由括号包围的参数列必须总是存在.如果没有参 ...

  3. VS2008 快捷键大全--------<<转>>

    VS2008 快捷键大全   Ctrl+E,D ----             格式化全部代码 Ctrl+K,F ----             格式化选中的代码 CTRL + SHIFT + B ...

  4. python面对对象编程----------7:callable（类调用）与context（上下文）

    一:callables callables使类实例能够像函数一样被调用 如果类需要一个函数型接口这时用callable,最好继承自abc.Callable,这样有些检查机制并且一看就知道此类的目的是c ...

  5. CSS对浏览器的兼容性常见处理方式小结

    CSS技巧 1.div的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了. 缺点:要控制内 ...

  6. DHCP服务器

    DHCP指的是由服务器控制一段IP地址范围,客户机登录服务器时就可以自动获得服务器分配的IP地址和子网掩码.首先,DHCP服务器必须是一台安装有Windows 2000 Server/Advanced ...

  7. asp.net使用dorpdownlist绑定无限级分类

          /// <summary>        /// 绑定父项分类        /// </summary> protected void DDLBindClass( ...

  8. linux list all users.

    cat /etc/passwd sample of list users in linux. ref: Linux Command: List All Users In The System

  9. eclipse设置和优化

    1.eclipse下的编码设置: eclipse 中使用模板新建 JSP,xhtml等 文件时,默认的编码为:ISO-8859-1. ISO-8859-1 编码对于中文的显示是不支持的,如果要支持简体 ...

  10. spring resttemplate中的转码

    /* * 初始化RestTemplate,RestTemplate会默认添加HttpMessageConverter * 添加的StringHttpMessageConverter非UTF-8 所以先 ...