192 lines
6.6 KiB
Vue
192 lines
6.6 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 py-1 fs-14" v-for="(m,h) in v.dates" :key="h">
|
|
<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('DD/MM/YYYY') }}</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) {
|
|
var weekday = require('dayjs/plugin/weekday')
|
|
this.$dayjs.extend(weekday)
|
|
var weekOfYear = require('dayjs/plugin/weekOfYear')
|
|
this.$dayjs.extend(weekOfYear)
|
|
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> |