如何在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)

为空

它显示为空

为什么它不起作用？

我该如何解决？

答

您无法使用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/

我试试你的jsfiddle。但是，日期选择器不显示 –

这是因为我没有附加日期选择器，这是一个概念证明，您可以在自己的代码中使用您使用的任何日期选择器。但我会想，日期选择器应该是一个组件，你可以用' date-picker>'将它添加到你的表单中，这将是一个很好的解决方案。 –

好的。顺便说一句，我的第一个代码不是组件。但是，它是视图刀片。我的第二个代码是一个组件 –

答

不希望任何javascript技术在它成名之前完成。为此，我尝试了使用moment到vue-datapicker的所有建议。所有建议都严重破坏了设计，并且需要在mounted下vue初始化中的divid的硬编码。不能用这种方式将黑客引入我的项目。融合设计和实施的整洁。

我使用普通的旧jsp修复了它。在保存，我只是做这个

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

，我会在我的Java控制器日期格式的转换找出该milliseconds。

如何在vue组件上获取datetimepicker bootstrap的值？

相关推荐