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

Posted 2023-05-07

技术标签:

【中文标题】带有 vue.js 的 bootstrap-datetimepicker 无法正常工作【英文标题】：bootstrap-datetimepicker with vue.js not working properly 【发布时间】：2017-06-07 22:03:44 【问题描述】：

我正在尝试将 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>

【问题讨论】：

我看到选择器组件接受 prop date，但看不到它在模板中的 <picker></picker> 组件上定义我没有看到你在任何地方的数据中定义了日期。 @BelminBedak 我没有在 HTML 部分中为 date 属性提供初始值。 @Saurabh 这是一个道具。所以我不需要在Vue实例中定义它。那正确吗？更新了代码。我在运行你的 sn-p 时收到 $(...).datetimepicker is not a function。 @RoyJ：是的。我也遇到了这个错误。我不知道为什么它会这样响应，但是当我运行它时，它运行得很好。无论如何感谢您的努力。 【参考方案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完成。

【讨论】：

【参考方案2】：

另一个在组件上使用 $emit 和 v-model 的示例。这个页面描述了为什么需要 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'));
      );
    
  );

【讨论】：

mounted() var self = this; var picker = $(".dtp").timepicker(); picker.on('changeTime.timepicker', function(e) self.form[e.target.name] = e.time.value; ); ,【参考方案3】：

在 vue 对象初始化之前添加：

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

然后将 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>

我建议将此指令与 v-model 相同的值（在我的示例中为“payment.pay_date”）

您可以在一页上通过此指令使用无限的输入实体。

【讨论】：

【参考方案4】：

感谢@nejdetckenobi 的回答，如果仅选择日期，则模糊方法有效。但是，如果选择 both 日期和时间，我发现模糊方法效果不佳。

相反，我遵循了 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

【讨论】：

【参考方案5】：

通过在更改日期时调度输入事件来使其工作。

$('.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>

【讨论】：

【参考方案6】：

遇到了这个问题，并通过在初始化 vue 后初始化日期选择器来使其工作。例如：

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

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

【讨论】：

这不是初始化它的好方法。如果您没有正确初始化它，您将无法将其用作对象。但是，您在初始化程序中输入的参数很有趣。

以上是关于带有 vue.js 的 bootstrap-datetimepicker 无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章

带有vue.js的requirejs将引发“未定义Vue”

带有 webpack 的 Vue.js 不提供压缩的 GZIP .js 文件

带有 http 请求的 Vue.js 分页

JS框架_(Vue.js)带有星期日期的数字时钟

带有 Vue 2.0 的 Sortable.js 排序不正确

带有 Vue.js 和 webpack 的 Laravel 6，而不是常规的 Vue