源代码
<template>
<div>
<h2>First Day of Week</h2>
<div style="margin-bottom:20px">
<ComboBox :data="data" v-model="firstDay" :editable="false"></ComboBox>
</div>
<Calendar :selection="value" :firstDay="firstDay" @selectionChange="value=$event" style="width:250px;height:250px"></Calendar>
<p v-if="value">{{value | formatDate}}</p>
</div>
</template>
<script>
export default {
data() {
return {
value: new Date(),
firstDay: 0,
data: [
{ value: 0, text: "Sunday" },
{ value: 1, text: "Monday" },
{ value: 2, text: "Tuesday" },
{ value: 3, text: "Wednesday" },
{ value: 4, text: "Thursday" },
{ value: 5, text: "Friday" },
{ value: 6, text: "Saturday" }
]
};
},
filters: {
formatDate(date) {
let y = date.getFullYear();
let m = date.getMonth() + 1;
let d = date.getDate();
return [m, d, y].join("/");
}
}
};
</script>