DataTime组件

Posted 放任自己

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DataTime组件相关的知识,希望对你有一定的参考价值。

如果你当前使用的浏览器还没有实现日历组件,下面的图片你可以先睹为快。

技术分享

无需任何的javascript,它变成了一个最基本的input类型 <input type=”date”/>

<label for="meeting">约会日期:</label><input id="meeting" type="date" value="2014-01-13"/>

html5让Web程序员的工作变得异常简单,不是吗?不仅如此,我们得到的不仅仅只有一个“日期”类型的input,还有一系列相关的日期、时间参数让我们自定义。我们虽然称之为“日期”类型,但这里的type实际上是可以为“date”、“week”、“month”、“time”、“datetime”和“datetime-local”。下面我将用实例加图文的方式向大家演示各种type的外观表现。

需要提醒的是,下面的截图都是在谷歌浏览器中效果,其它浏览器中显示的样子会稍有不同,但功能会是一样的。

1. 日期(<input type=”date”/>)

这是最基本的日期选择器,你只能从日历中选择某个日期。

请选择日期: 

截图:
技术分享

2. 周(<input type=”week”/>)

这时,你选择的就不是一个日期了,而是周。请注意周数显示的方式。

请选择周: 

截图:
技术分享

3. 月份(<input type=”month”/>)

这时你选择的是月份,跟“date”类型比起来少了后面的日子数。

请选择月: 

截图:
技术分享

4. 时间(<input type=”time”/>)

这是最简单的一种显示,没有日历,只能选择时间。

请选择时间: 

截图:
技术分享

5. 日期+时间(<input type=”datetime”/>)

既显示日期组件,又显示时间组件,其实就是“date”类型和“time”类型的组合。

请选择日期和时间: 

截图:
技术分享

6. 本地日期时间(<input type=”datetime-local”/>)

顾名思义,就是用本地时间显示。

请选择日期和时间: 

截图:
技术分享

除了上面这些类型为,日期输入类型还有一些其它属性需要注意。

属性描述
这是HTML里input元素的通用属性。就是输入框里的数据。
min 日期或时间的最小值
max 日期或时间的最大值
step 步长。不同的类型有不同的缺省步长。

 

  • Date – 缺省是1天
  • Week – 缺省是1周
  • Month – 缺省是1月
  • Time – 缺省是1分钟
  • DateTime – 缺省是1分钟
  • Local DateTime – 缺省是1分钟

以上是关于DataTime组件的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序代码片段

sql中datatime使用,vs中datatimepicker使用问题,语言类型C#

pyhton学习笔记5:常用模块:datatime,random,json,re

如何阻止片段一直弹出到根片段? [导航组件]

Reactreact概述组件事件

微信小程序代码片段分享