laydate 时间选择器组建(一)

效果图展示

效果图.png

需要引入的js文件

<script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>
<script src="${ctx!}/assets/js/plugins/layer/laydate/laydate.js"></script>

注：注意引用路径要修改成自己文件夹的

文件下载

/百度云/简书/layer date js

注：使用时可复制整个文件夹，因为其中还包含了css的文件

html代码

 <input  id="startDate" name="startDate" class="laydate-icon" readonly="readonly" placeholder="请输入开始日期">&nbsp;&nbsp;
 <input  id="endDate"  name="endDate" class="laydate-icon" readonly="readonly" placeholder="请输入结束日期">&nbsp;&nbsp;

js代码

<script>
    $(document).ready(function () {

        //js调用
        laydate({
            //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，
            //因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            elem: '#startDate', 

            //响应事件。如果没有传入event，则按照默认的click
            event: 'focus' 
        });

        laydate({
            elem: '#endDate',
            event: 'focus' 
        });

    });
</script>