Vue.js与datetimepicker结合的实例[Solved]

Question

• 我绑定了我的datetimepicker到了input中，要实现双向绑定。

有人实现过这个功能么？ 我知道是要用自定义指令来实现，但是具体代码我还没写出来。根据Github上的一个Issue

update 09-20 23:22:00:

<div class="col-md-6" id="div-container">
    <span>{{message}}</span>
    <input id="datetime" v-tolerious:tt="message" v-model="message" class="form-control" placeholder="双向绑定">
</div>
<script>
    $(document).ready(function () {
        $("#datetime").datetimepicker({
            format: 'yyyy-mm-dd hh:ii',
            timezone: 'CST',
            autoclose: true,
            clearBtn: true,
            todayBtn: true
        });
        Vue.directive('tolerious', {
            bind: function () {
                console.log('bind');
            },
            update: function (value) {
                console.log(value);
            },
            unbind: function () {
                console.log('unbind');
            }
        });
        var vml = new Vue({
            el: '#div-container',
            data: {
                message: '2016-10-09 13:21'
            }
        });
    });
</script>

貌似这么写是可以的,不需要像Issue中这么做. vml变量中的message值会随着你选择完日期而改动,同时在update函数中value值也是选择日期值, 这里可以做一些处理,转换成时间戳.

Answer 1

$('#start-time-picker-1').datetimepicker({
                language: "zh-CN"
            }).on('changeDate', function(ev) {
                vueApp.search_start_storage_time = ev.date.format("yyyy-MM-dd hh:mm");
            });