laydate 时间选择器组建(二)

效果图展示

图一.png 图二.png

相关网站
http://www.layui.com/laydate/

需要引入的js文件

 <script src="${ctx!}/assets/js/layDate-v5.0.7/laydate/laydate.js"></script>

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

文件下载

/百度云/简书/layDate-v5.0.7 2

注：使用时可复制整个文件夹

html代码

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

js代码

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

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

           // 修改主题(颜色，样式)
           theme: '#393D49',

           // 英文版
           lang: 'en',

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

        laydate.render({
           elem: '#endDate',

           // 格子主题
           theme: 'grid',

           // 选择月份
           type: 'month',

           event: 'focus'
        });
    });
</script>