78 lines
1.7 KiB
Vue
78 lines
1.7 KiB
Vue
<template>
|
||
<div>
|
||
<uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
|
||
<div class="button"><button @click="open" :loading="loading">{{loading?'数据加载中……':'请选择工单时间'}}</button></div>
|
||
<div class="text">当前选择：{{year}}年-{{week}}周-{{day}}日</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
loading: {
|
||
default: false,
|
||
type: Boolean
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
year: 0,
|
||
week: 0,
|
||
day: 0
|
||
}
|
||
},
|
||
created() {
|
||
this.year = new Date().getFullYear();
|
||
this.week = this.getYearWeek(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate());
|
||
this.day = new Date().getDay()
|
||
this.emitData();
|
||
},
|
||
methods: {
|
||
open() {
|
||
this.$refs.calendar.open();
|
||
},
|
||
confirm(e) {
|
||
this.year = e.lunar.cYear;
|
||
this.week = this.getYearWeek(e.lunar.cYear, e.lunar.cMonth, e.lunar.cDay);
|
||
this.day = e.lunar.nWeek;
|
||
this.emitData();
|
||
|
||
},
|
||
// 选择日期
|
||
emitData() {
|
||
const data = {
|
||
year: this.year,
|
||
week: this.week,
|
||
day: this.day
|
||
}
|
||
this.$emit('dateChouse', data)
|
||
},
|
||
getYearWeek(year, month, day) {
|
||
/*
|
||
date1是当前日期
|
||
date2是当年第一天
|
||
date3是当前日期是今年第多少天
|
||
用date3 + 当前年的第一天的周差距的和在除以7就是本年第几周
|
||
*/
|
||
let date1 = new Date(year, parseInt(month) - 1, day),
|
||
date2 = new Date(year, 0, 1),
|
||
date3 = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
|
||
return Math.ceil((date3 + ((date2.getDay() + 1) - 1)) / 7);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.text {
|
||
text-align: center;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.button {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
margin-top: 10px;
|
||
}
|
||
</style> |