<template>
|
<view class="uni-calendar">
|
<view class="uni-panel-header">
|
<view class="uni-panel-header-child-item" @click="clickToday">今天</view>
|
<view class="uni-panel-header-child-date">
|
<picker mode="date" fields="month" :start="startDateCalendar" :end="endDateCalendar"
|
@change="bindDateChange">
|
<view>
|
<text>{{monthText}}</text>
|
<text style="padding: 5px;" class="fs-ArrowDown" />
|
</view>
|
</picker>
|
</view>
|
<view class="uni-panel-header-child-item" @click="clickCancel">取消</view>
|
<view class="uni-panel-header-child-item" @click="clickConfirm">确定</view>
|
</view>
|
<view class="uni-panel-content">
|
<view class="uni-panel-week">
|
<text class="uni-panel-week-item">日</text>
|
<text class="uni-panel-week-item">一</text>
|
<text class="uni-panel-week-item">二</text>
|
<text class="uni-panel-week-item">三</text>
|
<text class="uni-panel-week-item">四</text>
|
<text class="uni-panel-week-item">五</text>
|
<text class="uni-panel-week-item">六</text>
|
</view>
|
<view class="uni-panel-calenda">
|
<calendarDate ref="calendar" class="calendar-date" :canWeekView="false" :lunar="showLunar"
|
@change="changeCalendar" @monthSwitch="monthSwitchCalendar"></calendarDate>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import TaskInit from "@/common/extend.js"
|
import Session from "@/common/utils.js"
|
import CalendarLunar from '@/common/calendarLunar.js'
|
import calendarDate from './infos/date.vue'
|
export default {
|
name: "calendar",
|
components: {
|
calendarDate
|
},
|
props: {
|
showLunar: {
|
type: Boolean,
|
default: false
|
},
|
},
|
|
emits: ['close', 'confirm', 'change', 'monthSwitch'],
|
data() {
|
return {
|
dateCalendar: new Date(),
|
selCalendar: {},
|
startDateCalendar: TaskInit.dateUtils.getDate('start'),
|
endDateCalendar: TaskInit.dateUtils.getDate('end'),
|
}
|
},
|
computed: {
|
monthText() {
|
return TaskInit.dateUtils.getShortDate(TaskInit.dateUtils.toDateString(this.dateCalendar))
|
},
|
dayText() {
|
|
let curDate = new Date()
|
let fullDate = this.selCalendar.fulldate
|
let month = curDate.getMonth() + 1
|
let day = curDate.getDate()
|
let nowDate = curDate.getFullYear() + '-' + (month < 10 ?
|
'0' + month : month) + '-' + (day < 10 ?
|
'0' + day : day)
|
//console.log("dayText",nowDate,fullDate)
|
// 是否今天
|
let isDay = fullDate === nowDate
|
if (isDay)
|
return "今天"
|
else
|
return this.selCalendar.month + '-' + this.selCalendar.date
|
},
|
},
|
methods: {
|
setData: function(obj) {
|
let that = this;
|
let keys = [];
|
let val, data;
|
|
Object.keys(obj).forEach(function(key) {
|
keys = key.split(".");
|
val = obj[key];
|
data = that.$data;
|
keys.forEach(function(key2, index) {
|
if (index + 1 == keys.length) {
|
that.$set(data, key2, val);
|
} else {
|
if (!data[key2]) {
|
that.$set(data, key2, {});
|
}
|
}
|
data = data[key2];
|
});
|
});
|
},
|
bindDateChange(e) {
|
console.log("bindDateChange", e.detail)
|
this.setData({
|
dateCalendar: TaskInit.dateUtils.parse(e.detail.value)
|
})
|
this.$refs.calendar.init(this.dateCalendar)
|
// console.log("bindDateChange2", this.dateCalendar)
|
},
|
changeCalendar(e) {
|
// console.log("changeCalendar", e)
|
var _this = this
|
|
_this.setData({
|
selCalendar: e,
|
})
|
this.$emit('change', {
|
date: this.selCalendar
|
})
|
},
|
monthSwitchCalendar(e) {
|
// console.log("monthSwitchCalendar", e)
|
var _this = this
|
const yearOld = _this.dateCalendar.getFullYear()
|
_this.setData({
|
dateCalendar: new Date(e.year, e.month - 1, 1)
|
})
|
this.$emit('monthSwitch', {
|
date: this.dateCalendar
|
})
|
|
// console.log("monthSwitchCalendar", _this.dateCalendar)
|
},
|
clickToday() {
|
this.$refs.calendar.backtoday()
|
},
|
clickCancel() {
|
this.$emit('close')
|
},
|
clickConfirm() {
|
if (this.selCalendar.fulldate)
|
this.$emit('confirm', this.selCalendar)
|
else {
|
let curDate = new Date()
|
let month = curDate.getMonth() + 1
|
let day = curDate.getDate()
|
let nowDate = curDate.getFullYear() + '-' + (month < 10 ?
|
'0' + month : month) + '-' + (day < 10 ?
|
'0' + day : day)
|
this.$emit('confirm', {
|
fulldate: nowDate
|
})
|
}
|
|
},
|
showError(ex) {
|
let tip = typeof ex == 'string' ? ex : typeof ex.err_msg == 'string' ? ex.err_msg : typeof ex.errMsg ==
|
'string' ? ex.errMsg : ""
|
showModal(tip, "提示", false)
|
},
|
|
},
|
mounted() {
|
// let info = Session.getValue('calendar_info')
|
// if (info) {
|
// if (info.lunar) {
|
// this.setData({
|
// showLunar: info.lunar
|
// });
|
// }
|
// }
|
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.uni-calendar {
|
display: flex;
|
width: 100%;
|
height: 312px;
|
padding: 8px 2px 12px 2px;
|
flex-direction: column;
|
|
.uni-panel-header {
|
height: 40px;
|
padding: 0 3%;
|
display: flex;
|
flex-wrap: no-wrap;
|
flex-direction: row;
|
align-items: center;
|
color: #000;
|
font-size: 16px;
|
/* justify-content: space-between; */
|
}
|
|
.uni-panel-header-child-item {
|
display: flex;
|
padding: 0px 8px;
|
font-size: 16px;
|
color: #007aff;
|
}
|
|
.uni-panel-header-child-date {
|
display: flex;
|
flex: 1;
|
justify-content: center;
|
}
|
|
.clearfix {
|
content: " ";
|
box-sizing: border-box;
|
}
|
|
.uni-panel-content {
|
padding-top: 5px;
|
height: calc(100% - 48px);
|
}
|
|
.uni-panel-week {
|
width: 94%;
|
padding: 0 3%;
|
display: flex;
|
height: 32px;
|
}
|
|
.uni-panel-week-item {
|
display: flex;
|
flex: auto;
|
justify-content: center;
|
align-items: center;
|
font-size: 14px;
|
color: #606060;
|
}
|
|
.uni-panel-calendar {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
height: calc(100% - 32px);
|
}
|
|
.calendar-date {
|
width: 94%;
|
padding: 2px 3%;
|
background-color: #fff;
|
}
|
}
|
</style>
|
