zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    SQL随机生成6位数字
    安装时提示 INSTALL_PARSE_FAILED_MANIFEST_MALFORMED 解决办法
    Windows 7 完美安装 Visual C++ 6.0
    解决js中window.location.href不工作的问题
    DataList中动态显示DIV
    Gridview、DataList、Repeater获取行索引号
    Java多jdk安装
    【CentOS】samba服务器安装与配置
    【CentOS】IBM X3650M4 IMM远程管理【转载】
    【Java】Eclipse导出jar包与javadoc
  • 原文地址:https://www.cnblogs.com/quitpoison/p/10794377.html
Copyright © 2011-2022 走看看