最近專案使用了laydate.js這個時間外掛。自從這個外掛升級後確實還挺好用的，在選擇時間上操作非常簡單：

laydate.render({
elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
});

通過elem繫結元素後，就可以使用了。（記得elem:'#text'中的這個#不要落下）

但是當我做一個時間範圍選擇時，問題來了：結束時間不能早於開始時間，即選擇完開始時間，結束時間應限制開始時間之後。

起初我簡單的以為laydate這個外掛和vue.js的動態繫結是相同的，所以在done回撥函式改laydate的max和min這兩個引數，然後想通過呼叫laydate.render(startTime)重新進行渲染，並不生效。

錯誤程式碼如下：

<script>
    var startDate = {
        elem:'#startTime',
        format:'yyyy/MM/dd',
        min:'1999-1-1',
        max:'2111-1-1',
        done: function (value, date) {
            endDate.min = value
            laydate.render(endDate)
        }
    }
    var endDate = {
        elem:'#endTime',
        format:'yyyy/MM/dd',
        min:'1999-1-1',
        max:'2111-1-1',
        done: function (value, date) {
            startDate.max = value
            laydate.render(startDate);
        }
    }
    $(function () {
        laydate.render(endDate)
        laydate.render(startDate);
    })
</script>
 

發現在選擇時間後兩個控制元件並不會重新渲染，在這上面遇到了很大的坑。

網上查資料發現：   laydate.render()只是在第一次渲染起作用，不能重新渲染。

看到其他blog發現原來改配置引數之間通過startDate.config.[param]進行對外掛配置引數的修改，修改程式碼如下：

<script>
    var startDate = laydate.render({
        elem:'#startTime',
        format:'yyyy/MM/dd',
        min:'1999-1-1',
        max:'2111-1-1',
        done: function (value, date) {
            endDate.config.min ={
                year:date.year,
                month:date.month-1, 
                date: date.date,
            };
        }
    })
    var endDate = laydate.render({
        elem:'#endTime',
        format:'yyyy/MM/dd',
        min:'1999-1-1',
        max:'2111-1-1',
        done: function (value, date) {
            startDate.config.max = {
                year: date.year,
                month: date.month - 1,
                date: date.date,
            }
        }
    })
</script>
 

這裡的month要記得減一。因為回撥函式的date.month和config.max.month是不一樣的。

後來查資料發現，可以先刪除這個laydate例項，再重新建立來達到渲染效果。

laydate 文件：http://www.layui.com/doc/modules/laydate.html

轉載：https://blog.csdn.net/wmq1314lql/article/details/81750092