欢迎光临
我们一直在努力

vue.js中结合laydate使用,日历不显示问题

刚刚学习vue.js发现laydate的日历框不显示了。查了各种资料所有都有一些路径, 我自己整理一下。终于解决了日历显示问题,也解决了model绑定问题

先看效果

 

直接上代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="js/laydate/laydate.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id='app'>
        开始时间:<input type='text' id='start' v-on:focus='getDate' v-model="startTime">{{startTime}}
        <div style="margin-top:20px;">
            <button v-on:click="editDate">模拟ajax读取数据修改时间</button>
        </div>
    </div>
</body>
</html>
<script>
    $(function () {
        var vue = new Vue({
            el: '#app',
            data: { startTime: '' },
            methods: {
                getDate: function () {
                    var that = this;
                    laydate.render({
                        elem: '#start',
                        show: true,
                        done: function (value, date, endDate) {
                            that.startTime = value;
                        }
                    });
                },
                editDate: function () {
                    this.startTime = "1900-06-05";
                }
            }
            

        });
    })

</script>

 

 

demo 下载地址

链接: https://pan.baidu.com/s/1GQOB9y4U3yho0_9hU4iTrw 提取码: 5wc5

 

赞(0)
未经允许不得转载:自游互动 » vue.js中结合laydate使用,日历不显示问题
分享到: 更多 (0)

自由技术,自由自在

项目合作联系我们