161 lines
4.0 KiB
Vue
161 lines
4.0 KiB
Vue
<template>
|
||
<view class="month-calendar">
|
||
<view class="header">
|
||
<view class="arrow" @click="prevYearMonth">‹‹</view>
|
||
<view class="year">
|
||
<picker mode="multiSelector" :value="dateIndex"
|
||
:range="dateRange" @change="handleChange"
|
||
@columnchange="onColumnChange"
|
||
>
|
||
<view class="uni-input">{{selectedYear}}-{{ selectedMonth.toString().padStart(2, '0') }}</view>
|
||
</picker>
|
||
</view>
|
||
<view class="arrow" @click="nextYearMonth">››</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed,onMounted,reactive } from "vue";
|
||
|
||
const props = defineProps({
|
||
year: {//默认当前年
|
||
default: new Date().getFullYear()
|
||
},
|
||
month:{//默认1月
|
||
default:1
|
||
}
|
||
})
|
||
|
||
// 年份列表
|
||
// const yearIndex = ref(100);
|
||
const selectedYear = ref(props.year);
|
||
const selectedMonth = ref(props.month);
|
||
|
||
const dateIndex = ref([0, 0])
|
||
const dateRange = ref([[],[]])
|
||
|
||
// 初始化数据
|
||
onMounted(() => {
|
||
let date = new Date();
|
||
let y = date.getFullYear();
|
||
// 往前100年 往后61年
|
||
let j = 0;
|
||
for (let i = 0; i < 100; i++) {
|
||
let a = (y-100)+i;
|
||
dateRange.value[0].push(a);
|
||
j++;
|
||
}
|
||
|
||
for (let i = 0; i < 62; i++) {
|
||
let a = y+i
|
||
dateRange.value[0].push(a);
|
||
}
|
||
|
||
// 生成月份
|
||
for (let i = 1; i <= 12; i++) {
|
||
dateRange.value[1].push(i)// + '月'
|
||
}
|
||
|
||
// 设置默认选中
|
||
// const yearIndex = dateRange.years.findIndex(item => item === selectedYear.value)
|
||
const monthIndex = dateRange.value[1].findIndex(item => item === selectedMonth.value)
|
||
dateIndex.value = [j, monthIndex]
|
||
// console.log(dateRange.value[0],dateRange.value[1],dateIndex.value)
|
||
})
|
||
|
||
|
||
// 调用父组件方法
|
||
const emit = defineEmits(["change"]);
|
||
|
||
// 计算月份
|
||
const getYearMonth=(type)=>{
|
||
let y= selectedYear.value;
|
||
let m = selectedMonth.value;
|
||
let current_date = new Date(y+'-'+m)
|
||
let month=type==1? current_date.getMonth()-1:current_date.getMonth()+1;//上个月or下个月
|
||
current_date.setMonth(month);
|
||
selectedYear.value = current_date.getFullYear();
|
||
selectedMonth.value = current_date.getMonth()+1;
|
||
|
||
const yearIndex = dateRange.value[0].findIndex(item => item === selectedYear.value)
|
||
const monthIndex = dateRange.value[1].findIndex(item => item === selectedMonth.value)
|
||
dateIndex.value = [yearIndex, monthIndex]
|
||
|
||
let m2 = selectedMonth.value.toString().padStart(2, '0')
|
||
emit('change', {year:selectedYear.value,month:selectedMonth.value,ymStr:selectedYear.value+'-'+m2});
|
||
}
|
||
|
||
// 上个月
|
||
const prevYearMonth = () => {
|
||
getYearMonth(1)
|
||
}
|
||
|
||
// 下个月
|
||
const nextYearMonth = () => {
|
||
getYearMonth(2)
|
||
}
|
||
|
||
// 列选择
|
||
const onColumnChange = (e) => {
|
||
const { column, value } = e.detail;
|
||
// console.log(column,value)
|
||
if (column === 0) { // 年份列
|
||
dateIndex.value[0] = column
|
||
selectedYear.value = dateRange.value[column][value]
|
||
} else if (column === 1) { // 月份列
|
||
dateIndex.value[1] = column
|
||
selectedMonth.value = dateRange.value[column][value]
|
||
}
|
||
}
|
||
|
||
// 年月选择
|
||
const handleChange=(e)=>{
|
||
const values = e.detail.value
|
||
selectedYear.value = parseInt(dateRange.value[0][values[0]])
|
||
selectedMonth.value = parseInt(dateRange.value[1][values[1]])
|
||
// console.log('选择的日期:', `${selectedYear.value}-${selectedMonth.value.toString().padStart(2, '0')}`)
|
||
let m = selectedMonth.value.toString().padStart(2, '0')
|
||
emit('change', {year:selectedYear.value,month:selectedMonth.value,ymStr:selectedYear.value+'-'+m});
|
||
}
|
||
|
||
// 获取
|
||
const getNextMonth = (current_date)=>{
|
||
current_date.setMonth(current_date.getMonth() + 1);
|
||
}
|
||
|
||
</script>
|
||
|
||
<style scoped>
|
||
.month-calendar {
|
||
padding:0 20rpx;
|
||
background: #fff;
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding:0rpx 0 16rpx;
|
||
/* #ifdef APP-PLUS */
|
||
padding:20rpx 0;
|
||
/* #endif */
|
||
}
|
||
|
||
.year {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.arrow {
|
||
font-size: 60rpx;
|
||
color: #CACACA;
|
||
padding: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.arrow:active {
|
||
color: #4A95FF;
|
||
}
|
||
</style> |