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

    /* 画矩阵找规律发现是杨辉三角 Cg (i,j)= C (i+j,i); 贪心走的话 沿着0行(列)一直走然后拐直角 拐弯后每个格子都累加 Cg (n,0) + Cg (n,1) + Cg (n,2 ...

  2. p标签里面不能嵌套div

    先申明本人代码水平为零起点,刚开始学习前端,所以就是小白.不过大神也是小白变身的么,所以要专心码代码,潜心钻研,haha~ 今天练习了段代码,发现效果和自己想象的不一样: 想了一下估计是<p&g ...

  3. IE8 placeholder兼容+Password兼容

    对于placeholder兼容问题 IE系列的大部分不兼容 使用JQ插件解决这个问题,确实用法很简单 jS下载地址http://www.ijquery.cn/js/jquery.placeholder ...

  4. c - 向一个排序好的数组插入一个数,插入后数组依然是排序好的

    概述 因为这里只是演示插入1个数,这里我不用malloc再重新分配,而是将原先数组的腾出一个占位符. 完整代码如下: #include <stdio.h> #define LEN 6 // ...

  5. 你好，C++（32） 类是对现实世界的抽象和描述 6.2.1 类的声明和定义

    6.2  类:当C++爱上面向对象 类这个概念是面向对象思想在C++中的具体体现:它既是封装的结果,同时也是继承和多态的载体.因此,要想学习C++中的面向对象程序设计,也就必须从“类”开始. 6.2. ...

  6. NHibernate考察实例：简单映射

    建立一个Company类用来测试,对应的表为TBLCOMPANY.   1. 下载NHibernate(版本1.2.0.CR1),将NHibernate \bin\net-2.0下面的文件拷贝到lib ...

  7. IIS 7.5 部署ASP.Net MVC 网站

    請務必註冊 ASP.NET 4.0:若是 32 位元則是 %WINDIR%\Microsoft.NET\Framework\v4.0.30319\aspnet_regiis -ir 1.首先确定已经安 ...

  8. zsh中home键失灵问题

    putty访问linux时,如果出现这个情况,可以更改配置中Connection->Data->Terminal-type-string,改为linux,再连接即可 mac下可打开终端的配 ...

  9. 求数列的和 AC 杭电

    求数列的和 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  10. 扩展《C程序设计语言》练习2-3程序通用性

    最近开始自学C语言,在看K&R的<C程序设计语言>.练习2-3要求写一个函数,将输入的十六进制数字字符串转换成与之等价的整数值,配套答案没有扩展程序的通用性,所以我就稍微改造改造. ...