Question

我必须选择两个日期来设置输入日期范围。我使用了this库而不是日期范围输入，为每个日期（开始日期和结束日期）使用了单个日期选择器，因为要求一次只显示一个日历。我在我的项目中使用了vuejs。所以我必须将这些输入值绑定到模型。我是vuejs的新人，所以不太了解vuejs。但我知道我必须使用自定义vuejs指令将这些值绑定到模型。以下是日期范围输入的要求。

一次一个日期选择器。
动态最小值最长日期以填充某些验证，例如start<=end
将所选值绑定到模态（twoWay）
模态和显示值的不同日期格式（如果可能）

我已经在这上花了25个小时而且太沮丧了。所以，如果有人知道答案，我们将不胜感激。

这是我的代码。

HTML

<div id="app">
    <div class="dropdown-menu">
        <div class="input-group date">
            <label>from:</label>
            <input size="16" type="text" v-date v-model="queries.start_date" class="form_datetime" readonly="">
            <span class="input-group-addon">
                <span class="calendar-icon"></span>
            </span>
        </div>
        <div class="input-group date form_datetime">
            <label>to:</label>
            <input size="16" type="text" v-date v-model="queries.end_date" class="form_datetime" readonly>
            <span class="input-group-addon">
                <span class="calendar-icon"></span>
            </span>
        </div>
    </div>
</div>

JS

Vue.directive('date', {
    twoWay: true,
    bind: function (el) {
        $(el).datetimepicker({
            format: "mm/dd/yyyy",
            autoclose: true,
            minView: 2,
            daysShort: true
        });
    }
});

var vm = new Vue({
    el: '#app',
    data: {
        queries: {
            start_date: "",
            end_date: "",
        }
    },
    methods: {
        testVal: function () {
            console.log([this.queries.start_date, this.queries.end_date]);
        }
    }
});

内容为link。

修改我链接了错误的库。我更新了我用过的库。请检查更新的链接。

Answer 1

我得到了解决方案。我必须使用组件。我在某处读过你无法在VueJS2中获取自定义指令的实例。我不知道它是否正确。但是从reference获得了我的解决方案。

<强> HTML

     message: '`ftol` termination condition is satisfied.'
        nfev: 40
        njev: 36
  optimality: 0.0001517727368912258
      status: 2
     success: True
           x: array([ 0.10390021, -0.4761587 ,  0.21707827,  0.21714922])

<强> JS

<div class="dropdown-menu" id="app">
    <div class="input-group date">
        <label>from:</label>
        <datepicker v-model="queries.start_date" :enddate="queries.end_date"></datepicker>
        <span class="input-group-addon">
            <span class="calendar-icon"></span>
        </span>
    </div>
    <div class="input-group date form_datetime">
        <label>to:</label>
        <datepicker v-model="queries.end_date" :startdate="queries.start_date"></datepicker>
        <span class="input-group-addon">
            <span class="calendar-icon"></span>
        </span>
    </div>
</div>

<script type="text/x-template" id="datepicker-template">
    <input size="16" type="text" class="form_datetime" readonly="">
</script>

Answer 2

我遇到了同样的问题，我花了整整一天的时间来完成它......与你的目标非常相似！

这是我想出的。 https://www.webpackbin.com/bins/-KnCcSqurk2HvNhg3Rj2

VueJS日期范围

2 个答案: