bootstrap-datetimepicker与vue.js不能正常工作

我想用Vue.js引导日期选择器试图创建一个简单的日期选择器组件。问题是，当我写入输入时，组件的数据被更新。但是当我使用datepicker gui时，它不起作用。数据未更新。为什么？什么是完全缺失？bootstrap-datetimepicker与vue.js不能正常工作

这里是我的代码：

Vue.component('picker', { 
 
    'props': { 
 
    'date': { 
 
     'twoWay': true 
 
    } 
 
    }, 
 
    'template': '\ 
 
     <div class="form-group">\ 
 
      <div class="input-group date datepicker">\ 
 
       <input type="text" class="form-control" v-bind:value="this.date">\ 
 
       <span class="input-group-addon">\ 
 
        <span class="glyphicon glyphicon-calendar"></span>\ 
 
       </span>\ 
 
      </div>\ 
 
     </div>', 
 
    'watch': { 
 
    'date': function(value) { 
 
     console.log('Updated!'); 
 
    } 
 
    }, 
 
    'mounted': function() { 
 
    $(this.$el.firstChild).datetimepicker(); 
 
    } 
 
}); 
 

 
app = new Vue({ 
 
    'el': '#app', 
 
    'data': {} 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
    <!-- JQuery --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <!-- Transition ve Collapse --> 
 
    <script src="collapse.js"></script> 
 
    <script src="transition.js"></script> 
 

 
    <!-- Moment JS --> 
 
    <script src="moment-with-locales.min.js"></script> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
    <!-- Optional theme --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
    <!-- Datetime picker --> 
 
    <script src="https://raw.githubusercontent.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css"> 
 
    <script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div id="app" class="row"> 
 
     <div class='col-sm-6'> 
 
     <picker></picker> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <script type="text/javascript"> 
 
    </script> 
 
</body> 
 
<script src="app.js"></script> 
 

 
</html>

来源

2017-01-23 nejdetckenobi

当我看到选取器组件接受道具'date'，但不能看到它定义''模板 –

成分我没有看到你在任何地方的数据定义的日期。 – Saurabh

@BelminBedak我没有给出HTML部分中'date' prop的初始值。 @沙拉布这是一个道具。所以我不需要在Vue实例中定义它。是对的吗？更新的代码。 – nejdetckenobi

我找不到比失去焦点（模糊）更好的方式。

这里是我的代码：

Vue.component('picker', { 
    'props': ['date'], 
    'template': '\ 
     <div class="form-group">\ 
      <div class="input-group date datepicker">\ 
       <input type="text" class="form-control" :value="this.date" v-on:focus="datepick_dialog_open" v-on:blur="select_by_lose_focus">\ 
       <span class="input-group-addon">\ 
        <span class="glyphicon glyphicon-calendar"></span>\ 
       </span>\ 
      </div>\ 
     </div>', 
    'mounted': function() { 
     $(this.$el.firstChild).datetimepicker(); 
    }, 
    'methods': { 
     'datepick_dialog_open': function() { 
      this.$el.firstChild.children[1].click(); 
     }, 
     'select_by_lose_focus': function() { 
      console.log('AHOY!'); 
      this.date = this.$el.firstChild.firstChild.value; 
     } 
    } 
}); 

app = new Vue({ 
    'el': '#app', 
    'data': {} 
});

的一点是，你真的不能使用它，如果你的元素没有失去焦点。它在输入失去焦点时更新数据。 IDK有更好的办法。

v-on:focus是无关紧要的。它只是在输入收益集中时才打开日期时间选择器UI。

主要工作是由select_by_lose_focus完成。

来源

2017-01-23 14:45:58 nejdetckenobi

-1

使用'而不是'作为模板，因为它包含多行。

这将解决你的问题:)

来源

2017-03-10 16:45:39 Rashid

感谢您的回答@nejdetckenobi，如果只采摘日期，模糊方法工作。但是，如果选择两者都日期&时间，我发现模糊方法不能很好地工作。

相反，我遵循了Vue.js包装器组件示例。它使用on('change', function(){})和$emit。

以下代码适用于我（在我的设置中）使用日期格式，关键部分位于vue component声明的mounted部分。

Vue.component('datetime', { 
    props: ['value'], 
    template: '<input class="form-control" id="override-datetime-field"></input>', 
    mounted: function() { 
    var vm = this 
    $(this.$el) 
     .datetimepicker() 
     .val(this.value === '' ? '' : moment(this.value).format('DD-MMM-YYYY, h:mm a')) 
     .trigger('change') 
     .on('change', function() { 
     vm.$emit('input', this.value) 
     }) 
    }, 
    watch: { 
    value: function (value) { 
     $(this.$el).val(value).trigger('change'); 
    } 
    } 
}

的关键部分是在这里：

$(an-element).datetimepicker().trigger('change') 
.on('change', function() { 
    vm.$emit('input', this.value) 
})

原始来源例如：https://vuejs.org/v2/examples/select2.html

来源

2017-07-14 04:41:11 michaelqz

使用$发射又如和部件上的V-模型。本页介绍为什么需要value和$ emit来支持v-model。我需要一个表单元素名称和可选的需要的类来验证。

https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events

<picker name="start_date_1_1" required="1" v-model="res.start_date"></picker> 

    Vue.component('picker', { 
    props: ['name', 'value', 'required'], 
    template: '\ 
     <div class="form-group">\ 
      <div class="input-group date">\ 
       <input :name="name" type="text" class="form-control" v-bind:class="{required: required}" v-bind:value="value">\ 
       <span class="input-group-addon">\ 
        <span class="glyphicon glyphicon-calendar"></span>\ 
       </span>\ 
      </div>\ 
     </div>', 
    mounted: function() { 
     var self = this; 
     var picker = $(this.$el.firstChild).datepicker({autoclose: true}); 
     picker.on('changeDate', function(e) { 
     self.$emit('input', e.date.toLocaleDateString("en-US", {day: '2-digit', month: '2-digit', year: 'numeric'})); 
     }); 
    } 
    });

来源

2018-01-06 21:29:43

bootstrap-datetimepicker与vue.js不能正常工作

回答

相关问题