ys-app/src/components/calenderMonthSimple.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>