带有 vue.js 的 bootstrap-datetimepicker 无法正常工作

Question

I am trying to use bootstrap-datepicker with Vue.js Trying to create a simple datepicker component.我正在尝试将 bootstrap-datepicker 与 Vue.js 一起使用尝试创建一个简单的 datepicker 组件。 The problem is, when I write into input, component's data is updated.问题是，当我写入输入时，组件的数据会更新。 But when I use datepicker gui, it doesn't work.但是当我使用 datepicker gui 时，它不起作用。 Data is not updated.数据不更新。 Why?为什么？ What is missing exactly?究竟缺少什么？

Here is my code:这是我的代码：

 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>

Answer 1

I couldn't find a better way than losing focus (blur).我找不到比失去焦点（模糊）更好的方法了。

Here's my code:这是我的代码：

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': {}
});

The point is, you really can't use it if your element does not lose focus.关键是，如果你的元素没有失去焦点，你真的不能使用它。 It updates the data when input loses its focus.当输入失去焦点时，它会更新数据。 IDK any better way. IDK任何更好的方式。

v-on:focus is irrelevant. v-on:focus无关紧要。 It just opens the datetime picker UI when input gains focus.它只是在输入获得焦点时打开日期时间选择器 UI。

The main job is done by select_by_lose_focus .主要工作由select_by_lose_focus完成。

Answer 2

Another example using $emit and v-model on the component.另一个在组件上使用 $emit 和 v-model 的示例。 This page describes why value and $emit are needed to support v-model.这个页面描述了为什么需要 value 和 $emit 来支持 v-model。 I needed a form element name and optional required class for validation.我需要一个表单元素名称和可选的必需类来进行验证。

https://v2.vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events https://v2.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'}));
      });
    }
  });

Answer 3

Add before vue object init:在 vue 对象初始化之前添加：

    Vue.directive('vueinput', {
        twoWay: true,
        bind: function (el, binding, vnode) {
            $(el).on("change", (e) => {
                el.dispatchEvent(new Event('input', { target: e.target }));
            });
        },
    });

And then add v-vueinput="[uniqueString]" directive to your datetime input:然后将 v-vueinput="[uniqueString]" 指令添加到您的日期时间输入：

<div data-start-view="4" data-min-view="2" class="input-group date datetimepicker">
    <input type="text"
           v-model="payment.pay_date"
           v-vueinput="payment.pay_date">
    <div class="input-group-append">
        <button class="btn btn-primary"><i class="icon-th mdi mdi-calendar"></i></button>
    </div>
</div>

I recommend to put same value as v-model to this directive ('payment.pay_date' in my example)我建议为此指令设置与 v-model 相同的值（在我的示例中为“payment.pay_date”）

You can use unlimited entities of inputs with this directives on one page.您可以在一页上通过此指令使用无限的输入实体。

Answer 4

Thanks for the answer @nejdetckenobi, if picking date only, the blur approach works.感谢@nejdetckenobi 的回答，如果仅选择日期，则模糊方法有效。 However, if picking both date & time, I found that the blur approach didn't work so well.但是，如果同时选择日期和时间，我发现模糊方法效果不佳。

Instead I followed the Vue.js wrapper component example.相反，我遵循了 Vue.js 包装器组件示例。 It makes use of on('change', function(){}) and $emit .它使用on('change', function(){})和$emit 。

The code below that worked for me (in my setup) with date formatting, a key part is in mounted section of your vue component declaration.下面的代码（在我的设置中）对我有用，具有日期格式，关键部分在你的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');
    }
  }
}

The key part is here:关键部分在这里：

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

Original source example: https://v2.vuejs.org/v2/examples/select2.html原始源码示例： https ://v2.vuejs.org/v2/examples/select2.html

Answer 5

Got it to work by dispatching the input Event upon changing the date.通过在更改日期时分派输入事件来使其工作。

 $('.with-calendar').datetimepicker({ weekStart: 1, language: 'de', bootcssVer: 3, format: "yyyy-mm-dd hh:ii:00", viewformat: "yyyy-mm-dd hh:ii:00", autoclose: true }).on('changeDate', function (event) { // Communicate datetimepicker result to vue let inputFields = event.target.getElementsByTagName('input'); // depends on your html structure for (let i = 0; i < inputFields.length; i++) { inputFields[i].dispatchEvent(new Event('input', {'bubbles': true})); } });

 <template> ... <div class="form-group"> <label class="col-sm-3 control-label">Date and Time</label> <div class="col-sm-6"> <div class="input-group date with-calendar"> <input type="text" class="form-control" v-model="start_datetime"/> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> ... </template>

Answer 6

got this problem and got it to work by initializing the date-picker after initializing the vue.遇到了这个问题，并通过在初始化 vue 后初始化日期选择器来使其工作。 eg:例如：

var vm = new Vue({
    el: '#myForm',
    data: {
        field1: "",
        field2: ""
    }
});

$(".date-picker").datepicker({
    todayHighlight: true,
    autoclose: true,
    closeOnDateSelect: true
});

带有 vue.js 的 bootstrap-datetimepicker 无法正常工作

问题描述

6 个解决方案

解决方案1
5 已采纳 2017-01-23 14:45:58

解决方案2
2 2018-01-06 21:29:43

解决方案3
1 2020-08-27 19:09:18

解决方案4
0 2017-07-14 04:41:11

解决方案5
0 2018-03-22 15:04:39

解决方案6
0 2018-08-31 07:33:14

带有 vue.js 的 bootstrap-datetimepicker 无法正常工作

问题描述

6 个解决方案

解决方案1 5 已采纳 2017-01-23 14:45:58

解决方案2 2 2018-01-06 21:29:43

解决方案3 1 2020-08-27 19:09:18

解决方案4 0 2017-07-14 04:41:11

解决方案5 0 2018-03-22 15:04:39

解决方案6 0 2018-08-31 07:33:14

解决方案1
5 已采纳 2017-01-23 14:45:58

解决方案2
2 2018-01-06 21:29:43

解决方案3
1 2020-08-27 19:09:18

解决方案4
0 2017-07-14 04:41:11

解决方案5
0 2018-03-22 15:04:39

解决方案6
0 2018-08-31 07:33:14