二狗在最近的项目以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. Web api 文档以及测试工具配置

    第一步: 创建web api 在nuget 上搜索 webapitestclient (包含预发行版) 然后在 /Areas/HelpPage/Views/Help/Api.cshtml 末尾 添加 ...

  2. “死锁” 与 python多线程之threading模块下的锁机制

    一:死锁 在死锁之前需要先了解的概念是“可抢占资源”与“不可抢占资源”[此处的资源可以是硬件设备也可以是一组信息],因为死锁是与不可抢占资源有关的. 可抢占资源:可以从拥有他的进程中抢占而不会发生副作 ...

  3. C# Wpf双向绑定实例

    Wpf中双向绑定处理需要两处 实例1: 1.前台Xaml中属性Binding 时Model指定 TwoWay <Grid> <Ellipse x:Name="ellipse ...

  4. Android开发笔记:安卓程序截屏方法

    1,基于Android SDK的截屏方法 (1)主要就是利用SDK提供的View.getDrawingCache()方法.网上已经有很多的实例了.首先创建一个android project,然后进行L ...

  5. unexpected nil window in _UIApplicationHandleEventFromQueueEvent...

    unexpected nil window in _UIApplicationHandleEventFromQueueEvent, _windowServerHitTestWindow: <UI ...

  6. 关于margin-top失效的解决方法

    常出现两种情况:(一)margin-top失效 先看下面代码: <div><div class="box1" >float:left</div> ...

  7. Sql Server使用技巧

    1.修改表的字段时,提示不能更改: 工具>选项>设计器>取消 阻止保存要求重新创建表的更改 2.更改选择多少行,编辑多少行: 工具>选项>Sql Server对象资源管理 ...

  8. Python标准库--os模块

    这个模块包含普遍的操作系统功能.如果你希望你的程序能够与平台无关的话,这个模块是尤为重要的.即它允许一个程序在编写后不需要任何改动,也不会发生任何问题,就可以在Linux和Windows下运行.一个例 ...

  9. ext.apply和ext.applyIf

    apply的用法: Ext中apply及applyIf方法的应用 apply及applyIf方法都是用于实现把一个对象中的属性应用于另外一个对象中,相当于属性拷贝. 不同的是apply将会覆盖目标对象 ...

  10. JS笔记1

    1.每个函数对象都有一个length属性,表示该函数期望接收的参数个数.它与函数的arguments不同,arguments.length表示函数实际接收的参数个数. 2.javascript 中有五 ...