bootstrap-datetimepicker與vue.js不能正常工作

我想用Vue.js引導日期選擇器試圖創建一個簡單的日期選擇器組件。問題是，當我寫入輸入時，組件的數據被更新。但是當我使用datepicker gui時，它不起作用。數據未更新。爲什麼？什麼是完全缺失？bootstrap-datetimepicker與vue.js不能正常工作

這裏是我的代碼：

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>

來源

2017-01-23 nejdetckenobi

當我看到選取器組件接受道具'date'，但不能看到它定義''模板 –

成分我沒有看到你在任何地方的數據定義的日期。 – Saurabh

@BelminBedak我沒有給出HTML部分中'date' prop的初始值。 @沙拉布這是一個道具。所以我不需要在Vue實例中定義它。是對的嗎？更新的代碼。 – nejdetckenobi

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

這裏是我的代碼：

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

來源

2017-01-23 14:45:58 nejdetckenobi

-1

使用'而不是'作爲模板，因爲它包含多行。

這將解決你的問題:)

來源

2017-03-10 16:45:39 Rashid

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

來源

2017-07-14 04:41:11 michaelqz

使用$發射又如和部件上的V-模型。本頁介紹爲什麼需要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'})); 
     }); 
    } 
    });

來源

2018-01-06 21:29:43

bootstrap-datetimepicker與vue.js不能正常工作

回答

相關問題