0

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

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

我已经为此花费了 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]);
        }
    }
});

这是内容的链接。

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

4

2 回答 2

0

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

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: "",
        }
    },
});
于 2017-02-28T04:59:23.923 回答
0

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

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

于 2017-06-22T05:19:04.743 回答