• laydata 点击日期闪现


    因项目需求需要多个日期,然后点击日期就会出现闪现的情况,导致选择不了日期

    html代码

     <table class="form">             
                    <tr>
                        <th class="formTitle">开始日期:</th>
                        <td class="formValue" colspan="2">
                            <input id="StartDate" name="StartDate"  type="text" class="form-control layui-input test-item" placeholder="开始日期" />
    
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle">计划完成日期:</th>
                        <td class="formValue" colspan="2">
                            <input id="EndDate" name="EndDate" type="text" class="form-control layui-input test-item" placeholder="计划完成日期"/>
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle">实际完成日期:</th>
                        <td class="formValue" colspan="2">
                            <input id="ActualDate" name="ActualDate" type="text" class="form-control layui-input test-item" placeholder="实际完成日期"/>
                        </td>
                    </tr>                
    </table>

    js

    前提需要引入laydata.js

    最重要的js 

    //同时绑定多个日期
        lay('.test-item').each(function () {  //test-item是引入日期所需要加入的类名
        laydate.render({ 
    elem:
    this ,
    trigger:
    'click'
    });
    });
    <script>   
        
        laydate.render({
            elem: '#StartDate', //指定元素
            format: 'yyyy-MM-dd',
            istime: false, //是否显示分钟
            istoday: true, //是否显示今天
            theme: '#1ABC9C',
            choose: function (datas) {
                var now = new Date(laydate.now().replace("-", "/"));
                var add = new Date(datas.replace("-", "/"));
                add = new Date(add.getTime() + 30 * 24 * 60 * 60 * 1000);
                if ((now.getMonth() + 1) < (add.getMonth() + 1)) {
                    end.min = laydate.now();
                } else if ((now.getMonth() + 1) == (add.getMonth() + 1) && now.getDate() < add.getDate()) {
                    end.min = laydate.now();
                }
                else {
                    add = add.getFullYear() + "/" + (add.getMonth() + 1) + "/" + add.getDate();
                    end.min = add;
                }
                end.min = datas;
            },
    
        });
        laydate.render({
            elem: '#EndDate', //指定元素
            format: 'yyyy-MM-dd',
            istime: false, //是否显示分钟
            istoday: true, //是否显示今天
            theme: '#1ABC9C',
            choose: function (datas) {
                var max = new Date(datas.replace("-", "/"));
                max = new Date(max.getTime() - 30 * 24 * 60 * 60 * 1000);
                max = max.getFullYear() + "/" + (max.getMonth() + 1) + "/" + max.getDate();
                start.max = datas;
                start.min = laydate.now();
            },
    
        });
    
        laydate.render({
            elem: '#ActualDate', //指定元素
            format: 'yyyy-MM-dd',
            istime: false, //是否显示分钟
            istoday: true, //是否显示今天
            theme: '#1ABC9C',
            choose: function (datas) {
                var now = new Date(laydate.now().replace("-", "/"));
                var add = new Date(datas.replace("-", "/"));
                add = new Date(add.getTime() + 30 * 24 * 60 * 60 * 1000);
                if ((now.getMonth() + 1) < (add.getMonth() + 1)) {
                    end.min = laydate.now();
                } else if ((now.getMonth() + 1) == (add.getMonth() + 1) && now.getDate() < add.getDate()) {
                    end.min = laydate.now();
                }
                else {
                    add = add.getFullYear() + "/" + (add.getMonth() + 1) + "/" + add.getDate();
                    end.min = add;
                }
                end.min = datas;
            },
    
        });
    
    </script>
  • 相关阅读:
    移动端前端布局的必看前提
    单词统计
    用户场景分析
    学习进度(九)
    团队项目
    学习进度(二)
    数据可视化
    大二下,学习进度(一)
    求最大子数组的和
    构建之法3
  • 原文地址:https://www.cnblogs.com/quitpoison/p/10794377.html
Copyright © 2020-2023  润新知