时间选择器在一定程度上简化了日期的输入，而layui作为一款备受欢迎的前端框架，时间选择器主要以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心，并且均支持范围选择（即双控件），主题简约却又不失灵活多样。接下来就介绍一下日期和时间组件的简单用法。
使用前需要引用layui插件的css样式和js部分的代码，然后再加载时间的模块进行使用。这个时间的组件可以单独使用，但需要下载单独使用时的js组件包，使用时直接调用js的方法即可。这里用的是在 layui 模块中使用方法，先加载laydate模块。 
这是最原始的样式写法，只能够选择年月日，样式也是默认的。elem需要填写的是需要添加日期选择器的容器的id值。
一开始就说过，layui的时间组件由年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型为核心组成的。默认值就是日期选择器。可以通过type属性进行修改，例如，type:’datatime’，这个类型是日期时间选择器 ，除了年月日外还可以选择时分秒，为最精确的一个选择器。
各种类型的选择器的值和用途如以下所示：
不仅可以选择单个时间，layui还提供了时间的范围性选择，使用range开启这个属性，如果需要默认样式的画可直接再range的属性值填写true，不仅如此，还可以自定义分割的字符
还可以通过format属性，用不同的格式符组合成一段日期时间字符串，可任意排版。写法如下：
各种组合的例子写法和示例如下：
还可以为日期设置初始值，设定有限范围内的日期或时间值等等
这一些就是时间选择器的基本数据和用法了，有了这些知识一般都可以应对的了时间选择的大致功能了，后面还有以下更加复杂的内容比较少使用到就不说了。