基於layui的laydate，在加載后台數據時laydate.render()不起作用。

1. 以前有過一次折磨的經歷。第一時間沒記起來。先看圖

　　1.1 后台數據加載出來的效果

　　

 

 

　　1.2 點擊選擇時間后彈出日期格式不合法

　　

　　1.3 合法數據

　　

2. 代碼片段

<script type="text/javascript">
    var layData = [ 'form', 'laydate' ];
    layui.use(layData, function() {
        var laydate = layui.laydate;
        laydate.render({
            elem : '#sTime'
        });
        laydate.render({
            elem : '#eTime'
        });
    });
</script>

　　上述代碼也只是在點擊選擇日期后才會產生作用。

<div
    class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
    <div class="layui-form-item">
        <label class="layui-form-label">開始時間：</label>
        <div class="layui-input-block">
            <input type="text" id="sTime" name="sTime" model="datetime" format="yyyy-MM-dd" placeholder="yyyy-MM-dd" autocomplete="off"
                class="layui-input test-item" />
        </div>
    </div>
</div>
<div
    class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
    <div class="layui-form-item">
        <label class="layui-form-label">結束時間：</label>
        <div class="layui-input-block">
            <input type="text" id="eTime" name="eTime" model="datetime" format="yyyy-MM-dd" placeholder="yyyy-MM-dd" autocomplete="off"
                class="layui-input test-item" />
        </div>
    </div>
</div>

　　在上面黑體標記部分才是產生錯誤的關鍵。將format改為dateFormat之后就好了

<div
    class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
    <div class="layui-form-item">
        <label class="layui-form-label">開始時間：</label>
        <div class="layui-input-block">
            <input type="text" id="sTime" name="sTime" model="datetime" timeFormat="yyyy-MM-dd" placeholder="yyyy-MM-dd" autocomplete="off"
                class="layui-input" />
        </div>
    </div>
</div>
<div
    class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
    <div class="layui-form-item">
        <label class="layui-form-label">結束時間：</label>
        <div class="layui-input-block">
            <input type="text" id="eTime" name="eTime" model="datetime" timeFormat="yyyy-MM-dd" placeholder="yyyy-MM-dd" autocomplete="off"
                class="layui-input" />
        </div>
    </div>
</div>

3. 最終效果如標題1中的1.3圖所示

4. 補充

　　在其他博客中看到另一種格式化日期的方法。可以試一下。由於我使用的是layui，所以最好還是用兼容的timeFormat

<input type="datetime" class="form-control" id="datetimepicker" name="startTime" value="<fmt:formatDate value='${course.startTime}' type='date' pattern='yyyy-MM-dd HH:mm'/>">