VueJS 数据范围

Question

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

一次一个日期选择器。
动态最小最大日期来完成一些验证，例如 start<=end
将 selected 值绑定到模式（双向）
模式和显示值的不同日期格式（如果可能）

我已经为此花费了 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的内容。

编辑我 link 编辑了错误的库。我已经更新了我使用过的库。请检查更新 link.

Answer 1

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

得到了我的解决方案

HTML

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

JS

Vue.component('datepicker', {
    props: ['value', 'startdate', 'enddate'],
    template: '#datepicker-template',
    mounted: function () {
        var vm = this;
        $(this.$el)
                .val(this.value)
                .datetimepicker({
                    format: "mm/dd/yyyy",
                    autoclose: true,
                    minView: 2,
                    daysShort: true,
                    startDate: this.startdate,
                    endDate: this.enddate
                })
                .on('change', function () {
                    vm.$emit('input', this.value);
                });
    },
    watch: {
        value: function (value) {
            $(this.$el).val(value);
        },
        startdate: function (value) {
            $(this.$el).datetimepicker('setStartDate', value);
        },
        enddate: function (value) {
            $(this.$el).datetimepicker('setEndDate', value);
        }
    }
});

var vm = new Vue({
    el: '#app',
    data: {
        queries: {
            start_date: "",
            end_date: "",
        }
    },
});

VueJS 数据范围

VueJS Date Range

vuejs2

vue.js

vue-directives