layui 日期插件layDate 绑定动态添加增加多个行内调用 js代码调用

最新推荐文章于 2025-09-24 12:27:33 发布

原创

最新推荐文章于 2025-09-24 12:27:33 发布 · 1.6w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#laydate

本文介绍了在一家互联金融公司项目中，如何使用layui的日期插件layDate来实现动态添加并绑定日期输入，解决因id重复导致的调用失败问题。文中详细讲解了保守的行内调用方法和更现代的写法，并提到了layDate版本与样式的差异，强调正确引入laydate.js和官方文档的重要性。

这里写图片描述

起因

* 本人是在一家互联金融公司，因项目需求要实现如上图的效果从网上查阅了很多资料，无果而终，最终想到了动态更改id 避免id重复调用失败*

保守派 — 行内调用

<!-- 动态增加 时间插件 -->

    <div class="layui-form-item">
        <label class="layui-form-label"><span>付息日期 :</span></label>
        <div class="layui-input-inline">
            <ul id="fuxiTime_containt">
                <li class="clearfix lay-data-list" >
                    <span class="caozuo_btn caozuo_add">增加</span>
                    <label class="layui-form-label"><span>第1次付息日期 :</span></label>
                    <div class="layui-input-inline layer-icon-data">
                        <input type="text" name="interest_payment_time" class="layui-input" id="fuxiTime_1" class="fuxiTime" onfocus="laydate({elem:'#fuxiTime_1',format:'YYYY-MM-DD',theme: '#fdd5004'})" >
                    </div>