首先呢,贴上比较官方的一个文档https://github.com/Envek/jquery-datetimepicker-rails,下面呢也贴上个这个插件的使用效果图
对于这个插件呢,暂且认为它是个插件吧。对于它的使用呢,可能有些地方是需要稍微注意点的,后面举例说明,咱先说说它的基本使用吧。
当然了,在rails项目中,你要想使用它,首先得安装相应的gem,这里就不在赘述它的gem安装了,githu上是有的。
在安装完之后呢,你在代码中使用它的时候如下:
<input id='datetimepicker' value class='datetimepicker'/>
<script>
$("#datetimepicker").datetimepicker();
</script>
只需要这样就可以使用它了,不过这个时候它的样式,以及时间的格式化,语言等等,都可能不是我们所要的,那么我们就需要给它加点参数来调整下。
首先 ,语言--- lang 参数,默认应该是英文状态的了,只要你设置为 "zh“,就会顺利的换成中文了,这样的话,脚本代码就变成:
$("#datetimepicker").datetimepicker({lang: "zh"});
换成中文的还是不满意,还想把它的日期格式调整下的话就还得加上一个参数 format,把它设置成'Y-m-d H:i'好了,这个格式化比较符合我们国人的阅读习惯的。
在设置了上述的提交之后呢,你也许会发现,右侧是时间为什么只有整点呢?怎么不能设置分钟的吗?配上一副截图看下
这个时候如果想要更改分钟设置的话,就要用到step这个参数了,step,是用来控制这个现实分钟的步长的,默认的情况下是60分钟,注意:是以分钟为单位的哟
比如我们把步长设置为10分钟,则效果如下
这下,我们对步长的概念应该有些理解了吧。
当然了,有时候我们也并不需要这么多时间,我们可能只想要时间中的某一段,或者我们自己指定的时间值,那么我们可以通过allowTimes这个参数来设置
代码如下
下面贴上效果图
看了上面这些,我想大家对这个插件应该有了一点了解了,下面说一点这个插件的小问题,或者需要注意下的地方,那就是defaultTime的设置问题。就像上面截图中写的那样,defaultTime这个东西呢,它是可以设置的,但是,如果你一个页面中存在多个地方引用这个控件,并且你并非是通过元素ID来绑定它的话,就有可能有些样式上的显示问题的。
例如代码写成这样:$('.datetimepicker').datetimepicker({datefualtTime:'16:00'}); 这个呢是通过类来做多个绑定使用的,这个时候defaultTime出现的问题是什么呢?
在一个页面中存在多个引用这个控件时,只有最后一个控件的时间部分才能显示在defaultTime设置的时间点上(例如16:00),而其它的几个呢,虽然时间是设置在16:00,但是它显示出来的效果,就是时间区的滚动轴却还是在顶部,看上去像是没有设置一样,这个是需要注意的地方,下面附上截图效果,以供各位参考。
首先是页面中的前一个控件显示截图
,把滚动轴向下滑动到下面看看是否设置了时间
而在同一个页面中的最后一个控件上点击时,它显示的样式就如下,它将会直接定位默认时间的位置的
对于以上这个小问题呢(也许不算个问题),这种情况只存在于你对一群控件使用类别绑定的时候才会遇到的,如果你是通过元素ID来制定进行绑定的话就不会遇到上面的问题了。
这个控件在使用过程中呢,可能会还有其它的一些不方便的地方,例如maxTime与minTime这两个属性,他们虽然设置了时间区的最大最小范围,可是它并不会把范围外的选项给隐藏掉的,只会以灰色状态来显示,这点可以请各位看官们自己动手试试的。