262 lines
7.5 KiB
Vue
262 lines
7.5 KiB
Vue
<template>
|
|
<div>
|
|
<div class="field is-grouped mb-4 border-bottom">
|
|
<div
|
|
class="control pl-2"
|
|
v-if="mode !== 'simple'"
|
|
>
|
|
<a
|
|
class="mr-1"
|
|
@click="previousYear()"
|
|
>
|
|
<SvgIcon v-bind="{ name: 'doubleleft.svg', type: 'gray', size: 18 }"></SvgIcon>
|
|
</a>
|
|
<a
|
|
@click="previousMonth()"
|
|
v-if="type === 'days'"
|
|
>
|
|
<SvgIcon v-bind="{ name: 'left1.svg', type: 'gray', size: 18 }"></SvgIcon>
|
|
</a>
|
|
</div>
|
|
<div class="control is-expanded has-text-centered">
|
|
<span
|
|
class="fsb-16 hyperlink mr-3"
|
|
@click="mode === 'simple' ? false : (type = 'PickMonth')"
|
|
v-if="type === 'days'"
|
|
>{{ `Tháng ${month}` }}</span
|
|
>
|
|
<span
|
|
class="fsb-16 hyperlink"
|
|
@click="mode === 'simple' ? false : (type = 'PickYear')"
|
|
>{{ caption || year }}</span
|
|
>
|
|
</div>
|
|
<div
|
|
class="control pr-2"
|
|
v-if="mode !== 'simple'"
|
|
>
|
|
<a
|
|
class="mr-1"
|
|
@click="nextMonth()"
|
|
v-if="type === 'days'"
|
|
>
|
|
<SvgIcon v-bind="{ name: 'right.svg', type: 'gray', size: 18 }"></SvgIcon>
|
|
</a>
|
|
<a @click="nextYear()">
|
|
<SvgIcon v-bind="{ name: 'doubleright.svg', type: 'gray', size: 18 }"></SvgIcon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div v-if="type === 'days'">
|
|
<div class="columns is-mobile mx-0">
|
|
<div
|
|
class="column px-2 py-1 has-text-grey-dark"
|
|
v-for="(m, h) in dateOfWeek"
|
|
:key="h"
|
|
>
|
|
{{ m.text }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
:class="`columns is-mobile mx-0 ${i === weeks.length - 1 ? 'mb-1' : ''}`"
|
|
v-for="(v, i) in weeks"
|
|
:key="i"
|
|
>
|
|
<div
|
|
class="column px-3 fs-14"
|
|
v-for="(m, h) in v.dates"
|
|
:key="h"
|
|
style="padding-top: 1px; padding-bottom: 1px"
|
|
>
|
|
<a v-if="m.event && m.currentMonth === m.mothCondition">
|
|
<Tooltip v-bind="{ html: m.event.html, tooltip: m.event.tooltip }"></Tooltip>
|
|
</a>
|
|
<span
|
|
class="has-background-findata has-text-white px-1 py-1"
|
|
v-else-if="m.date === today"
|
|
>{{ m.dayPrint }}</span
|
|
>
|
|
<span v-else>{{ m.dayPrint }}</span>
|
|
</div>
|
|
</div>
|
|
<template v-if="mode !== 'simple'">
|
|
<div class="border-bottom"></div>
|
|
<div class="mt-2">
|
|
<span class="ml-2 mr-2">Hôm nay: </span>
|
|
<span
|
|
class="has-text-primary hyperlink"
|
|
@click="chooseToday()"
|
|
>{{ $dayjs(today).format("L") }}</span
|
|
>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div v-else-if="type === 'PickMonth'">
|
|
<PickMonth @month="selectMonth"></PickMonth>
|
|
</div>
|
|
<div v-else-if="type === 'PickYear'">
|
|
<PickYear
|
|
v-bind="{ year: year, month: month, action: action }"
|
|
@year="selectYear"
|
|
@caption="changeCaption"
|
|
></PickYear>
|
|
</div>
|
|
<Modal
|
|
@close="showmodal = undefined"
|
|
v-bind="showmodal"
|
|
v-if="showmodal"
|
|
></Modal>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
components: {
|
|
PickMonth: () => import("@/components/datepicker/PickMonth"),
|
|
PickYear: () => import("@/components/datepicker/PickYear"),
|
|
},
|
|
props: ["date", "events", "mode", "vyear", "vmonth"],
|
|
data() {
|
|
return {
|
|
dates: [],
|
|
dateOfWeek: [
|
|
{ id: 0, text: "CN" },
|
|
{ id: 1, text: "T2" },
|
|
{ id: 2, text: "T3" },
|
|
{ id: 3, text: "T4" },
|
|
{ id: 4, text: "T5" },
|
|
{ id: 5, text: "T6" },
|
|
{ id: 6, text: "T7" },
|
|
],
|
|
weeks: [],
|
|
today: this.$dayjs().format("YYYY/MM/DD"),
|
|
year: undefined,
|
|
month: undefined,
|
|
type: "days",
|
|
caption: undefined,
|
|
action: undefined,
|
|
curdate: undefined,
|
|
showmodal: undefined,
|
|
};
|
|
},
|
|
created() {
|
|
this.showDate();
|
|
},
|
|
watch: {
|
|
date: function (newVal) {
|
|
if (newVal) this.showDate();
|
|
},
|
|
events: function (newVal) {
|
|
this.showDate();
|
|
},
|
|
},
|
|
methods: {
|
|
showDate() {
|
|
this.curdate = this.date ? this.date.replaceAll("-", "/") : undefined;
|
|
this.year = this.$dayjs(this.curdate || this.today).year();
|
|
this.month = this.$dayjs(this.curdate || this.today).month() + 1;
|
|
if (this.vyear) this.year = this.$copy(this.vyear);
|
|
if (this.vmonth) this.month = this.$copy(this.vmonth);
|
|
this.getDates();
|
|
},
|
|
chooseToday() {
|
|
this.$emit("date", this.today.replaceAll("/", "-"));
|
|
this.year = this.$dayjs(this.today).year();
|
|
this.month = this.$dayjs(this.today).month() + 1;
|
|
this.getDates();
|
|
},
|
|
changeCaption(v) {
|
|
this.caption = v;
|
|
},
|
|
selectMonth(v) {
|
|
this.month = v;
|
|
this.getDates();
|
|
this.type = "days";
|
|
},
|
|
selectYear(v) {
|
|
this.year = v;
|
|
this.getDates();
|
|
this.type = "days";
|
|
},
|
|
getDates() {
|
|
this.caption = undefined;
|
|
this.dates = this.allDaysInMonth(this.year, this.month);
|
|
this.dates.map((v) => {
|
|
let event = this.events ? this.$find(this.events, { isodate: v.date }) : undefined;
|
|
if (event) v.event = event;
|
|
});
|
|
this.weeks = this.$unique(this.dates, ["week"]).map((v) => {
|
|
return { week: v.week };
|
|
});
|
|
this.weeks.map((v) => {
|
|
v.dates = this.dates.filter((x) => x.week === v.week);
|
|
});
|
|
},
|
|
nextMonth() {
|
|
let month = this.month + 1;
|
|
if (month > 12) {
|
|
month = 1;
|
|
this.year += 1;
|
|
}
|
|
this.month = month;
|
|
this.getDates();
|
|
},
|
|
previousMonth() {
|
|
let month = this.month - 1;
|
|
if (month === 0) {
|
|
month = 12;
|
|
this.year -= 1;
|
|
}
|
|
this.month = month;
|
|
this.getDates();
|
|
},
|
|
nextYear() {
|
|
if (this.type === "PickYear") return (this.action = { name: "next", id: this.$id() });
|
|
this.year += 1;
|
|
this.getDates();
|
|
},
|
|
previousYear() {
|
|
if (this.type === "PickYear") return (this.action = { name: "previous", id: this.$id() });
|
|
this.year -= 1;
|
|
this.getDates();
|
|
},
|
|
choose(m) {
|
|
this.$emit("date", m.date.replaceAll("/", "-"));
|
|
},
|
|
createDate(v, x, y) {
|
|
return (
|
|
v + "/" + (x < 10 ? "0" + x.toString() : x.toString()) + "/" + (y < 10 ? "0" + y.toString() : y.toString())
|
|
);
|
|
},
|
|
allDaysInMonth(year, month) {
|
|
let days = Array.from({ length: this.$dayjs(this.createDate(year, month, 1)).daysInMonth() }, (_, i) => i + 1);
|
|
let arr = [];
|
|
days.map((v) => {
|
|
for (let i = 0; i < 7; i++) {
|
|
let thedate = this.$dayjs(this.createDate(year, month, v)).weekday(i);
|
|
let date = this.$dayjs(new Date(thedate.$d)).format("YYYY/MM/DD");
|
|
let dayPrint = this.$dayjs(new Date(thedate.$d)).format("DD");
|
|
let mothCondition = this.$dayjs(date).month() + 1;
|
|
let currentMonth = month;
|
|
let found = arr.find((x) => x.date === date);
|
|
if (!found) {
|
|
let dayOfWeek = this.$dayjs(date).day();
|
|
let week = this.$dayjs(date).week();
|
|
let ele = {
|
|
date: date,
|
|
week: week,
|
|
day: v,
|
|
dayOfWeek: dayOfWeek,
|
|
dayPrint: dayPrint,
|
|
mothCondition: mothCondition,
|
|
currentMonth: currentMonth,
|
|
};
|
|
arr.push(ele);
|
|
}
|
|
}
|
|
});
|
|
return arr;
|
|
},
|
|
},
|
|
};
|
|
</script>
|