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>
  • 相关阅读:
    2020年全国安全生产月活动主题、挂图、招贴、标语、宣教用书等系列产品
    2020年安全生产月主题挂图指定宣教用品目录
    LNMP分离式部署步骤详解
    FTP文件传输服务
    DNS域名解析服务配置与测试
    DHCP服务搭建测试流程
    mysql数据库的操作
    mysql源码编译安装及其配置
    生产环境中ansible的安全处理
    http网页返回码详解
  • 原文地址:https://www.cnblogs.com/quitpoison/p/10794377.html
Copyright © 2011-2022 走看看