基于uniapp的日期选择器

1. <view class="content">
2.     <view class="dateWrap" @click="getDate()">
3.                 <u-icon name="calendar" color="#2979ff" size="24"></u-icon>
4.                 <u-input class="iptCfg" placeholder="请选择考勤日期" :value="selectMonth" suffixIcon="arrow-down" readonly />
5.     </view>
6.         <scroll-view scroll-x="true" :scroll-left="scrollLeft">
7.                 <view class="date-content">
8.                         <view v-for="(dateItem, index) in dateList" :key="index" class="date-item" :class="{ selected: index == selectIndex }" @click="handleDateSelect(index)">
9.                         <view v-if="dateItem.isToday" class="todayText">
10.                                     <view class="circle"></view>今天
11.                                 </view>
12.                                 <view v-else>{{ dateItem.week }}</view>
13.                                 <view class="day-number">{{ dateItem.day }}</view>
14.                         </view>
15.                 </view>
16.         </scroll-view>
17. </view>
18. <u-datetime-picker :show="visible" v-model="value" mode="year-month" :maxDate="maxDate" :formatter="formatter" @confirm="confirm" @close="close" :closeOnClickOverlay="true"></u-datetime-picker>
20. <script>
22. mounted() {
23.         this.initDate();
24. },
25. methods: {
26.     //初始化日期,实现今天的日期高亮
27.     initDate() {
28.             const now = new Date();
29.             this.currentYear = now.getFullYear();
30.             this.currentMonth = now.getMonth() + 1;
31.             this.selectMonth = this.$moment().format('YYYY-MM');
32.             this.form.signDate = this.$moment().format('YYYY-MM-DD');               
33.             this.generateDateList();//获取当前月份的所有日期
34.     },
35.     // 生成日期列表（当月所有日期）
36.         generateDateList() {
37.                 const currentMonthStart = this.$moment([this.currentYear, this.currentMonth - 1]);
38.                 const today = this.$moment();
39.                 const lastDay = currentMonthStart.clone().endOf('month').date();
40.                 const dateList = [];
41.                 for (let i = 1; i <= lastDay; i++) {
42.                         const d = currentMonthStart.clone().date(i);
43.                         const day = d.date();
44.                         const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][d.day()];
45.                         const isToday = d.isSame(today, 'day');
46.                         dateList.push({
47.                                 day,
48.                                 week,
49.                                 isToday,
50.                                 isSelected: false
51.                         });
52.                 }
53.                 this.dateList = dateList;
54.                 this.calculateScrollLeft();//定位到当前日期所在位置
55.         },
56.     // 计算滚动位置，定位到今天的日期
57.         calculateScrollLeft() {
58.                 const todayIndex = this.dateList.findIndex(item => item.isToday);
59.                 if (todayIndex !== -1) {
60.                     this.selectIndex = todayIndex;//当前日期高亮赋值
61.                     // 每个日期项宽度为 100rpx
62.                     this.scrollLeft = todayIndex * 100;
63.                     this.form.signDate = this.selectMonth + '-' + this.dateList[todayIndex].day;
64.                     this.getList();//获取选择日期后的列表数据
65.                 } else {
66.                         this.selectIndex = 0;//非当前月份时,默认高亮第一天
67.                         this.form.signDate = this.selectMonth + '-' + this.dateList[0].day;//列表传参
68.                         this.getList();
69.                 }
70.         },
71.     // 选择日--切换高亮
72.         handleDateSelect(index) {
73.                 this.selectIndex = index;
74.                 this.dateList.forEach((item) => {
75.                         item.isSelected = false;
76.                 });
77.                 this.dateList[index].isSelected = true;
78.                 this.form.signDate = this.selectMonth + '-' + this.dateList[index].day;
79.                 this.getList();
80.         },
81.         //选择月份
82.         confirm(e) {
83.                 this.currentYear = this.$moment(e.value).format('YYYY');
84.                 this.currentMonth = this.$moment(e.value).format('MM');
85.                 this.selectMonth = this.$moment(e.value).format('YYYY-MM');
86.                 this.form.signDate = this.selectMonth + '-' + '01';
87.                 this.visible = false;
88.                 this.generateDateList();//选择月份,重新处理获取所属日
89.         },
90.     formatter(type, value) {
91.             if (type === 'year') {
92.                     return `${value}年`
93.                 }
94.                 if (type === 'month') {
95.                         return `${value}月`
96.                 }
97.                 if (type === 'day') {
98.                         return `${value}日`
99.                 }
100.                 return value
101.         },
102.         //日期弹框
103.         getDate() {
104.                 this.defaultDate = this.form.signDate ? this.form.signDate : '';
105.                 this.visible = true;
106.         },
107.     //逻辑处理
108.     getList() {
110.     }
111. }
113. <style>
114.     .date-content {
115.                 width: 100%;
116.                 display: flex;
117.                 overflow-x: auto;
118.                 margin-top: 10rpx;
119.         }
121.         .date-item {
122.                 display: flex;
123.                 flex-direction: column;
124.                 width: 200rpx;
125.                 align-items: center;
126.                 margin-right: 20rpx;
127.                 padding: 24rpx 20rpx;
128.                 background-color: #ffffff;
129.                 border-radius: 10rpx;
130.                 transition: background-color 0.3s;
131.         }
133.         .todayText {
134.                 position: relative;
136.                 .circle {
137.                         position: absolute;
138.                         top: -14rpx;
139.                         left: 20rpx;
140.                         width: 10rpx;
141.                         height: 10rpx;
142.                         background-color: red;
143.                         border-radius: 50%;
144.                 }
145.         }
147.         .date-item.today {
148.                 color: #fff;
149.                 background-color: #1989fa;
150.         }
152.         .date-item.selected {
153.                 color: #fff;
154.                 background-color: #1989fa;
155.         }
157.         .date-item.today text {
158.                 color: #ffffff;
159.         }
161.         .date-item text {
162.                 color: #606266;
163.                 font-size: 28rpx;
164.                 margin-bottom: 8rpx;
165.         }
167.         .day-number {
168.                 margin-top: 10rpx;
169.                 width: 60rpx;
170.                 text-align: center;
171.                 // color: #303133;
172.                 font-size: 36rpx;
173.                 font-weight: bold;
174.         }
175. </style>

复制代码

效果展示

---------可封装组件,后期再美满--------

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。