当前位置：首页 > news >正文

封装日历uniapp，只显示年月不显示日

news 2025/6/22 2:40:04

默认展示最新日期
在这里插入图片描述

子组件

<template><view class="date-picker"><picker mode="date" fields="month" @change="onDateChange" :value="selectedDate"><view class="picker">{{ selectedDate }}<u-icon name="arrow-down-fill" size="12"></u-icon></view></picker></view>
</template><script>export default {data() {return {selectedDate: ''};},created() {const now = new Date();const year = now.getFullYear();const month = (now.getMonth() + 1).toString().padStart(2, '0');this.selectedDate = `${year}-${month}`;},methods: {onDateChange(event) {console.log('11111111111');this.selectedDate = event.detail.value;this.$emit('updateDate', this.selectedDate);}}};
</script><style lang="scss">.date-picker {display: flex;justify-content: center;align-items: center;font-size: 26rpx;width: 200rpx;height: 64rpx;line-height: 64rpx;}.picker {display: flex;}/deep/.u-icon__icon.data-v-172979f2 {margin-left: 8rpx !important;}
</style>

父组件

<script>
import YearMonthPicker from '@/components/YearMonthPicker.vue'; // 修改路径为实际路径export default {components: {YearMonthPicker},data() {return {selectedDate: ''};},methods: {updateDate(date) {this.selectedDate = date;},}
};
</script>