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

　　

　

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. 9.14noip模拟试题

    中文题目名称 祖孙询问 比赛 数字 英文题目名称 tree mat num 可执行文件名 tree mat num 输入文件名 tree.in mat.in num.in 输出文件名 tree.out ...

  2. EXCEL表格常用函数使用的难点

    1.  INDIRECT(ref_text,逻辑值) 返回由文本字符串指定的引用.此函数立即对引用进行计算,并显示其内容.ref_text,文本引用说明, (1) A1-样式的引用(逻辑值,T,缺省) ...

  3. jquery.placeholder.js的使用

    最近做东西用到placeholder这个属性,可是这个属性在低版本的IE或者QQ浏览器等这些浏览器上这个属性不能生效,后来在网上查了下,发现了jquery的一个插件jquery.placeholder ...

  4. （转）教你如何使用php session

    学会php session可以在很多地方使用,比如做一个后台登录的功能,要让程序记住用户的session,其实很简单,看了下面的文章你就明白了.     PHP session用法其实很简单它可以把用 ...

  5. 使用<br>标签分行显示文本

    对于上一小节的例子,我们想让那首诗显示得更美观些,如显示下面效果: 怎么可以让每一句诗词后面加入一个折行呢?那就可以用到<br />标签了,在需要加回车换行的地方加入<br /> ...

  6. <body>标签，网页上显示的内容放在这里

    在网页上要展示出来的页面内容一定要放在body标签中.如下图是一个新闻文章的网页. 在浏览器中的显示效果: 示例: <!DOCTYPE HTML> <html> <hea ...

  7. sqlserver2008附加数据库——错误3415

    权限问题, 在其文件,右击属性>安全>编辑>添加>加一个everyone单击确定>其完全控制, 这样给每个用户权限 ---来自凌波小屋----冯和超笔记-----

  8. this、new、apply和call详解

    讲解this指针的原理是个很复杂的问题,如果我们从javascript里this的实现机制来说明this,很多朋友可能会越来越糊涂,因此本篇打算换一个思路从应用的角度来讲解this指针,从这个角度理解 ...

  9. JavaScript_数组

    /** * 数组本身也是对象 * js中数组类似于java里的map容器 长度可随意改变 ,元素类型任意 * */ // var arr = new Array(); // var arr = [1, ...

  10. [技术翻译]Guava-libraries（一）: 用户指导

    用户指导 本文翻译自http://code.google.com/p/guava-libraries/wiki/GuavaExplained,由十八子将翻译,发表于博客园 http://www.cnb ...