如何在 vue 组件上的日期时间选择器引导程序中获取值

Question

我的视图刀片，你可以在下面看到这个：

...
<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)

为空

它显示为空

为什么它不起作用？

我该如何解决？

Answer 1

您无法使用

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/

Answer 2

不能指望任何javascript技术在成名之前是完整的。就这样，我尝试了使用moment的所有建议 vue-datapicker .所有建议都严重破坏了设计，需要在mounted下vue初始化中对div id进行硬编码。不能以这种方式将黑客引入我的项目。搞砸了设计和实现的整洁性。

我使用普通的旧 jsp 修复了它。在保存时，我刚刚这样做了

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

我将在我的 java 控制器中弄清楚日期格式到 milliseconds 的转换。