基于uniapp的日期选择器 - IT评测·应用市场-qidao123.com技术社区

<view class="content">
<view class="dateWrap" @click="getDate()">
<u-icon name="calendar" color="#2979ff" size="24"></u-icon>
<u-input class="iptCfg" placeholder="请选择考勤日期" :value="selectMonth" suffixIcon="arrow-down" readonly />
</view>
<scroll-view scroll-x="true" :scroll-left="scrollLeft">
<view class="date-content">
<view v-for="(dateItem, index) in dateList" :key="index" class="date-item" :class="{ selected: index == selectIndex }" @click="handleDateSelect(index)">
<view v-if="dateItem.isToday" class="todayText">
<view class="circle"></view>今天
</view>
<view v-else>{{ dateItem.week }}</view>
<view class="day-number">{{ dateItem.day }}</view>
</view>
</view>
</scroll-view>
</view>
<u-datetime-picker :show="visible" v-model="value" mode="year-month" :maxDate="maxDate" :formatter="formatter" @confirm="confirm" @close="close" :closeOnClickOverlay="true"></u-datetime-picker>
<script>
mounted() {
this.initDate();
},
methods: {
//初始化日期,实现今天的日期高亮
initDate() {
const now = new Date();
this.currentYear = now.getFullYear();
this.currentMonth = now.getMonth() + 1;
this.selectMonth = this.$moment().format('YYYY-MM');
this.form.signDate = this.$moment().format('YYYY-MM-DD');
this.generateDateList();//获取当前月份的所有日期
},
// 生成日期列表（当月所有日期）
generateDateList() {
const currentMonthStart = this.$moment([this.currentYear, this.currentMonth - 1]);
const today = this.$moment();
const lastDay = currentMonthStart.clone().endOf('month').date();
const dateList = [];
for (let i = 1; i <= lastDay; i++) {
const d = currentMonthStart.clone().date(i);
const day = d.date();
const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][d.day()];
const isToday = d.isSame(today, 'day');
dateList.push({
day,
week,
isToday,
isSelected: false
});
}
this.dateList = dateList;
this.calculateScrollLeft();//定位到当前日期所在位置
},
// 计算滚动位置，定位到今天的日期
calculateScrollLeft() {
const todayIndex = this.dateList.findIndex(item => item.isToday);
if (todayIndex !== -1) {
this.selectIndex = todayIndex;//当前日期高亮赋值
// 每个日期项宽度为 100rpx
this.scrollLeft = todayIndex * 100;
this.form.signDate = this.selectMonth + '-' + this.dateList[todayIndex].day;
this.getList();//获取选择日期后的列表数据
} else {
this.selectIndex = 0;//非当前月份时,默认高亮第一天
this.form.signDate = this.selectMonth + '-' + this.dateList[0].day;//列表传参
this.getList();
}
},
// 选择日--切换高亮
handleDateSelect(index) {
this.selectIndex = index;
this.dateList.forEach((item) => {
item.isSelected = false;
});
this.dateList[index].isSelected = true;
this.form.signDate = this.selectMonth + '-' + this.dateList[index].day;
this.getList();
},
//选择月份
confirm(e) {
this.currentYear = this.$moment(e.value).format('YYYY');
this.currentMonth = this.$moment(e.value).format('MM');
this.selectMonth = this.$moment(e.value).format('YYYY-MM');
this.form.signDate = this.selectMonth + '-' + '01';
this.visible = false;
this.generateDateList();//选择月份,重新处理获取所属日
},
formatter(type, value) {
if (type === 'year') {
return `${value}年`
}
if (type === 'month') {
return `${value}月`
}
if (type === 'day') {
return `${value}日`
}
return value
},
//日期弹框
getDate() {
this.defaultDate = this.form.signDate ? this.form.signDate : '';
this.visible = true;
},
//逻辑处理
getList() {
}
}
<style>
.date-content {
width: 100%;
display: flex;
overflow-x: auto;
margin-top: 10rpx;
}
.date-item {
display: flex;
flex-direction: column;
width: 200rpx;
align-items: center;
margin-right: 20rpx;
padding: 24rpx 20rpx;
background-color: #ffffff;
border-radius: 10rpx;
transition: background-color 0.3s;
}
.todayText {
position: relative;
.circle {
position: absolute;
top: -14rpx;
left: 20rpx;
width: 10rpx;
height: 10rpx;
background-color: red;
border-radius: 50%;
}
}
.date-item.today {
color: #fff;
background-color: #1989fa;
}
.date-item.selected {
color: #fff;
background-color: #1989fa;
}
.date-item.today text {
color: #ffffff;
}
.date-item text {
color: #606266;
font-size: 28rpx;
margin-bottom: 8rpx;
}
.day-number {
margin-top: 10rpx;
width: 60rpx;
text-align: center;
// color: #303133;
font-size: 36rpx;
font-weight: bold;
}
</style>

复制代码