BootstrapVue Calendar 选择事件

BootstrapVue Calendar组件提供了输入、选择、上下文事件，我们可以通过这些事件结合自己的业务进行相应的处理，如果设置了disabled或readonly属性那么不会触发事件。

selected选择事件

当用户选择日期时将会触发该事件，返回ymd选中日期'YYYY-MM-DD'和Date对象。

<div id="app">
     <b-calendar v-model="value" @selected="onSelected"></b-calendar>
      <br>
     {{value}} 
</div>
 <script>
        //注册BootstrapVue组件 www.itxst.com
        Vue.component('BootstrapVue', BootstrapVue);
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    value: '',
                    ymd: '',
                    date: null
                };
            },
            methods: {
                //selected事件
                onSelected(ymd, date) {
                    //选中日期字符串
                    this.ymd = ymd;
                    //选中日期Date对象
                    this.date = date;
                }
            }
        });
</script>

例子

input 事件

当设置日历组件的v-model时会触发input事件，如果设置的不日期格式那么不会触发该事件

<div id="app">
    <b-calendar v-model="value" @input="onInput"></b-calendar>
    <br>
    <input style="width:300px" type="text" v-model="value" placeholder="输入个日期试试看，比如2020-02-11" />
    <br>
    {{ymd}}
</div>
<script>
    //注册BootstrapVue组件
    Vue.component('BootstrapVue', BootstrapVue);
    var app = new Vue({
        el: '#app',
        data() {
            return {
                value: '',
                ymd: ''
            };
        },
        methods: {
            onInput(ymd) {
                //设置的日期字符串
                this.ymd = '您输入了：' + ymd;
            }
        }
    });
</script>

例子

context事件

当点击日历控件并通过键盘上下左右键，选日期时将会触发该事件

<div id="app">
    <b-calendar v-model="value" @context="onContext"></b-calendar>
    <br>
    {{cxt}}
</div>
<script>
    //注册BootstrapVue组件
    Vue.component('BootstrapVue', BootstrapVue);
    var app = new Vue({
        el: '#app',
        data() {
            return {
                value: '',
                cxt: null
            };
        },
        methods: {
            onContext(cxt) { 
                this.cxt = cxt;
            }
        }
    });
</script>