layDate js日期时间控件

layDate是基于原生JavaScript开发的一款日期时间控件,支持换肤。它诞生于2014年,虽然使用上不是特别傻瓜化,但满足日常需求完全没有问题。作者 @贤心 表示将对其进行一次大重写,在这之前我们还是可以使用现有layDate满足日常需求。

layDate演示效果

宇润用了layDate有2年了吧,还是非常好用的,几乎着手的每个项目用到日期时间控件的都会用layDate,所以在自己博客里推荐一下。

顺带说一句,我们这个YurunBlog系统后台也有用到layDate哦!

layDate使用说明

  1. 首先你需要引入laydate.js这个文件

  2. 控件调用方法

    方法一:

    <input class="laydate-icon" onclick="laydate()"/>
    <input class="laydate-icon" onfocus="laydate()"/>

    两面两种代码都是可以的,只是触发弹出日期选择框的时机不一样,我个人推荐focus事件。

    方法二:

    html代码

    <input id="datebox1" class="laydate-icon"/>

    js代码

    laydate({
       elem: '#datebox1'
    })

    相信,看到这你已经明白了,无论如何都得要手动调用一下laydate这个js方法,才可以弹出日期选择的框。

    这也就是这个控件的唯一缺点所在。为什么呢?

    其实调用laydate的时候可以传更多的参数,来实现个性化需求。

    比如支持时间选择和不支持时间选择等等。

    当然我们也可以自己编写代码,来让laydate变得更加好用。比如我们在input的属性加上类似data-istime的属性,通过jQuery监听input的click或focus事件,在事件中获取到属性的值,再传进laydate方法中。

    不过既然作者决定要对其进行大重写,那我也不费这个力气啦!

    laydate显示时间选择的方法:

    laydate({
        format: 'YYYY-MM-DD hh:mm:ss', //日期格式
        istime: true, //是否开启时间选择
    })

更多使用方法和手册请到laydate官方网站查询。

layDate官方网站

http://laydate.layui.com/

layDate的Github仓库

https://github.com/sentsin/laydate

  • 发表评论
当前用户:
  • 评论列表
  • pojin 2017-03-28 09:06:22

    赞一个!