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

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

子组件

<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>

相关推荐

  1. 【笔记】flutter 日历年月自定义国际化显示

    2024-07-09 21:38:09       27 阅读
  2. excel打开显示菜单栏内容却显示改如何处理

    2024-07-09 21:38:09       12 阅读
  3. uniapp video视频铺满容器,显示控件

    2024-07-09 21:38:09       6 阅读

最近更新

  1. 认识 Glob Pattern

    2024-07-09 21:38:09       0 阅读
  2. 重载和重写的区别

    2024-07-09 21:38:09       0 阅读
  3. 白骑士的PyCharm教学基础篇 1.3 调试与运行

    2024-07-09 21:38:09       0 阅读
  4. RK RGA _MMU unsupported memory larger then 4G!问题解决

    2024-07-09 21:38:09       0 阅读
  5. C语言中的指针函数和函数指针

    2024-07-09 21:38:09       0 阅读
  6. 人工智能:改变我们日常生活的无形力量

    2024-07-09 21:38:09       0 阅读
  7. F - Palindromic Expression (abc363)

    2024-07-09 21:38:09       0 阅读
  8. iOS应用冷启动优化,可以做哪些事情

    2024-07-09 21:38:09       0 阅读
  9. MySQL学习之事务,锁机制

    2024-07-09 21:38:09       0 阅读
  10. 神经架构搜索:目标检测的未来

    2024-07-09 21:38:09       0 阅读

热门阅读

  1. 流媒体技术

    2024-07-09 21:38:09       9 阅读
  2. mysql面试题 Day5

    2024-07-09 21:38:09       5 阅读
  3. Xcode简介

    2024-07-09 21:38:09       5 阅读
  4. iOS项目怎样进行二进制重排

    2024-07-09 21:38:09       8 阅读
  5. 相机光学(二十八)——感光度(ISO)

    2024-07-09 21:38:09       7 阅读
  6. 【Adobe】Photoshop图层的使用

    2024-07-09 21:38:09       7 阅读
  7. Rust破界:前端革新与Vite重构的深度透视(上)

    2024-07-09 21:38:09       8 阅读
  8. bash终端快捷键

    2024-07-09 21:38:09       7 阅读
  9. ChatGPT 5.0:一年半后的展望与看法

    2024-07-09 21:38:09       4 阅读