layui动态绑定日期时间控件

layui动态时间控件,刚开始想的是动态生成id,然后动态去指定,但是那样太麻烦,就用更加简洁的方式进行实现。

layui.use(['form', 'layer', 'jquery', 'laydate'], function () {
     var form = layui.form
         , $ = layui.jquery
         , layer = layui.layer
         , laydate = layui.laydate;

     //渲染时间控件
     function timeRender(){
         lay('.timeCount .withdrawTime').each(function() {
             laydate.render({
                 elem : this
                 , type : 'time'
                 , trigger : 'click'
             });
         });
         //在每次动态生成laydate组件时, laydate框架会给input输入框增加一个lay-key="1",
         //这样就导致了多个laydate 的inpute框都有lay-key="1"这个属性。导致时间控件不起作用,
         //需要把动态生成的lay-key属性删除
         $(".withdrawTime").removeAttr("lay-key");
     }
	 //页面加载的时候对已经有的控件进行初始化
     timeRender();
});

如下是我的页面实现:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的 layui 动态绑定下拉的例子: HTML 代码: ```html <div class="layui-form-item"> <label class="layui-form-label">城市</label> <div class="layui-input-block"> <select name="city" lay-filter="city"> <option value="">请选择城市</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">区域</label> <div class="layui-input-block"> <select name="area" lay-filter="area"> <option value="">请选择区域</option> </select> </div> </div> ``` JavaScript 代码: ```javascript // 城市数据 var cityData = [ { "id": 1, "name": "北京市", "areas": [ { "id": 101, "name": "东城区" }, { "id": 102, "name": "西城区" }, { "id": 103, "name": "朝阳区" } ] }, { "id": 2, "name": "上海市", "areas": [ { "id": 201, "name": "黄浦区" }, { "id": 202, "name": "徐汇区" }, { "id": 203, "name": "长宁区" } ] } ]; // 动态绑定城市下拉 var citySelect = $('select[name="city"]'); var areaSelect = $('select[name="area"]'); $.each(cityData, function(index, city) { citySelect.append('<option value="' + city.id + '">' + city.name + '</option>'); }); // 动态绑定区域下拉 form.on('select(city)', function(data) { var cityId = data.value; var city = $.grep(cityData, function(city) { return city.id == cityId; })[0]; areaSelect.empty().append('<option value="">请选择区域</option>'); $.each(city.areas, function(index, area) { areaSelect.append('<option value="' + area.id + '">' + area.name + '</option>'); }); form.render('select'); }); ``` 这个例子中,我们首先定义了一个城市数据,包含城市名称和区域信息。然后,我们在 HTML 中定义了两个下拉,一个是城市下拉,一个是区域下拉。在 JavaScript 中,我们使用 jQuery 动态绑定了城市下拉,并使用 layui 的 form 模块监听了城市下拉的变化事件。当城市下拉的值发生变化时,我们根据选择的城市动态绑定了区域下拉的数据。最后,我们调用了 form.render('select') 方法,使下拉的渲染生效。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值