bootstrap 日历中文_BootstrapVue Calendar 日历组件（中文本地化）
BootstrapVue Calendar 日历组件(中文本地化)
BootstrapVue Calendar 日历组件b-calendar可以用来选择日期，支持自定义可选日期范围，兼容WAI-ARIA。如果未设置语言默认为浏览器当前语言环境。
例子
选中事件
设置value-as-date属性为true后，选中日期将会触发input事件。
选择日期: '{{ value }}'
上下文:
{{ context }}
//注册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);
}
}
});
例子
禁用和只读状态
:disabled="true"
:readonly="true"
>
设置日期可选范围
//设置只允许选择当月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
}
}
});
例子
设置不允许选择的日期
通过date-disabled-fn事件设置不允许选择的日期，以下代码设置星期六星期天和13号不可选择。
//设置只允许选择当月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
}
}
});
例子