layDate 日期与时间组件

最新推荐文章于 2022-08-03 15:24:57 发布

平凡的梦

最新推荐文章于 2022-08-03 15:24:57 发布

阅读量2.3k

点赞数

文章标签： layDate

本文链接：https://blog.csdn.net/weixin_41299877/article/details/81974441

版权

在日常的网页开发过程中，日期组件已经成为不可或缺的组件之一。同时，随着广大杰出攻城狮的不懈努力，也出现了很多优秀的日期组件，其中我个人觉得 layDate 日期组件是一个非常不错的组件，简洁易用，样式清爽。

此文主要以 layDate 组件进行日期选择的演示，敬请各位小主们参阅，若有不足之处，敬请大神指正，不胜感激！

闲不多言，直接上码。

首先,导入必须的js文件,本文引用的是老版本的laydate.js文件,与新版本略有不同.大家有需要可以文章底部留言获取.

    <script src="../js/jquery.min.js?v=1.11.2"></script>
    <script src="../js/laydate/laydate.js"></script>

本地js目录:

body:

  <body>
    <div>
        <h3>开始和结束的相互关联</h3> 
        开始日期：
        <input class="laydate-icon" id="start" style="width:200px; margin-right:10px"></input>
        结束日期：
        <input class="laydate-icon" id="end" style="width:200px"></input>
    </div>
    <hr/>
    <div>
        <h3>日历结构</h3> 
        日历插件：
        <input class="laydate-icon" id="time" />
    </div>
</body>

script部分:

<script>
  $(document).ready(function() {
    laydate.skin("molv"); //设置皮肤
    var start = {
     elem: '#start',
     format: 'YYYY/MM/DD hh:mm:ss',
     min: laydate.now(), //设定最小日期为当前日期
     max: '2099-12-31 23:59:59', //最大日期
     istime: true,
     istoday: false,
     choose: function(datas) {
       end.min = datas; //开始日选好后，重置结束日的最小日期
        }
    };
     var end = {
      elem: '#end',
     format: 'YYYY/MM/DD hh:mm:ss',
     min: laydate.now(),
     max: '2099-12-31 23:59:59',
     istime: true,
     istoday: false,
     choose: function(datas) {
        start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
    laydate(start);
    laydate(end);
    var time = {
     elem: '#time',
     format: 'YYYY-MM-DD hh:mm:ss',
     min: laydate.now(),
     max: '2999-12-31 23:59:59',
     istime: true, //是否显示时分秒
     istoday: true, //是否显示【今天】的按钮
     isclear: true, //是否显示【清空】的按钮
     festival: true, //是否显示节日
     start: laydate.now(0, "YYYY-MM-DD hh:mm:ss"), // 开始日期
     fixed: false, // 是否固定在可视区域
     zIndex: 10000, // css控制图层的遮罩效果（效果不明显）
     choose: function(dates) { // 选择好日期的回调
            }
        }
    laydate(time);
    });
 </script>

前端显示效果:

平凡的梦

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
layDate 日期与时间组件

在日常的网页开发过程中，日期组件已经成为不可或缺的组件之一。同时，随着广大杰出攻城狮的不懈努力，也出现了很多优秀的日期组件，其中我个人觉得 layDate 日期组件是一个非常不错的组件，简洁易用，样式清爽。此文主要以 layDate 组件进行日期选择的演示，敬请各位小主们参阅，若有不足之处，敬请大神指正，不胜感激！闲不多言，直接上码。首先,导入必须的js文件,本文引用的是老版本的l...
复制链接

扫一扫