堆棧內存溢出
  簡體   English   中英

帶有 vue.js 的 bootstrap-datetimepicker 無法正常工作

[英]bootstrap-datetimepicker with vue.js not working properly

 原文  2017-01-23 11:43:24  5   6    javascript/ vue.js/ bootstrap-datepicker

問題描述

我正在嘗試將 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': {} });
 <!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>

6 個解決方案

解決方案1
 5 已采納  2017-01-23 14:45:58

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

這是我的代碼：

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
 2  2018-01-06 21:29:43

另一個在組件上使用 $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'}));
      });
    }
  });

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

在 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
 0  2017-07-14 04:41:11

感謝@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 ://v2.vuejs.org/v2/examples/select2.html

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

通過在更改日期時分派輸入事件來使其工作。 

 $('.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
 0  2018-08-31 07:33:14

遇到了這個問題，並通過在初始化 vue 后初始化日期選擇器來使其工作。 例如：

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

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 initialDate在bootstrap-datetimepicker中不起作用？ Bootstrap-datetimepicker里面 <table/> 沒有正確顯示 bootstrap-datetimepicker enabledDates 未按預期工作 jQuery .on（&#39;click&#39;，function（））無法與bootstrap-datetimepicker一起使用 bootstrap 4 的 bootstrap-datetimepicker 動態添加新行bootstrap-datetimepicker不起作用 Bootstrap-datetimepicker添加天 帶有 bootstrap 5 的 datetimepicker 無法正常工作 Bootstrap選項卡導航在vue.js中不起作用 vue2-timepicker 包在 vue.js 中無法正常工作
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM