| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 |
- // pages/clock/clock-tongji/calendar/calendar.js
- Component({
- /**
- * 组件的属性列表
- */
- properties: {
- },
- /**
- * 组件的初始数据
- */
- data: {
- weeks: ["日", "一", "二", "三", "四", "五", "六"],
- // 所选择日期
- selectDate: {
- 'year': new Date().getFullYear(),
- 'month': new Date().getMonth() + 1,
- 'date': new Date().getDate(),
- },
- calendarTitle: '',
- // 日期list
- calendarDays: []
- },
- ready() {
- this.getMonthDaysCurrent(new Date())
- },
- /**
- * 组件的方法列表
- */
- methods: {
- // 所选时间对应月份日期
- getMonthDaysCurrent(e) {
- let year = e.getFullYear()
- let month = e.getMonth() + 1
- let date = e.getDate()
- let day = e.getDay() // 周几
- let days = new Date(year, month, 0).getDate() //当月天数(即下个月0号=当月最后一天)
- let firstDayDate = new Date(year, month - 1, 1) // 当月1号
- let firstDay = firstDayDate.getDay() //当月1号对应的星期
- let lastDate = new Date(year, month - 1, days) //当月最后一天日期
- let lastDay = lastDate.getDay() //当月最后一天对应的星期
- // 更新选择日期
- this.data.selectDate = {
- 'year': year,
- 'month': month,
- 'date': date,
- }
- // 更新顶部显示日期
- this.setData({
- calendarTitle: year + "/" + (month > 9 ? month : "0" + month) + "/" + (date > 9 ? date : "0" + date)
- })
- let calendarDays = []
- // 上个月显示的天数及日期
- for (let i = firstDay - 1; i >= 0; i--) {
- let date = new Date(year, month - 1, -i)
- //console.log(date, date.getMonth() + 1)
- calendarDays.push({
- 'year': date.getFullYear(),
- 'month': date.getMonth() + 1,
- 'date': date.getDate(),
- 'day': date.getDay(),
- 'current': false,
- 'selected': false
- })
- }
- // 当月显示的日期
- for (let i = 1; i <= days; i++) {
- calendarDays.push({
- 'year': year,
- 'month': month,
- 'date': i,
- 'day': new Date(year, month - 1, i).getDay(),
- 'current': true,
- 'selected': i == date // 判断当前日期
- })
- }
- // 下个月显示的天数及日期
- for (let i = 1; i < 7 - lastDay; i++) {
- let date = new Date(year, month, i)
- //console.log(date, date.getMonth() + 1)
- calendarDays.push({
- 'year': date.getFullYear(),
- 'month': date.getMonth() + 1,
- 'date': date.getDate(),
- 'day': date.getDay(),
- 'current': false,
- 'selected': false
- })
- }
- console.log(calendarDays)
- this.setData({
- calendarDays: calendarDays
- })
- },
- // 手动选中日期
- clickDate(e) {
- let index = e.currentTarget.dataset.index
- let list = this.data.calendarDays
- for (let i = 0; i < list.length; i++) {
- list[i].selected = i == index
- if (i == index) {
- console.log(list[i], this.data.selectDate)
- // 如果选择日期不在当月范围内,则重新刷新日历数据
- if (list[i].year != this.data.selectDate.year || list[i].month != this.data.selectDate.month) {
- let date = new Date(list[i].year, list[i].month - 1, list[i].date)
- this.getMonthDaysCurrent(date)
- return
- }
- // 更新顶部显示日期
- this.setData({
- calendarTitle: list[i].year + "/" + (list[i].month > 9 ? list[i].month : "0" + list[i].month) + "/" + (list[i].date > 9 ? list[i].date : "0" + list[i].date)
- })
- }
- }
- this.setData({
- calendarDays: list
- })
- },
- }
- })
|