bootstrap-datetimepicker与vue.js无法正常工作

Question

bootstrap-datetimepicker与vue.js无法正常工作

nej*_*obi 5 javascript bootstrap-datepicker vue.js

我试图使用bootstrap-datepicker与Vue.js尝试创建一个简单的datepicker组件.问题是,当我写入输入时,组件的数据会更新.但是当我使用datepicker gui时,它不起作用.数据未更新.为什么？究竟缺少什么？

这是我的代码:

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

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

nej*_*obi 5

我找不到比丢失焦点(模糊)更好的方法.

这是我的代码:

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

Run Code Online (Sandbox Code Playgroud)

关键是,如果你的元素没有失去焦点,你真的不能使用它.当输入失去焦点时,它会更新数据.IDK有更好的方法.

v-on:focus是无关紧要的.它只是在输入获得焦点时打开日期时间选择器UI.

主要工作是完成的select_by_lose_focus.

归档时间：	8 年，7 月前
查看次数：	7276 次
最近记录：	7 年前