如何在vue組件上獲取datetimepicker bootstrap的值？

我的看法刀片，你可以看到下面這樣：如何在vue組件上獲取datetimepicker bootstrap的值？

... 
<div class="panel-body"> 
    <order-view v-cloak> 
     <input slot="from-date" data-date-format="DD-MM-YYYY" title="DD-MM-YYYY" type="text" class="form-control" placeholder="Date" name="from_date" id="datetimepicker" required> 
     <input slot="to-date" data-date-format="DD-MM-YYYY" title="DD-MM-YYYY" type="text" class="form-control" placeholder="Date" name="to_date" id="datetimepicker" required> 
    </order-view> 
</div> 
...

我的訂單視圖組件，你可以看到下面這樣：

<template> 
    <div> 
     <div class="col-sm-2"> 
      <div class="form-group"> 
       <slot name="from-date" required v-model="fromDate"></slot> 
      </div> 
     </div> 
     <div class="col-sm-1"> 
      <div class="form-group" style="text-align: center"> 
       - 
      </div> 
     </div> 
     <div class="col-sm-2"> 
      <div class="form-group">       
       <slot name="to-date" required v-model="toDate"></slot> 
      </div> 
     </div> 
     <div class="col-sm-4"> 
      <button v-on:click="filter()" class="btn btn-default" type="button"> 
       <span class="glyphicon glyphicon-search"></span> 
      </button> 
     </div> 
    </div> 
</template> 

<script> 
    export default { 
     data() { 
      return{ 
       fromDate: '', 
       toDate: '' 
      } 
     }, 
     methods: { 
      filter: function() { 
       console.log(this.fromDate) 
       console.log(this.toDate) 
      } 
     } 
    } 
</script>

我使用V模型類似上面的代碼

但是，當我點擊按鈕時，結果爲

console.log(this.fromDate) 
console.log(this.toDate)

爲空

它顯示爲空

爲什麼它不起作用？

我該如何解決？

來源

2017-04-05 moses toh

您無法使用v-model綁定插槽，並且預計Vue會將其自動附加到您的插槽輸入，但我無法看到您爲什麼需要在此處使用插槽的任何原因。它看起來像你剛纔想的輸入，你可以自定義的附加屬性，你可以做到這一點通過將屬性爲prop和使用v-bind約束他們：

<template> 
    <div> 
    <input v-bind="attrs" v-model="fromDate" /> 
    <button @click="filter">filter</button> 
</div> 
</template> 


export default{ 
    props: ['attrs'], 
    methods: { 
    filter() { 
     console.log(this.fromDate) 
    } 
    }, 
    data() { 
    return { 
     fromDate: "" 
    } 
    } 
} 

new Vue({ 
    el: "#app", 
    data: { 
    fromDateAttrs: { 
     'data-date-format': "DD-MM-YYYY", 
     title: "DD-MM-YYYY", 
     type: "text", 
     class: "form-control", 
     placeholder: "Date", 
     name: "from_date", 
     id: "datetimepicker", 
    } 
    } 
});

現在，你可以通過你的ATTRS作爲託父：

<my-comp :attrs="fromDateAttrs"></my-comp>

這裏的的jsfiddle：https://jsfiddle.net/rvederzc/

編輯

在談到關於如何創建一個日期選取器組件，這裏是我將如何使用Vue.js實現一個jQuery的日期選擇器：

<template id="date-picker"> 
    <div> 
    <input v-bind="attrs" v-model="date" @input="$emit('input', $event.target.value)" v-date-picker/> 
    </div> 
</template> 

<script type="text/javascript"> 
export default { 
    props: ['attrs'], 
    directives: { 
    datePicker: { 
     bind(el, binding, vnode) { 
     $(el).datepicker({ 
      onSelect: function(val) { 
      // directive talk for 'this.$emit' 
      vnode.context.$emit('input', val); 
      } 
     }); 
     } 
    } 
    } 
} 
</script>

然後，您可以綁定與v-model父：

<date-picker v-model="myDate"></date-picker>

這裏的JSFiddle：https://jsfiddle.net/g64drpg6/

來源

2017-04-05 11:12:41

我試試你的jsfiddle。但是，日期選擇器不顯示 –

這是因爲我沒有附加日期選擇器，這是一個概念證明，您可以在自己的代碼中使用您使用的任何日期選擇器。但我會想，日期選擇器應該是一個組件，你可以用''將它添加到你的表單中，這將是一個很好的解決方案。 –

好的。順便說一句，我的第一個代碼不是組件。但是，它是視圖刀片。我的第二個代碼是一個組件 –

不希望任何javascript技術在它成名之前完成。爲此，我嘗試了使用moment到vue-datapicker的所有建議。所有建議都嚴重破壞了設計，並且需要在mounted下vue初始化中的divid的硬編碼。不能用這種方式將黑客引入我的項目。融合設計和實施的整潔。

我使用普通的舊jsp修復了它。在保存，我只是做這個

vuedata.dateOfBirthMilliSecs = $("#dateOfBirth").val() ;

，我會在我的Java控制器日期格式的轉換找出該milliseconds。

來源

2018-03-10 07:09:56 Siddharth

如何在vue組件上獲取datetimepicker bootstrap的值？

回答

相關問題