Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
dateArr: [],
nowMonth: '',
nowMonthArr: [],
todayTime: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()).getTime(),
selectStartDate: '',
selectEndDate: '',
showDialog: false,
showInner:false
},
observers: {
'selectStartDate': function(date) {
if (date) {
const startDateArr = date.split('-')
this.setData({
startDateTime: new Date(startDateArr[0], startDateArr[1] - 1, startDateArr[2]).getTime()
})
} else {
this.setData({
startDateTime: 0
})
}
},
'selectEndDate': function(date) {
if (date) {
const startDateArr = date.split('-')
this.setData({
endDateTime: new Date(startDateArr[0], startDateArr[1] - 1, startDateArr[2]).getTime()
})
} else {
this.setData({
endDateTime: 0
})
}
},
'showDialog': function(val) {
wx.nextTick(() => {
this.setData({
showInner: val
})
})
}
},
/**
* 组件的方法列表
*/
methods: {
// 选择
selectDay(e) {
const time = e.target.dataset.time
if (time) {
const date = new Date(time)
if (this.data.selectStartDate && this.data.selectEndDate) {
this.setData({
selectStartDate: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(),
selectEndDate: ''
})
} else if (this.data.selectStartDate) {
const temArr = this.data.selectStartDate.split('-')
const startTime = new Date(temArr[0], temArr[1] - 1, temArr[2]).getTime()
if (time < startTime) { // 结束时间比开始时间早
this.setData({
selectStartDate: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(),
selectEndDate: temArr[0] + '-' + temArr[1] + '-' + temArr[2]
})
} else {
this.setData({
selectEndDate: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
})
}
} else {
this.setData({
selectStartDate: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
})
}
}
},
// 上一年
prevYear() {
this.getDate([this.data.nowMonthArr[0] - 1, this.data.nowMonthArr[1]])
},
// 下一年
nextYear() {
this.getDate([this.data.nowMonthArr[0] + 1, this.data.nowMonthArr[1]])
},
// 上个月
prevMonth() {
if (this.data.nowMonthArr[1] === 1) {
this.getDate([this.data.nowMonthArr[0] - 1, 12])
} else {
this.getDate([this.data.nowMonthArr[0], this.data.nowMonthArr[1] - 1])
}
},
// 下个月
nextMonth() {
if (this.data.nowMonthArr[1] === 12) {
this.getDate([this.data.nowMonthArr[0] + 1, 1])
} else {
this.getDate([this.data.nowMonthArr[0], this.data.nowMonthArr[1] + 1])
}
},
getDate(startDateArr) {
const startMonth = new Date(startDateArr[0], startDateArr[1] - 1, 1)
const monthLength = new Date(startDateArr[0], startDateArr[1], 0).getDate()
const nextMonth = new Date(startDateArr[0], startDateArr[1], 1)
const prevMonth = new Date(startDateArr[0], startDateArr[1] - 1, 0)
const prevMonthLenth = new Date(startMonth.getFullYear(), startMonth.getMonth(), 0).getDate()
const weekStart = startMonth.getDay() // 1号是周几
const dateArr = []
let dateWeek = []
if (weekStart > 0) {
for (let i = 1; i <= weekStart; i++) {
dateWeek.push({
day: prevMonthLenth - weekStart + i,
month: prevMonth.getMonth() + 1,
year: prevMonth.getFullYear(),
time: new Date(prevMonth.getFullYear(), prevMonth.getMonth(), prevMonthLenth - weekStart + i).getTime(),
status: 'prev'
})
}
}
let date = 1 // 当前日期
for (let i = weekStart; i < 7;) {
dateWeek[i] = {
day: date,
month: Number(startDateArr[1]),
year: Number(startDateArr[0]),
time: new Date(startDateArr[0], startDateArr[1] - 1, date).getTime(),
status: 'now'
}
date++
if (date > monthLength) {
const len = dateWeek.length
if (len < 7) {
for(let j = 1; j <= 7 - len; j++) {
dateWeek.push({
day: j,
month: nextMonth.getMonth() + 1,
year: nextMonth.getFullYear(),
time: new Date(nextMonth.getFullYear(), nextMonth.getMonth(), j).getTime(),
status: 'next'
})
}
}
dateArr.push(dateWeek)
dateWeek = []
i = 7
} else if (i === 6) {
dateArr.push(dateWeek)
dateWeek = []
i = 0
} else {
i++
}
}
this.setData({
dateArr: dateArr,
nowMonth: startDateArr[0] + ' 年 ' + startDateArr[1] + ' 月',
nowMonthArr: [Number(startDateArr[0]), Number(startDateArr[1])]
})
},
show(dateArr) {
if (dateArr.length) {
this.getDate(dateArr[0].split('-'))
this.setData({
selectStartDate: dateArr[0],
selectEndDate: dateArr[1],
showDialog: true
})
} else {
const date = new Date()
this.getDate((date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + 1).split('-'))
this.setData({
showDialog: true,
selectStartDate: '',
selectEndDate: ''
})
}
},
cancle() {
this.setData({
showDialog: false
})
},
submit() {
if (this.data.selectEndDate && this.data.selectStartDate) {
this.triggerEvent('selected', [this.data.selectStartDate, this.data.selectEndDate])
} else if (this.data.selectStartDate) {
this.triggerEvent('selected', [this.data.selectStartDate, this.data.selectStartDate])
} else if (this.data.selectEndDate) {
this.triggerEvent('selected', [this.data.selectEndDate, this.data.selectEndDate])
} else {
this.triggerEvent('selected', [])
}
this.setData({
showDialog: false
})
}
}
})
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
适用于微信小程序的组件,主要是选择年月日的范围,可通过箭头选择上一年下一年,上一月下一月。并进行了日期校验,若开始日期晚于结束日期,则回自动切换开始日期为结束日期,同时,结束日期变为开始日期。 可以访问微信小程序预览效果,复制下面内容,在微信端打开即可。 #小程序://马家三艳/cc4LronIXlWadEH 若上述地址打不开,微信搜索“马家三艳”小程序,打开选择日期即可查看。
资源推荐
资源详情
资源评论
收起资源包目录
微信小程序-日期选择组件.rar (15个子文件)
微信小程序-日期选择组件
sitemap.json 191B
project.private.config.json 341B
pages
index
index.wxml 307B
index.js 1KB
index.json 125B
index.wxss 881B
.eslintrc.js 587B
app.json 325B
project.config.json 556B
app.js 364B
app.wxss 0B
components
b-e-date
index.wxml 2KB
index.js 6KB
index.json 48B
index.wxss 4KB
共 15 条
- 1
资源评论
syksdl
- 粉丝: 97
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功