二狗在最近的项目以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. HTML案例练习一

    发现其实JS也是挺容易的,也挺好玩的,写的一个控制图片移动的小案例,对DOM机制还是不怎么熟. <html> <head> <style type = "tex ...

  2. div如何加滚动条

    <div style="position:absolute; height:400px; overflow:auto"></div>div 设置滚动条显示: ...

  3. asp.net微信开发第五篇----用户分组管理

    上一篇已讲解到新建用户分组,移动用户到分组的功能,这一章主要讲解修改分组名称和删除分组 开发者可以使用接口,对公众平台的分组进行查询.创建.修改.删除等操作,也可以使用接口在需要时移动用户到某个分组. ...

  4. break、continue和goto 三者作用介绍

    跳跃语句 由于break.continue和goto语句有助于跳跃到代码中的某个特定语句,因此它们属于跳跃语句.下面是这三个语句的介绍. ①break语句 这个语句常与switch语句联合使用:但是, ...

  5. （转）MySQL数据库命名规范及约定

    一.[操作规范]1. 如无备注,则表中的第一个id字段一定是主键且为自动增长:2. 如无备注,则数值类型的字段请使用UNSIGNED属性:3. 如无备注,排序字段order_id在程序中默认使用降序排 ...

  6. Linux svn一次增加多个文件并批量上传

    命令行下操作svn没有使用界面形式的TortoiseSVN直观,但是不管怎样,命令行下操作svn还是有它的有点,如果你碰到一次需要svn add许多个文件怎么办?下面的命令可以帮助你解决这个问题 一次 ...

  7. 报错：ORA-02287: 此处不允许序号

    CREATE TABLE MY_TAB (N1 NUMBER(5),N2 DATE);          SELECT  * FROM MY_TAB;          CREATE SEQUENCE ...

  8. eclipse 编辑 python 中文乱码的解决方案

    今天在学习python时做了一个用户输入一个目录地址,再输入内容,然后将输入的内容存入输入的目录文件中: 具体代码如下: #coding:utf- ''' Created on -- @author: ...

  9. "类名.this"与"this"的区别

    "this"是指(或者说:所代表的是)当前这段代码所在的类的对象.而"类名.this"是指"类名"的对象(一般在匿名类或内部类中使用来调用外 ...

  10. CentOS下安装配置Cacti

    cacti简介 随着公司规模扩大,服务器也日渐增多,对服务器集群的网络流量和服务器性能实时监测显得愈发重要.开源阵营中常用有MRTG(MultiRouter Traffic Grapher)--基于S ...