Android ios风格日期时间选择器

时间选择器

作者：易金亮

最近在做项目的时候发现很多地方都需要记录时间，但如果我们用传统的方法去输入时间的话就会很浪费时间，那么我们要如何快速的去输入时间呢？下面我就来说一种比较简单的方法，这个方法需要用到layUI组件，这里我就不再说如何引入这个组件了，我们需要把CSS和JS两个组件都引进项目中，引入组件后我们就该来实现这个效果了。首先，我们需要有一个存放时间的文本框，如下图代码所示：

如上图所示，我们给了两个span标签和一个input标签，第一个span标签我就不多说了，第二个span标签是一个向下的三角形图标，而input标签就是文本框了，我们给了它一个ID“test1”，通过以上代码我们就能得到如下图所示的一个文本框了：

如上图所示，我们得到了一个文本框，接下来就要去实现点击文本框的时候弹出一个选择时间的窗体，然后我们就可以快速的选择时间了，其实现这个效果的代码如下截图所示：

如上截图代码所示，我们先要加载一下模块，并且声明一下变量，然后通过核心方法：laydate.render(options) 来设置基础参数，先获取到文本框的ID，然后选择选择器的类型，如上图所示，我选择的是日期时间选择器，可以选择：年、月、日、时、分、秒这样具体的时间，当然，选择什么选择器要看具体的情况，通过以上代码我们就可以实现如下图所示的一个效果了：

如上图所示，当我们点击文本框时就会弹出这样一个窗体，然后我们就可以快速的选择时间了，先是选择日期，然后点击“选择时间”就可以选择时间了，当我们要记录当前时间时就可以直接点击“现在”，这样就会自动输入当前时间了，其效果如下截图所示：

这样我们就实现了一个简单的时间选择器了。