问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

我正在尝试将 bootstrap-datepicker 与 Vue.js 一起使用 试图创建一个简单的日期选择器组件。问题是，当我写入输入时，组件的数据会更新。但是当我使用 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': {}
});

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

原文由 nejdetckenobi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptvue.jsbootstrap-datepicker
阅读 582
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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

这是我的代码：

 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 完成。

原文由 nejdetckenobi 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

另一个在组件上使用 \(emit 和 v-model 的例子。本页描述了为什么需要 value 和 \)emit 来支持 v-model。我需要一个表单元素名称和可选的必需类来进行验证。

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

原文由 Dustin Butler 发布，翻译遵循 CC BY-SA 4.0 许可协议

查看全部 2 个回答
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏