layui日期控件重复渲染

最新推荐文章于 2024-03-13 10:12:17 发布

原创最新推荐文章于 2024-03-13 10:12:17 发布 · 964 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

layui 专栏收录该内容

1 篇文章

订阅专栏

博客围绕HTML展开，介绍在事件触发后，会依据不同情况调用不同的渲染方式，还提及了事件触发以及两种渲染方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Html：

<div class="layui-col-md4">
   <label class="layui-form-label" translate="operation_time"></label>
   <div class="layui-input-block" id="monthDate">
      <input type="text" class="layui-input" id="operationTime" name="operationTime" ng-model="data_model.operationTime" autocomplete="off" placeholder="yyyy-MM-dd" readonly="readonly">
   </div>
</div>

在事件触发后根据不同的情况渲染调用不同的渲染方式

事件触发：

// 删除重建input元素，因为laydate.render只能渲染一次

var cloneTime = $("#operationTime").clone();  //由于id的唯一性，最好克隆class名称

cloneTime.removeAttr("lay-key"); //注意这里要给克隆的元素添加

$("#operationTime").remove(); //删除原本的input元素

$("#monthDate").append(cloneTime);

$scope.setDateTime();

两种渲染方式：

$scope.setDateTime = function () {

    if($scope.data_model.statisticalId == "month"){

        initDateTime();

        var data = $scope.data_model.operationTime;

        $scope.data_model.operationTime = data.substr(0,7);

        layui.use('form', function () {

            var form = layui.form;

            var laydate = layui.laydate;

            form.render();



            //常规用法

            laydate.render({

                elem: '#operationTime',

                value: $scope.data_model.operationTime,

                format: 'yyyy-MM',

                type: 'month',

                max: -1,

                btns: ['confirm'], 

                // 点击年不关闭，点击月份，控件关闭，无需点击确认

                change: function (value, date, endDate) { //监听日期被切换

                    lay('#operationTime').val(value);
                  $scope.data_model.operationTime = value;

                    $('.laydate-month-list').on('click','li',function () {//利用的事件委托

                        $('.layui-laydate').remove()

                    })

                }

            });

        });

    };

    if($scope.data_model.statisticalId == "day" || $scope.data_model.statisticalId == ""){

        initDateTime();

        layui.use('form', function () {

            var form = layui.form;

            var laydate = layui.laydate;

            form.render();



            //常规用法

            laydate.render({

                elem: '#operationTime',

                value: $scope.data_model.operationTime,

                format: 'yyyy-MM-dd',

                max: -1,

                btns: ['confirm'],

                done: function (value) {

                    console.log("hello: "+ value);

                    $scope.data_model.operationTime = value;

                }
            });

        });

    };