⼩程序⽇历组件（选择区间⽇期）
⼩程序⽇历组件（选择区间⽇期）
.wxml
<view class="calendar">
<view class="calendar_header_box">
<view class="cuIcon-back btn btnl {{prevBtn ? '' : 'cannot_edit'}}"bindtap="prevMonth"></view>
<view class="time">{{year}}年{{month}}⽉</view>
<view class="cuIcon-right btn btnr {{nextBtn ? '' : 'cannot_edit'}}"bindtap="nextMonth"></view>
</view>
<!--周标题-->
<view class="calendar_weeks">
<text for="{{weekTitle}}"key="index">{{item}}</text>
</view>
<!--⽇期-->
<view class="calendar_days">
<block for="{{days_array}}"for-item="item"key="index"for-index="i">
<!--⽇期⾏-->
<view class="calendar_row">
<block for="{{days_array[i]}}"for-item="dayItem"key="index">
<view class="calendar_cell {{dayItem.abled ? '' : 'cannot_edit'}} {{dayItem.isStart || dayItem.isEnd || dayItem.isToday ? 'flag_color' : ''}}"bindta p="dayClick"data-day="{{dayItem}}">
{{dayItem.day}}
<view class="flag_style {{dayItem.isToday ? 'today' : ''}} {{dayItem.isStart || dayItem.isEnd ? 'select_time' : ''}}"if="{{dayItem.isStart || dayI tem.isEnd || dayItem.isToday}}"></view>
<view class="during_style"if="{{dayItem.during && dunringStyle}}"></view>
<view class="during_left"if="{{dayItem.isStart && dunringStyle}}"></view>
<view class="during_right"if="{{dayItem.isEnd && dunringStyle}}"></view>
</view>
</block>
</view>
</block>
</view>
</view>
.wxss
.calendar{
width: 750rpx;
height: 650rpx;
}
.calendar .calendar_header_box{
width: 750rpx;
height: 60rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 42rpx;
color: #333333;
text-align: center;
margin-bottom: 30rpx;
}
.calendar .calendar_header_box .btn{
width: 250rpx;
}
.calendar .calendar_header_box .btnl{
text-align: right;
}
.calendar .calendar_header_box .btnr{
text-align: left;
}
.calendar .calendar_header_box .time{
width: 270rpx;
position: relative;
top: 5rpx;
margin: 0 20rpx;
}
.calendar .calendar_weeks{
width: 750rpx;
height: 80rpx;
padding: 0 60rpx;
display: flex;
justify-content: space-between;
align-items: center;
color: #999999;
font-size: 37rpx;
}
.calendar .calendar_days{
width: 750rpx;
padding: 0 30rpx;
}
.
calendar .calendar_days .calendar_row{
width: 100%;
height: 80rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.calendar .calendar_days .calendar_row .calendar_cell{ position: relative;
height: 80rpx;
flex: 1;
text-align: center;
line-height: 80rpx;
font-size: 34rpx;
}
.calendar .calendar_days .calendar_row .calendar_cell .flag_style{ width: 60rpx;
height: 60rpx;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform:translateX(-50%)translateY(-50%);
z-index: -1;
}
.calendar .calendar_days .calendar_row .calendar_cell .during_style{ width: 110rpx;
height: 60rpx;
border-radius: 10rpx;
background-color: #D1F9D3;
position: absolute;
left: 50%;
top: 50%;
transform:translateX(-50%)translateY(-50%);
z-index: -2;
}
.
calendar .calendar_days .calendar_row .calendar_cell .during_left{
height: 60rpx;
background-color: #D1F9D3;
position: absolute;
left: 50%;
top: 50%;
transform:translateY(-50%);
z-index: -2;
border-radius: 10rpx;
}
.calendar .calendar_days .calendar_row .calendar_cell .during_right{ width: 55rpx;
height: 60rpx;
background-color: #D1F9D3;
position: absolute;
right: 50%;
top: 50%;
transform:translateY(-50%);
z-index: -2;
border-radius: 10rpx;
}
.cannot_edit{
color: #e7e7e7;
}
.today{
background-color:var(--basecolor);
}
.select_time{
background-color: #5BAC60;
}
.flag_color{
color: #ffffff;
}
.js
Component({
properties:{
// 时间的性质 ‘start’ 选择开始时间 ‘end’ 选择结束时间
type:{
type: String,
value:'',
observer(newVal, oldVal, changedPath){
this.setData({
typeOfTime: newVal,
days_array:this.setCalendarData(ar,h) })
}
},
// 开始时间
start:{
type: String,
value:'',
observer(newVal, oldVal, changedPath){
this.setData({
timeStart:new Date(newVal).getTime()
})
}
},
/
/ 结束时间
end:{
type: String,
value:'',
observer(newVal, oldVal, changedPath){
this.setData({
timeEnd:new Date(newVal).getTime()
})
}
}
},
data:{
year:new Date().getFullYear(),// 年份
month:new Date().getMonth()+1,// ⽉份
day:new Date().getDate(),// 天
days_array:[],// ⽇期数组
weekTitle:['⽇','⼀','⼆','三','四','五','六'],// 星期
max_year:2099,// 最⼤年份
max_month:12,// 最⼤⽉份
min_year:1900,// 最⼩年份
min_month:1,// 最⼩⽉份
toyear:new Date().getFullYear(),// 今年
tomonth:new Date().getMonth()+1,// 今⽉
today:new Date().getDate(),// 今天
todayStamp:new Date().setHours(8,0,0,0),// 今天的时间戳
typeOfTime:'',// 时间的性质 ‘start’ 选择开始时间 ‘end’ 选择结束时间
timeStart:null,// 开始服务时间戳
timeEnd:null,// 结束服务时间戳
dunringStyle:false,// 是否显⽰区间样式
prevBtn:true,// 上个⽉是否可点
nextBtn:true// 下个⽉是否可点
},
methods:{
/
/ ⽇历显⽰循环
setCalendarData:function(year, month){
// 本⽉第⼀天是周⼏，0是星期⽇，6是星期六
const empty_days_count =new Date(year, month -1,1).getDay()
let empty_days =new Array
const prev_month = month -1==0?12: month -1// 上个⽉的⽉份数const prev_year = month -1==0?ar -1:ar
// 上个⽉的⽇期
for(let i =0; i < empty_days_count; i++){
empty_days.push({
day:-1,
month: prev_month,
year: prev_year,
info:'prev',
date:`${prev_year}-${prev_month<10?`0${prev_month}`:prev_month}`        })
}
// 下个⽉的⽇期
const last_day = new Date(year, month, 0) // 本⽉最后⼀天
const days_count = Date() // 本⽉最后⼀天是⼏号
const last_date = Day() // 本⽉最后⼀天是星期⼏
const next_month = month + 1 == 13 ? 1 : month + 1 // 下个⽉的⽉份数      const next_year = month + 1 == 13 ? ar + 1 : ar      let empty_days_last = new Array
for (let i = 0; i < 6 - last_date; i++) {
empty_days_last.push({
day: -2,
month: next_month,
year: next_year,
info: 'next',
date:`${next_year}-${next_month<10?`0${next_month}`:next_month}`        })
}
// 本⽉的⽇期
let temp = new Array
for (let i = 1; i <= days_count; i++) {
temp.push({
day: i,
month: month,
year: year,
info: 'current',
date:`${year}-${month<10?`0${month}`:month}-${i<10?`0${i}`:i}`,typeof array
})
}
let days = at(temp, empty_days_last) // 上个⽉ + 本⽉ + 下个⽉
// 显⽰下⽉的⽇期
let index = days.findIndex(element => { return element.day == -2 })
if (index != -1) {
const length = days.length
const count = length - index
for (let i = 1; i <= count; i++) {
days[index + i - 1].day = i
days[index+i-1].date = `${days[index+i-1].date}-${i<10?`0${i}`:i}`
}
}
// 显⽰上⽉的⽇期
index = days.findIndex(element => { return element.day == 1 }) - 1
if (index != -1) {
// 获取上个⽉有多少天
const last_month_day = new Date(year, month - 1, 0).getDate()
for (let i = 0; i <= index; i++) {
days[i].day = last_month_day - index + i
days[i].date = `${days[i].date}-${days[i].day<10?`0${days[i].day}`:days[i].day}`
}
}
days.forEach(item => {
item.stamp = new Date(item.date).getTime()
// 判断是否是今天
if (item.stamp == dayStamp) {
item.isToday = true
} else {
item.isToday = false
}
// 判断是否可操作
if (pe == 'start') {
if (item.stamp < dayStamp || item.stamp > (this.data.timeEnd || 9999999999999)) {            item.abled = false
} else {
item.abled = true
}
} else if (pe == 'end') {
if (item.stamp < dayStamp || item.stamp < (this.data.timeStart || 0)) {
item.abled = false
} else {
item.abled = true
}
} else {
if (item.stamp < dayStamp) {
item.abled = false
} else {
item.abled = true
}
}
// 判断是否为开始⽇期或结束⽇期
if (item.stamp == this.data.timeStart) {
item.isStart = true
} else {
item.isStart = false
}
if (item.stamp == this.data.timeEnd) {
item.isEnd = true
} else {
item.isEnd = false
}
// 判断是否为开始与结束之间的值
if (this.data.timeEnd && this.data.timeStart) {
if (item.stamp < this.data.timeEnd && item.stamp > this.data.timeStart) {
item.during = true
} else {
item.during = false
}
} else {
item.during = false
}
})
// 判断是否显⽰区间样式
if (this.data.timeStart && this.data.timeEnd && this.data.timeStart != this.data.timeEnd) {
this.setData({
dunringStyle: true
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。