html5 input datetime为什么调不出来日历控件

html-css018

html5 input datetime为什么调不出来日历控件,第1张

调不出来是因为有些浏览器不支持datetime这种日历控件,比如chrome。

Datetime 对象是 HTML5 中的新对象。

Datetime 对象表示 HTML <input type="datetime">元素。

注释:Internet Explorer、Firefox 或者 Chrome 不支持 <input type="datetime">元素,Safari 中部分支持。Opera 12 以及更早的版本中完全支持。

表单中新增的控件(type属性)

email: 提交表单时检测值是否是一个电子邮件格式

url: 提交表单时检测值是否是一个url格式

date: 年-月-日格式的控件

time: 时:分格式的控件

datetime: 年-月-日 时:分 格式的控件(UTC时间)

datetime-local: 年-月-日 时:分 格式的控件(本地时间)

month: 年-月格式的控件

week: 年-周数格式的控件

number: 数字输入框

<input type="number" name="" id="" value="60" max="100" min="0" />

range: 选择区域

<input type="range" name="" id="" value="60" max="100" min="0" />

tel: 电话输入框

search: 用于搜索

color: 调用系统选色器

新增控件属性:

placeholder: 占位符,输入框提示信息

<input type="text" autofocus placeholder=''/>

required: 该input为必填项

autofocus: 在页面加载时,域自动地获得焦点

autocomplete="off/on":可以记录输入信息

必须有name属性 必须提交过

off==>关闭 on==>打开

<input type="tel" name="user" id="" value="" autocomplete="on"/>

pattern: 正则验证

<input type="tel" pattern="[0-9]{7,12}"/>

min/max: input能输入的最小/最大字节的长度

step: 针对number和range类型,每次递增step的值

list: 指定一个datalist,作为下拉提示单

<input type="date">这就会自带日期控件了。。。

HTML5 拥有多个供选择日期和时间的新的输入类型:

date - 选择日、月、年

month - 选择月、年

week - 选择周、年

time - 选择时间(时、分)

datetime - 选择时间、日期、月、年(UTC 时间)

datetime-local - 选择时间、日期、月、年(本地时间)

你可以试试不同类型出来的效果,,

如果想要更好看的,那只能去搞个jquery的日期控件来用了,毕竟做得比较成熟,,

但是个人还是很喜欢html5这个新属性,,一句短短的就搞定了,,

不过有一个不好处就是,不同的浏览器渲染出来的效果有些差别。。。。