取消laydate的绑定渲染

作者: 十柒年 | 来源:发表于2018-08-04 14:37 被阅读838次

取消laydate的绑定渲染
7、VUE动态绑定class和style
layui的laydate.render()多次渲染的问题
vue初
laydate 时间范围的限制
jquery事件
react 页面的数据绑定和渲染
6-2 事件-代码演示
Android Service启动与同步，监控机制
echarts 属性记录

1.如题，取消laydate的渲染

今天遇到一个问题，页面上有一个select选择框，后面是一个input，select有三个选项，标签，姓名和时间，当select选择了时间时，input变身时间选择器，当选择了其他的标签是，input变成正常的文本输入框。刚开始搜了好多资料，没找到取消laydate取消绑定的方法。自己写了一个，算是走了个捷径吧，实现了上述的效果。请看代码。

<html>
    <head>
        <ttile>
        
    </ttile>
    <link rel="stylesheet" href="layui/css/layui.css" />
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript" src="layui/layui.all.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#Select").change(function(){
                var st = $("#Select").val();
                if(st=="time"){
                    layui.use("laydate",function(){
                        var laydate = layui.laydate;
                        laydate.render({
                          elem: '#key'
                        });
                    })
                }
                else{
                    $("#maindiv").empty();
                    $("#maindiv").append('<input type="text" id="key"/>');
                }
            })
        })
        
    </script>
    </head>
    <body>
        <div style="width: 240px;">
            <select name="" id="Select">
            <option value="flag">标签</option>
            <option value="name">姓名</option>
            <option value="time">时间</option>
        </select>
        <div id="maindiv" style="float:right">
                <input type="text" id="key"/>
        </div>
        </div>
    </body>
</html>

其实，思路挺简单的，当选择时间的时候，把laydate绑定到ID为key的input框上，当选择其他标签的时候，把input所在div里面的input元素清空，然后重新在加一个input，这样laydate渲染的效果就没了，相当于一个新的input，然后写到判断里面，就可以实现，选择时间有日期选择框，选择其他两个选项就没有日期选择框了。
Study hard and make progress every day.