BootstrapVue Calendar 日历组件（中文本地化）

BootstrapVue Calendar 日历组件b-calendar可以用来选择日期，支持自定义可选日期范围，兼容WAI-ARIA。如果未设置语言默认为浏览器当前语言环境。

例子

选中事件

设置value-as-date属性为true后，选中日期将会触发input事件。

<div id="app">
        <b-row>
            <b-col md="auto">
                <b-calendar v-model="value" @context="onContext" @input="onInput" value-as-date></b-calendar>
            </b-col>
            <b-col>
                <p>选择日期: <b>'{{ value }}'</b></p>
                <p class="mb-0">上下文:</p>
                <pre class="small">{{ context }}</pre>
            </b-col>
        </b-row>
    </div>
    <script>
        //注册BootstrapVue组件
        Vue.component('BootstrapVue', BootstrapVue);
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    value: '',
                    context: null
                };
            },
            methods: {
                onContext(ctx) {
                    this.context = ctx
                },
                //设置value-as-date后会触发onInput事件
                onInput(date) {
                   
                    alert(date);
                }
            }
        });
</script>

例子

禁用和只读状态

<b-calendar 
      :disabled="true"
      :readonly="true"
   ></b-calendar>

设置日期可选范围

<div id="app"> 
        <b-calendar v-model="value" :min="min" :max="max"></b-calendar>
    </div>
    <script>
        //设置只允许选择当月15号到20号
        Vue.component('BootstrapVue', BootstrapVue);
        var app = new Vue({
            el: '#app',
            data() {
                const now = new Date()
                const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
                // 15th two months prior
                const minDate = new Date(today)
                minDate.setDate(15)
                // 15th in two months
                const maxDate = new Date(today)
                maxDate.setDate(20)


                return {
                    value: '',
                    min: minDate,
                    max: maxDate
                }
            }
        });
 </script

例子

设置不允许选择的日期

通过date-disabled-fn事件设置不允许选择的日期，以下代码设置星期六星期天和13号不可选择。

<div id="app"> 
        <b-calendar v-model="value" :date-disabled-fn="dateDisabled" ></b-calendar>
  </div>
  <script>
        //设置只允许选择当月15号到20号
        Vue.component('BootstrapVue', BootstrapVue);
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    value: ''
                }
            },
            methods: {
                dateDisabled(ymd, date) {
                    const weekday = date.getDay()
                    const day = date.getDate()
                    // 设置星期六星期天和13号不可选择
                    return weekday === 0 || weekday === 6 || day === 13
                }
            }
        });
</script>

例子