uniapp 微信小程序 日 周 月 日期选择器

### 实现日、周、月日期选择器 为了在 UniApp 微信小程序中实现日、周、月日期选择器，可以通过自定义组件来完成这一需求。下面介绍一种基于现有技术的方法。 #### 创建基础结构 首先，在 `components` 文件夹内新建名为 `DatePicker.vue` 的文件作为日期选择器的基础组件。此组件将负责处理不同类型的日期显示逻辑（即每日、每周或每月）。对于 App.vue 是整个应用的根组件，所有页面都在其下进行切换的事实[^3]，可以在任何需要的地方引入并注册该组件用于展示和操作。 ```html <template> <view class="date-picker"> <!-- 日历视图 --> <picker mode="date" :value="currentDate" @change="bindDateChange">{{ currentDate }}</picker> <!-- 显示模式切换按钮 --> <button type="default" size="mini" @click="switchMode('day')">按天</button> <button type="default" size="mini" @click="switchMode('week')">按周</button> <button type="default" size="mini" @click="switchMode('month')">按月</button> <!-- 渲染具体时间单位列表 --> <scroll-view scroll-x v-if="mode === 'day' || mode === 'week'" style="white-space: nowrap;"> <block v-for="(item, index) in dateList" :key="index"> <text>{{ item.label }}</text> </block> </scroll-view> <calendar v-if="mode === 'month'" /> </view> </template> <script> export default { data() { return { currentDate: new Date().toISOString().slice(0, 10), mode: "day", dateList: [] }; }, methods: { bindDateChange(e) { this.currentDate = e.detail.value; // 更新对应的时间范围数据 this.updateDateRange(); }, switchMode(newMode) { this.mode = newMode; // 根据新的模式更新时间范围的数据 this.updateDateRange(); }, updateDateRange() { const today = new Date(this.currentDate); let daysCount = 7; // 默认一周有七天 if (this.mode === "day") { daysCount = 1; } else if (this.mode === "month") { daysCount = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate(); // 获取当月总天数 } // 构建日期标签列表 this.dateList = Array.from({ length: daysCount }, (_, i) => ({ label: `${today.getDate() + i} ${(new Date(today.setDate(today.getDate() + 1))).toLocaleDateString()}` })); } }, mounted() { this.updateDateRange(); } }; </script> ``` 上述代码片段展示了如何构建一个简单的日期选择器组件，它支持三种不同的查看方式——单日、整周以及整个月份，并且能够动态调整所呈现的具体时间段。通过使用 `<picker>` 组件获取用户选定的确切日期，并据此计算出相应的日期序列；同时提供了三个按钮让用户可以选择想要浏览的时间粒度[^2]。 此外，还可以考虑加入更多样式美化工作以提高用户体验感，比如设置更好的视觉效果或者增加动画过渡等特性。