Layui Laydate component rerendering problem

When Layui is used as the front-end development framework, it is necessary to use the time component LayDate to input some forms of time content, such as:

laydate.render({
    elem: "#establish".type: "date".trigger: 'click'.showBottom: false.done: function (value) {
        laydate.render({
            elem: "#accomplish".type: "date".trigger: 'click'.showBottom: false.min: value,
        });
        form.render('select'); }});Copy the code

This component is configured with a minimum value of min: value, which is the done callback after the #establish start time is selected: Function (){} returns the string value passed, but in practice this code does not work as expected.

Time modules cannot be aligned for modified rendering after their first rendering.

So if you want to achieve the desired effect, you need to:

laydate.render({
    elem: "#establish".type: "date".trigger: 'click'.showBottom: false.done: function (value) {
        document.getElementById('accomplish-box').innerHTML = '< INPUT class="layui-input" placeholder=" time "autocomplete="off" ID ="accomplish" name="accomplish" required lay-verify="required">';
        laydate.render({
            elem: "#accomplish".type: "date".trigger: 'click'.showBottom: false.min: value,
        });
        form.render('select'); }});Copy the code

The only difference is that in the callback function, first perform the HTML re-render, erase the old time component, then render it, you can achieve your requirements.

The complete code can be found in add-sujject. HTML of menu/ Report section of M&OAS-Front project. If you do not see this file, the author may not have synchronized the code to Github.