二狗在最近的项目以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 1281 Xn数列 （矩阵乘法）

    /* 再来个题练练手 scanf longlong 有bug....... */ #include<cstdio> #include<iostream> #include< ...

  2. android开发中的5种存储数据方式

    数据存储在开发中是使用最频繁的,根据不同的情况选择不同的存储数据方式对于提高开发效率很有帮助.下面笔者在主要介绍Android平台中实现数据存储的5种方式. 1.使用SharedPreferences ...

  3. Asp.net 事务处理

    事务处理是在数据处理时经常遇到的问题,经常用到的方法有以下三种总结整理如下:方法1:直接写入到sql 中在存储过程中使用 BEGIN TRANS, COMMIT TRANS, ROLLBACK TRA ...

  4. iOS9升级后第三方平台无法分享的问题

    最近升级到了Xcode7,在真机调试中发现在初始化微博SDK时程序Crash. 解决办法从微博官网下一个最新的SDK,替换掉工程中的即可. 2.替换微博最新SDK之后成功运行程序,之后发现微信.QQ. ...

  5. iOS App完整项目

    前言 iOS开发学习者都希望得到实战训练,但是很多资料都是只有一小部分代码,并不能形成完成的App,笔者在此处收集了很多开源的完整的App,都有源代码哦! 完整项目 Phonetic Swift 写的 ...

  6. CSS代码语法

    css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到 ...

  7. mybatis 一对一关联

    首先建表: CREATE TABLE teacher( t_id INT PRIMARY KEY AUTO_INCREMENT, t_name VARCHAR(20) ); CREATE TABLE ...

  8. 开始编写正式的iOS 程序(iOS编程指导)

    App设计基础 在确定了你的App主要功能后,需要把它转化为代码.如果你是第一次开发属于自己的iOS App,需要花些时间熟悉基本概念.iOS内置了很多设计样式,多了解下能对你以后有帮助. 初稿 设计 ...

  9. 10_RHEL安装搜狗输入法

    首先需要安装相关源 1.加入EPEL源 EPEL7几乎是必备的源: $ sudo yum install epel-release 2.添加mosquito-myrepo源 mosquito-myre ...

  10. angularJS中如何写服务

    服务的用途 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性 服务提供了把特定功能相关联的方法集中在一起的接口 如何创建服务 angularJS ...