From 7c270da26650af8488ea4bb652c9f91e4b978734 Mon Sep 17 00:00:00 2001 From: likecodeboys <1239288387@qq.com> Date: Mon, 30 Jun 2025 19:14:28 +0800 Subject: [PATCH 01/13] =?UTF-8?q?feat:=20=E9=9B=8F=E5=BD=A2=E5=AE=8C?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/app.mpx | 3 +- example/common/config.ts | 3 +- example/pages/calendar-modal/README.md | 27 ++ example/pages/calendar-modal/index.mpx | 43 +++ .../calendar-modal/calendar-modal.ts | 323 ++++++++++++++++++ .../src/components/calendar-modal/index.mpx | 173 ++++++++++ .../src/components/calendar-modal/utils.ts | 97 ++++++ 7 files changed, 667 insertions(+), 2 deletions(-) create mode 100644 example/pages/calendar-modal/README.md create mode 100644 example/pages/calendar-modal/index.mpx create mode 100644 packages/mpx-cube-ui/src/components/calendar-modal/calendar-modal.ts create mode 100644 packages/mpx-cube-ui/src/components/calendar-modal/index.mpx create mode 100644 packages/mpx-cube-ui/src/components/calendar-modal/utils.ts diff --git a/example/app.mpx b/example/app.mpx index 407c8ab5..02091768 100644 --- a/example/app.mpx +++ b/example/app.mpx @@ -47,7 +47,8 @@ "./pages/float-ball/index", "./pages/rate/index", "./pages/switch/index", - "./pages/loading/index" + "./pages/loading/index", + "./pages/calendar-modal/index" ] } diff --git a/example/common/config.ts b/example/common/config.ts index 46ce2e1c..85405d7b 100644 --- a/example/common/config.ts +++ b/example/common/config.ts @@ -84,7 +84,8 @@ export default { 'picker-popup', 'cascade-picker-popup', 'date-picker-popup', - 'time-picker-popup' + 'time-picker-popup', + 'calendar-modal' ] } ], diff --git a/example/pages/calendar-modal/README.md b/example/pages/calendar-modal/README.md new file mode 100644 index 00000000..2d08f024 --- /dev/null +++ b/example/pages/calendar-modal/README.md @@ -0,0 +1,27 @@ +## cube-calendar + + + +### 介绍 + +加载，提供了可自定义大小的加载动画。 + + + +### 示例 + + + +### 基础用法 + +默认大小为`24px`，可通过`size`属性配置 + + + + +```vue + +``` + + + diff --git a/example/pages/calendar-modal/index.mpx b/example/pages/calendar-modal/index.mpx new file mode 100644 index 00000000..dac6c5b7 --- /dev/null +++ b/example/pages/calendar-modal/index.mpx @@ -0,0 +1,43 @@ + + + + + + + diff --git a/packages/mpx-cube-ui/src/components/calendar-modal/calendar-modal.ts b/packages/mpx-cube-ui/src/components/calendar-modal/calendar-modal.ts new file mode 100644 index 00000000..09e858c9 --- /dev/null +++ b/packages/mpx-cube-ui/src/components/calendar-modal/calendar-modal.ts @@ -0,0 +1,323 @@ +import { createComponent, set } from '@mpxjs/core' +import { + getWeekInMonth, + getWeeksCountInMonth, + getRangeDaysCount, + getDaysCountInMonth, + getDayInWeek, + getDateObj +} from './utils' + +const EVENT_SELECT = 'select' +const EVENT_CANCEL = 'cancel' + +createComponent({ + options: { + multipleSlots: true, + styleIsolation: 'shared' + }, + properties: { + min: { + type: Object, // todo 修改 + value: () => new Date(2016, 2, 12) + }, + // 可选日期的最大时间 + max: { + type: Object, + value: new Date(2017, 4, 2) + }, + // 可选的最大范围，0 为不限制 + maxRange: { + type: Number, + value: 30 + }, + // 选择开始、结束时间时展示tip + showTip: { + type: Boolean, + value: true + }, + // 是否滚动到底部 + scrollToEnd: { + type: Boolean, + value: true + }, + // 日期默认值，区间选择Array格式 + defaultDate: { + type: Array, + value: [] + }, + height: { + type: String, + value: '300px' + } + }, + data: { + scrollEvents: ['scroll'], + days: ['日', '一', '二', '三', '四', '五', '六'], + dateList: [] as any[], + selectDateSet: [] as any[], // 记录已选起始和结束的时间 + dateClass: '', + errTipTxt: '最多选择30天', + angleOffset: {}, + isVisible: true, + testData: [] as any[] + }, + watch: { + selectDateSet(v) { + const startDate = v[0] && v[0].date + const endDate = v.length > 1 ? v[v.length - 1].data : null + this.$emit( + 'dateChange', + { + len: v.length, + startDate, + endDate + }) + } + }, + lifetimes: { + ready() { + this.getRangeDateArray() + this.reset(this.defaultDate) + } + }, + methods: { + // @vuese + // 显示 + show() { + if (this.isVisible) return + this.$nextTick(() => { + this.isVisible = true + }) + }, + // @vuese + // 隐藏 + hide() { + this.isVisible = false + }, + maskClick() { + this.cancel() + }, + cancel() { + // 点击取消时触发 + this.triggerEvent(EVENT_CANCEL) + this.hide() + }, + itemClick(item, index) { + // 点击某项时触发 + this.triggerEvent(EVENT_SELECT, { item, index }) + this.hide() + }, + selectDate(item, index, event) { + let selectDaysCount = 0 + if (item.disable || !+item.date) return + + this.resetDateRender(item) + // this.dateList[1].dateArr[0][3].active = true + console.log('this.dateList[1].dateArr[0][3].active', this.dateList[1].dateArr[0][3]) + // set(this.dateList[1].dateArr[0][3], 'active', 'true') + this.$forceUpdate({ + [`dateList[${1}].dateArr[0][3].active`]: true + }) + console.log('this.dateList[1].dateArr[0][3].active', this.dateList[1].dateArr[0][3]) + // 选择开始时间 + if (!this.selectDateSet.length) { + this.selectDateSet.push(item as never) + // this.$emit('select', 'start', item) + } else { + // 选择结束时间 + selectDaysCount = getRangeDaysCount(+(this.selectDateSet[0] as any).date, +item.date) + + if (this.maxRange && selectDaysCount > this.maxRange) { + // this.showErrToast(`最多选择${this.maxRange}天`) + return + } + if (selectDaysCount > 0) { + this.renderSelectedRangeDate(this.selectDateSet[0], item) + } + // this.$emit('select', 'end', item) + } + if (+item.date) { + item.active = !item.active + console.log('iem.date', item.active, item) + } + }, + reset(dateRange) { + if (dateRange && dateRange.length === 2) { + this.clear() + const startDateObj = getDateObj(dateRange[0]) + const endDateObj = getDateObj(dateRange[1]) + this.selectDateSet.push(startDateObj) + this.renderSelectedRangeDate(startDateObj, endDateObj) + // this.$set(this.selectDateSet[0], 'active', true) + set(this.selectDateSet[0], 'active', true) + // this.$set(this.selectDateSet[this.selectDateSet.length - 1], 'active', true) + set(this.selectDateSet[this.selectDateSet.length - 1], 'active', true) + } + }, + resetDateRender(item) { + if (this.selectDateSet.length && (this.selectDateSet.length >= 2 || +item.date <= +(this.selectDateSet[0] as any).date)) { + for (let i = 0; i < this.selectDateSet.length; i++) { + // this.$set(this.selectDateSet[i], 'dateClass', '') + set(this.selectDateSet[i], 'dateClass', '') + // 遍历重置样式后，清空数组 + if (i === this.selectDateSet.length - 1) { + this.selectDateSet.length = 0 + } + } + } + }, + getMonthDateGroup(year, month) { + let monthGroupIndex + let monthGroupData = '' as any + + monthGroupData = this.dateList.find((item :any, index) => { + if (item.year === year && item.month === month) { + monthGroupIndex = index + return item + } + return '' + }) + return { + data: monthGroupData, + index: monthGroupIndex + } + }, + renderSelectedRangeDate(startDateObj, endDateObj) { + let startDateWeekInMonth = startDateObj.weekInMonth + let endDateWeekInMonth = endDateObj.weekInMonth + let startDateInWeek = startDateObj.dayInWeek + const startMonthIndex = this.getMonthDateGroup(startDateObj.year, startDateObj.month).index + const endMonthIndex = this.getMonthDateGroup(endDateObj.year, endDateObj.month).index + let monthDateGroup + for (let currentMonthIndex = startMonthIndex; currentMonthIndex <= endMonthIndex; currentMonthIndex++) { + monthDateGroup = this.dateList[currentMonthIndex] + + if (currentMonthIndex !== startMonthIndex) { + startDateInWeek = 0 + startDateWeekInMonth = 0 + } else { + startDateWeekInMonth = startDateObj.weekInMonth + startDateInWeek = startDateObj.dayInWeek + } + endDateWeekInMonth = currentMonthIndex !== endMonthIndex + ? monthDateGroup.dateArr.length - 1 // 取该月最后一周 + : endDateObj.weekInMonth + + this.renderDateInOneMonth(startDateInWeek, monthDateGroup, startDateWeekInMonth, endDateWeekInMonth, endDateObj.date) + } + this.selectDateSet.length && this.selectDateSet.shift() + }, + renderDateInOneMonth(startDateInWeek, monthDateGroup, startDateWeekInMonth, endDateWeekInMonth, endDate) { + console.log('startDateInWeek', startDateInWeek, monthDateGroup, startDateWeekInMonth, endDateWeekInMonth, endDate) + let day = startDateInWeek + const rangeArr = [] + let weekDateGroup + let dateClass + const endDateTimestamp = endDate.setHours(0, 0, 0, 0) + for (let week = startDateWeekInMonth; week <= endDateWeekInMonth; week++) { + weekDateGroup = monthDateGroup.dateArr[week] + + for (day; day <= 7; day++) { + if (day === 7) { + day = 0 + break + } + + // 渲染开始日期样式 + if (+weekDateGroup[day].date === (this.selectDateSet[0] as any).date.setHours(0, 0, 0, 0)) { + // this.setData(weekDateGroup[day], 'dateClass', 'start-date') + weekDateGroup[day].dateClass = 'start-date' + } + dateClass = weekDateGroup[day].dateClass && +weekDateGroup[day].date + ? `${weekDateGroup[day].dateClass} transition-date` + : 'transition-date' + // this.$set(weekDateGroup[day], 'dateClass', dateClass) + set(weekDateGroup[day], 'dateClass', dateClass) + console.log('dateClass', dateClass) + console.log('weekDateGroup[day]', weekDateGroup[day]) + rangeArr.push(weekDateGroup[day] as never) + + if (+weekDateGroup[day].date >= endDateTimestamp) { + break + } + } + } + this.selectDateSet = [...this.selectDateSet, ...rangeArr] + + // 渲染结束日期样式 + if (this.selectDateSet.length >= 2 && +weekDateGroup[day].date === +(this.selectDateSet[this.selectDateSet.length - 1] as any).date) { + // this.$set(weekDateGroup[day], 'dateClass', weekDateGroup[day].dateClass ? `${weekDateGroup[day].dateClass} end-date` : 'end-date') + set(weekDateGroup[day], 'dateClass', weekDateGroup[day].dateClass ? `${weekDateGroup[day].dateClass} end-date` : 'end-date') + } + }, + getRangeDateArray() { + // TODO: 校验传入的日期格式 + const minYear = this.min.getFullYear() + const maxYear = this.max.getFullYear() + const minMonth = this.min.getMonth() + 1 + const maxMonth = this.max.getMonth() + 1 + + if (+this.min >= +this.max) { + console.warn('传入props错误：时间的max值应大于min值！') + return + } + + for (let year = minYear; year <= maxYear; year++) { + const monthLowerLimit = year === minYear ? minMonth : 1 + const monthUpperLimit = year === maxYear ? maxMonth : 12 + for (let month = monthLowerLimit; month <= monthUpperLimit; month++) { + this.dateList.push(this.getCurrentMonthDaysArray(year, month) as never) + } + } + this.testData = this.dateList + }, + getCurrentMonthDaysArray(year, month) { + const days = getDaysCountInMonth(year, month) + const weeksCountInMonth = getWeeksCountInMonth(year, month) + + // 根据周数，初始化二维数组 + const daysArray = [] as any[] + for (let i = 0; i < weeksCountInMonth; i++) { + daysArray[i] = [] + } + + // 当月日历面板中的排列 + for (let day = 1; day <= days; day++) { + const currentWeekInMonth = getWeekInMonth(year, month, day) + daysArray[currentWeekInMonth - 1].push({ + day, + month: month, + year: year, + date: new Date(year, month - 1, day), + dayInWeek: getDayInWeek(year, month, day), + weekInMonth: currentWeekInMonth - 1, + active: false, + disable: +new Date(year, month - 1, day) < +this.min || +new Date(year, month - 1, day) > +this.max + }) + } + + this.fillDaysInMonth(year, month, days, weeksCountInMonth, daysArray) + + return { + title: `${year}年${month}月`, + dayCount: days, + year: year, + month: month, + dateArr: [...daysArray] + } + }, + fillDaysInMonth(year, month, days, weeksCountInMonth, daysArray) { + const firstDayInWeek = getDayInWeek(year, month, 1) + const lastDayInWeek = getDayInWeek(year, month, days) + if (firstDayInWeek !== 0) { + const fillArr = [...new Array(firstDayInWeek).fill({ date: '' })] + daysArray[0] = [...fillArr, ...daysArray[0]] + } + if (lastDayInWeek !== 6) { + const fillArr = [...new Array(6 - lastDayInWeek).fill({ date: '' })] + daysArray[weeksCountInMonth - 1] = [...daysArray[weeksCountInMonth - 1], ...fillArr] + } + } + } +}) diff --git a/packages/mpx-cube-ui/src/components/calendar-modal/index.mpx b/packages/mpx-cube-ui/src/components/calendar-modal/index.mpx new file mode 100644 index 00000000..7c7de280 --- /dev/null +++ b/packages/mpx-cube-ui/src/components/calendar-modal/index.mpx @@ -0,0 +1,173 @@ + + + + + + + diff --git a/packages/mpx-cube-ui/src/components/calendar-modal/utils.ts b/packages/mpx-cube-ui/src/components/calendar-modal/utils.ts new file mode 100644 index 00000000..24dd32ae --- /dev/null +++ b/packages/mpx-cube-ui/src/components/calendar-modal/utils.ts @@ -0,0 +1,97 @@ +/** + * 获得某天在当月是第几周 + * @param a + * @param b + * @param c + * @returns {number} + */ +function getWeekInMonth(a, b, c) { + const date = new Date(a, parseInt(b) - 1, c) + const w = date.getDay() + const d = date.getDate() + return Math.ceil((d + 6 - w) / 7) +} + +/** + * 获取本月有几周 + * @param year + * @param month + * @returns {number} + */ +function getWeeksCountInMonth(year, month) { + const firstDayInWeek = getDayInWeek(year, month, 1) + const daysCountInMonth = getDaysCountInMonth(year, month) + let weekCount + + if (daysCountInMonth === 31 && (firstDayInWeek === 5 || firstDayInWeek === 6)) { + weekCount = 6 + } else if (daysCountInMonth === 30 && firstDayInWeek === 6) { + weekCount = 6 + } else if (daysCountInMonth === 28 && firstDayInWeek === 0) { + weekCount = 4 + } else { + weekCount = 5 + } + return weekCount +} + +/** + * 计算时间差（天数） + * @param startDate + * @param endDate + * @returns {number} + */ +function getRangeDaysCount(startDate, endDate) { + // TODO: + return Math.floor((endDate - startDate) / (24 * 3600 * 1000) + 1) +} + +/** + * 计算一个月有几天 + * @param year + * @param month + * @returns {number} + */ +function getDaysCountInMonth(year, month) { + return new Date(year, month, 0).getDate() +} + +/** + * 计算某天是周几 + * @param year + * @param month + * @param day + * @returns {number} + */ +function getDayInWeek(year, month, day) { + return new Date(`${year}/${month}/${day}`).getDay() +} + +/** + * 获取日期对象 + * @param date + * @returns {{date: *, month: number, year: number, day: number, dayInWeek: number, weekInMonth: number}} + */ +function getDateObj(date) { + const month = date.getMonth() + 1 + const year = date.getFullYear() + const day = date.getDate() + + return { + date, + month, + year, + day, + dayInWeek: getDayInWeek(year, month, day), + weekInMonth: getWeekInMonth(year, month, day) - 1 + } +} + +export { + getWeekInMonth, + getWeeksCountInMonth, + getRangeDaysCount, + getDaysCountInMonth, + getDayInWeek, + getDateObj +} From ffd4058ab1189476ae0e592fb44d06ad30655e73 Mon Sep 17 00:00:00 2001 From: likecodeboys <1239288387@qq.com> Date: Wed, 2 Jul 2025 14:18:10 +0800 Subject: [PATCH 02/13] feat: update --- .../calendar-modal/calendar-modal.ts | 47 +++++++++---------- .../src/components/calendar-modal/index.mpx | 9 ++-- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/packages/mpx-cube-ui/src/components/calendar-modal/calendar-modal.ts b/packages/mpx-cube-ui/src/components/calendar-modal/calendar-modal.ts index 09e858c9..960daf12 100644 --- a/packages/mpx-cube-ui/src/components/calendar-modal/calendar-modal.ts +++ b/packages/mpx-cube-ui/src/components/calendar-modal/calendar-modal.ts @@ -1,4 +1,4 @@ -import { createComponent, set } from '@mpxjs/core' +import { createComponent } from '@mpxjs/core' import { getWeekInMonth, getWeeksCountInMonth, @@ -24,7 +24,7 @@ createComponent({ // 可选日期的最大时间 max: { type: Object, - value: new Date(2017, 4, 2) + value: new Date(2016, 2, 14) }, // 可选的最大范围，0 为不限制 maxRange: { @@ -73,6 +73,12 @@ createComponent({ startDate, endDate }) + }, + dateList: { + handler(newVal, oldVal) { + console.log(1) + }, + deep: true // 开启深度监听 } }, lifetimes: { @@ -113,16 +119,9 @@ createComponent({ if (item.disable || !+item.date) return this.resetDateRender(item) - // this.dateList[1].dateArr[0][3].active = true - console.log('this.dateList[1].dateArr[0][3].active', this.dateList[1].dateArr[0][3]) - // set(this.dateList[1].dateArr[0][3], 'active', 'true') - this.$forceUpdate({ - [`dateList[${1}].dateArr[0][3].active`]: true - }) - console.log('this.dateList[1].dateArr[0][3].active', this.dateList[1].dateArr[0][3]) // 选择开始时间 if (!this.selectDateSet.length) { - this.selectDateSet.push(item as never) + this.selectDateSet.push(item) // this.$emit('select', 'start', item) } else { // 选择结束时间 @@ -139,7 +138,8 @@ createComponent({ } if (+item.date) { item.active = !item.active - console.log('iem.date', item.active, item) + console.log('date', item) + console.log('date', this.dateList) } }, reset(dateRange) { @@ -149,17 +149,17 @@ createComponent({ const endDateObj = getDateObj(dateRange[1]) this.selectDateSet.push(startDateObj) this.renderSelectedRangeDate(startDateObj, endDateObj) - // this.$set(this.selectDateSet[0], 'active', true) - set(this.selectDateSet[0], 'active', true) - // this.$set(this.selectDateSet[this.selectDateSet.length - 1], 'active', true) - set(this.selectDateSet[this.selectDateSet.length - 1], 'active', true) + this.$set(this.selectDateSet[0], 'active', true) + // set(this.selectDateSet[0], 'active', true) + this.$set(this.selectDateSet[this.selectDateSet.length - 1], 'active', true) + // set(this.selectDateSet[this.selectDateSet.length - 1], 'active', true) } }, resetDateRender(item) { if (this.selectDateSet.length && (this.selectDateSet.length >= 2 || +item.date <= +(this.selectDateSet[0] as any).date)) { for (let i = 0; i < this.selectDateSet.length; i++) { - // this.$set(this.selectDateSet[i], 'dateClass', '') - set(this.selectDateSet[i], 'dateClass', '') + this.$set(this.selectDateSet[i], 'dateClass', '') + // set(this.selectDateSet[i], 'dateClass', '') // 遍历重置样式后，清空数组 if (i === this.selectDateSet.length - 1) { this.selectDateSet.length = 0 @@ -227,15 +227,14 @@ createComponent({ // 渲染开始日期样式 if (+weekDateGroup[day].date === (this.selectDateSet[0] as any).date.setHours(0, 0, 0, 0)) { // this.setData(weekDateGroup[day], 'dateClass', 'start-date') - weekDateGroup[day].dateClass = 'start-date' + this.$set(weekDateGroup[day], 'dateClass', 'start-date') } dateClass = weekDateGroup[day].dateClass && +weekDateGroup[day].date ? `${weekDateGroup[day].dateClass} transition-date` : 'transition-date' - // this.$set(weekDateGroup[day], 'dateClass', dateClass) - set(weekDateGroup[day], 'dateClass', dateClass) - console.log('dateClass', dateClass) - console.log('weekDateGroup[day]', weekDateGroup[day]) + this.$set(weekDateGroup[day], 'dateClass', dateClass) + console.log('groupDay', weekDateGroup[day]) + // set(weekDateGroup[day], 'dateClass', dateClass) rangeArr.push(weekDateGroup[day] as never) if (+weekDateGroup[day].date >= endDateTimestamp) { @@ -247,8 +246,8 @@ createComponent({ // 渲染结束日期样式 if (this.selectDateSet.length >= 2 && +weekDateGroup[day].date === +(this.selectDateSet[this.selectDateSet.length - 1] as any).date) { - // this.$set(weekDateGroup[day], 'dateClass', weekDateGroup[day].dateClass ? `${weekDateGroup[day].dateClass} end-date` : 'end-date') - set(weekDateGroup[day], 'dateClass', weekDateGroup[day].dateClass ? `${weekDateGroup[day].dateClass} end-date` : 'end-date') + this.$set(weekDateGroup[day], 'dateClass', weekDateGroup[day].dateClass ? `${weekDateGroup[day].dateClass} end-date` : 'end-date') + // set(weekDateGroup[day], 'dateClass', weekDateGroup[day].dateClass ? `${weekDateGroup[day].dateClass} end-date` : 'end-date') } }, getRangeDateArray() { diff --git a/packages/mpx-cube-ui/src/components/calendar-modal/index.mpx b/packages/mpx-cube-ui/src/components/calendar-modal/index.mpx index 7c7de280..52dd88ba 100644 --- a/packages/mpx-cube-ui/src/components/calendar-modal/index.mpx +++ b/packages/mpx-cube-ui/src/components/calendar-modal/index.mpx @@ -17,7 +17,7 @@ - {{item}} + {{item}} - {{item.active}} + + {{dateList[0].dateArr[1]}} 完成 @@ -152,7 +153,7 @@ display flex justify-content center align-items center - width 25px + width 50px height 25px border-radius 6px .date-left, From d7f145f6844fed183b54efd6313f7acd5689a5ff Mon Sep 17 00:00:00 2001 From: likecodeboys <1239288387@qq.com> Date: Fri, 1 Aug 2025 17:15:45 +0800 Subject: [PATCH 03/13] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../calendar-modal/customize-calendar.mpx | 84 +++++ example/pages/calendar-modal/index.mpx | 16 +- .../pages/calendar-modal/normal-calendar.mpx | 61 ++++ .../theme/components/calendar-modal.styl | 0 .../stylus/theme/components/calendar.styl | 28 ++ .../calendar-modal/calendar-modal.ts | 317 +++-------------- .../src/components/calendar-modal/index.mpx | 174 ++-------- .../src/components/calendar/calendar.ts | 321 ++++++++++++++++++ .../src/components/calendar/index.mpx | 186 ++++++++++ .../{calendar-modal => calendar}/utils.ts | 0 10 files changed, 761 insertions(+), 426 deletions(-) create mode 100644 example/pages/calendar-modal/customize-calendar.mpx create mode 100644 example/pages/calendar-modal/normal-calendar.mpx create mode 100644 packages/mpx-cube-ui/src/common/stylus/theme/components/calendar-modal.styl create mode 100644 packages/mpx-cube-ui/src/common/stylus/theme/components/calendar.styl create mode 100644 packages/mpx-cube-ui/src/components/calendar/calendar.ts create mode 100644 packages/mpx-cube-ui/src/components/calendar/index.mpx rename packages/mpx-cube-ui/src/components/{calendar-modal => calendar}/utils.ts (100%) diff --git a/example/pages/calendar-modal/customize-calendar.mpx b/example/pages/calendar-modal/customize-calendar.mpx new file mode 100644 index 00000000..d8cac981 --- /dev/null +++ b/example/pages/calendar-modal/customize-calendar.mpx @@ -0,0 +1,84 @@ + + + + + + + diff --git a/example/pages/calendar-modal/index.mpx b/example/pages/calendar-modal/index.mpx index dac6c5b7..d3fbd9f5 100644 --- a/example/pages/calendar-modal/index.mpx +++ b/example/pages/calendar-modal/index.mpx @@ -1,12 +1,8 @@ @@ -18,11 +14,6 @@ data: { }, methods: { - onSelect(selectData) { - const { item } = selectData.detail - this.selectContent = `Clicked: ${item.content}` - this.$refs.selectToast.show() - }, showCalendarModal() { this.$refs.calendarModal.show() } @@ -37,7 +28,8 @@ { "usingComponents": { "base-container": "../../components/base-container/index.mpx", - "cube-calendar-modal": "@mpxjs/mpx-cube-ui/src/components/calendar-modal/index" + "customize-calendar": "./customize-calendar.mpx", + "normal-calendar": "./normal-calendar.mpx" } } diff --git a/example/pages/calendar-modal/normal-calendar.mpx b/example/pages/calendar-modal/normal-calendar.mpx new file mode 100644 index 00000000..f91c33a2 --- /dev/null +++ b/example/pages/calendar-modal/normal-calendar.mpx @@ -0,0 +1,61 @@ + + + + + + + diff --git a/packages/mpx-cube-ui/src/common/stylus/theme/components/calendar-modal.styl b/packages/mpx-cube-ui/src/common/stylus/theme/components/calendar-modal.styl new file mode 100644 index 00000000..e69de29b diff --git a/packages/mpx-cube-ui/src/common/stylus/theme/components/calendar.styl b/packages/mpx-cube-ui/src/common/stylus/theme/components/calendar.styl new file mode 100644 index 00000000..64a63452 --- /dev/null +++ b/packages/mpx-cube-ui/src/common/stylus/theme/components/calendar.styl @@ -0,0 +1,28 @@ +// @type +$calendar-inner-padding := 0 10px 10px 0 // 容器内边距 +$calendar-inner-border-radius := 10px 10px 0 0 // 容器圆角 +$calendar-height := 320px // 容器高度 +$calendar-days-li-lh := 23px // 日期文案行高 +$calendar-days-li-padding := 10px 0 // 日期文案内边距 +$calendar-title-margin := 23px // 标题外边距 +$calendar-title-size := 22px // 标题字体大小 + +$calendar-render-wrapper-padding := 10px 0 10px 0 // 日期容器内边距 + + +$calendar-date-header-padding-top := 10px // 日期标题top内边距 +$calendar-date-header-padding-bottom := 10px // 日期标题bottom内边距 +$calendar-date-header-margin-bottom := 6px // 日期标题bottom外边距 +$calendar-date-header-size := 16px // 日期方格标题字体大小 +$calendar-date-li-min-height := 25px // 日期方格最小高度 +$calendar-date-li-margin-bottom := 8px // 日期方格底步外边距 +$calendar-date-li-size := 14px // 日期元素字体大小 + +$calendar-date-start-border-radius := 6px 0 0 6px // 日期元素开始时圆角 +$calendar-date-end-border-radius := 0 6px 6px 0 // 日期元素结束时圆角 +$calendar-date-width := 50px // 日期元素宽度 +$calendar-date-min-height := 25px // 日期元素最小高度 +$calendar-date-border-radius := 6px // 日期元素圆角 + + + diff --git a/packages/mpx-cube-ui/src/components/calendar-modal/calendar-modal.ts b/packages/mpx-cube-ui/src/components/calendar-modal/calendar-modal.ts index 960daf12..aff21d2b 100644 --- a/packages/mpx-cube-ui/src/components/calendar-modal/calendar-modal.ts +++ b/packages/mpx-cube-ui/src/components/calendar-modal/calendar-modal.ts @@ -1,41 +1,28 @@ import { createComponent } from '@mpxjs/core' -import { - getWeekInMonth, - getWeeksCountInMonth, - getRangeDaysCount, - getDaysCountInMonth, - getDayInWeek, - getDateObj -} from './utils' - -const EVENT_SELECT = 'select' -const EVENT_CANCEL = 'cancel' +import { visibilityMixin } from '../../common/mixins' +const EVENT_MASK_CLOSE = 'maskClose' createComponent({ + mixins: [visibilityMixin], options: { multipleSlots: true, styleIsolation: 'shared' }, properties: { min: { - type: Object, // todo 修改 - value: () => new Date(2016, 2, 12) + type: Number, + value: +new Date(2016, 2, 12) }, // 可选日期的最大时间 max: { - type: Object, - value: new Date(2016, 2, 14) + type: Number, + value: +new Date(2016, 4, 14) }, // 可选的最大范围，0 为不限制 maxRange: { type: Number, value: 30 }, - // 选择开始、结束时间时展示tip - showTip: { - type: Boolean, - value: true - }, // 是否滚动到底部 scrollToEnd: { type: Boolean, @@ -49,274 +36,50 @@ createComponent({ height: { type: String, value: '300px' - } - }, - data: { - scrollEvents: ['scroll'], - days: ['日', '一', '二', '三', '四', '五', '六'], - dateList: [] as any[], - selectDateSet: [] as any[], // 记录已选起始和结束的时间 - dateClass: '', - errTipTxt: '最多选择30天', - angleOffset: {}, - isVisible: true, - testData: [] as any[] - }, - watch: { - selectDateSet(v) { - const startDate = v[0] && v[0].date - const endDate = v.length > 1 ? v[v.length - 1].data : null - this.$emit( - 'dateChange', - { - len: v.length, - startDate, - endDate - }) }, - dateList: { - handler(newVal, oldVal) { - console.log(1) - }, - deep: true // 开启深度监听 + maskClosable: { + type: Boolean, + value: true + }, + isCustomizeShow: { + type: Boolean, + value: false + }, + customizeShowFunction: { + type: Object, + value: function (day, disable) { + return `
${day}
` + } + }, + title: { + type: String, + value: '选择日期' + }, + buttonText: { + type: String, + value: '完成' } }, - lifetimes: { - ready() { - this.getRangeDateArray() - this.reset(this.defaultDate) - } + data: { + isVisible: false, + lastValue: [] as any[] }, methods: { - // @vuese - // 显示 - show() { - if (this.isVisible) return - this.$nextTick(() => { - this.isVisible = true - }) - }, - // @vuese - // 隐藏 - hide() { - this.isVisible = false - }, maskClick() { - this.cancel() + this.triggerEvent(EVENT_MASK_CLOSE) + this.hide() }, cancel() { - // 点击取消时触发 - this.triggerEvent(EVENT_CANCEL) + if (!this.lastValue.length) { + this.lastValue = this.defaultDate + } this.hide() }, - itemClick(item, index) { - // 点击某项时触发 - this.triggerEvent(EVENT_SELECT, { item, index }) + confirm() { + const dateRange = this.$refs.calendar.getSelectDate() + this.lastValue = [dateRange[0].date, dateRange[1].date] + this.$emit('confirm', dateRange) this.hide() - }, - selectDate(item, index, event) { - let selectDaysCount = 0 - if (item.disable || !+item.date) return - - this.resetDateRender(item) - // 选择开始时间 - if (!this.selectDateSet.length) { - this.selectDateSet.push(item) - // this.$emit('select', 'start', item) - } else { - // 选择结束时间 - selectDaysCount = getRangeDaysCount(+(this.selectDateSet[0] as any).date, +item.date) - - if (this.maxRange && selectDaysCount > this.maxRange) { - // this.showErrToast(`最多选择${this.maxRange}天`) - return - } - if (selectDaysCount > 0) { - this.renderSelectedRangeDate(this.selectDateSet[0], item) - } - // this.$emit('select', 'end', item) - } - if (+item.date) { - item.active = !item.active - console.log('date', item) - console.log('date', this.dateList) - } - }, - reset(dateRange) { - if (dateRange && dateRange.length === 2) { - this.clear() - const startDateObj = getDateObj(dateRange[0]) - const endDateObj = getDateObj(dateRange[1]) - this.selectDateSet.push(startDateObj) - this.renderSelectedRangeDate(startDateObj, endDateObj) - this.$set(this.selectDateSet[0], 'active', true) - // set(this.selectDateSet[0], 'active', true) - this.$set(this.selectDateSet[this.selectDateSet.length - 1], 'active', true) - // set(this.selectDateSet[this.selectDateSet.length - 1], 'active', true) - } - }, - resetDateRender(item) { - if (this.selectDateSet.length && (this.selectDateSet.length >= 2 || +item.date <= +(this.selectDateSet[0] as any).date)) { - for (let i = 0; i < this.selectDateSet.length; i++) { - this.$set(this.selectDateSet[i], 'dateClass', '') - // set(this.selectDateSet[i], 'dateClass', '') - // 遍历重置样式后，清空数组 - if (i === this.selectDateSet.length - 1) { - this.selectDateSet.length = 0 - } - } - } - }, - getMonthDateGroup(year, month) { - let monthGroupIndex - let monthGroupData = '' as any - - monthGroupData = this.dateList.find((item :any, index) => { - if (item.year === year && item.month === month) { - monthGroupIndex = index - return item - } - return '' - }) - return { - data: monthGroupData, - index: monthGroupIndex - } - }, - renderSelectedRangeDate(startDateObj, endDateObj) { - let startDateWeekInMonth = startDateObj.weekInMonth - let endDateWeekInMonth = endDateObj.weekInMonth - let startDateInWeek = startDateObj.dayInWeek - const startMonthIndex = this.getMonthDateGroup(startDateObj.year, startDateObj.month).index - const endMonthIndex = this.getMonthDateGroup(endDateObj.year, endDateObj.month).index - let monthDateGroup - for (let currentMonthIndex = startMonthIndex; currentMonthIndex <= endMonthIndex; currentMonthIndex++) { - monthDateGroup = this.dateList[currentMonthIndex] - - if (currentMonthIndex !== startMonthIndex) { - startDateInWeek = 0 - startDateWeekInMonth = 0 - } else { - startDateWeekInMonth = startDateObj.weekInMonth - startDateInWeek = startDateObj.dayInWeek - } - endDateWeekInMonth = currentMonthIndex !== endMonthIndex - ? monthDateGroup.dateArr.length - 1 // 取该月最后一周 - : endDateObj.weekInMonth - - this.renderDateInOneMonth(startDateInWeek, monthDateGroup, startDateWeekInMonth, endDateWeekInMonth, endDateObj.date) - } - this.selectDateSet.length && this.selectDateSet.shift() - }, - renderDateInOneMonth(startDateInWeek, monthDateGroup, startDateWeekInMonth, endDateWeekInMonth, endDate) { - console.log('startDateInWeek', startDateInWeek, monthDateGroup, startDateWeekInMonth, endDateWeekInMonth, endDate) - let day = startDateInWeek - const rangeArr = [] - let weekDateGroup - let dateClass - const endDateTimestamp = endDate.setHours(0, 0, 0, 0) - for (let week = startDateWeekInMonth; week <= endDateWeekInMonth; week++) { - weekDateGroup = monthDateGroup.dateArr[week] - - for (day; day <= 7; day++) { - if (day === 7) { - day = 0 - break - } - - // 渲染开始日期样式 - if (+weekDateGroup[day].date === (this.selectDateSet[0] as any).date.setHours(0, 0, 0, 0)) { - // this.setData(weekDateGroup[day], 'dateClass', 'start-date') - this.$set(weekDateGroup[day], 'dateClass', 'start-date') - } - dateClass = weekDateGroup[day].dateClass && +weekDateGroup[day].date - ? `${weekDateGroup[day].dateClass} transition-date` - : 'transition-date' - this.$set(weekDateGroup[day], 'dateClass', dateClass) - console.log('groupDay', weekDateGroup[day]) - // set(weekDateGroup[day], 'dateClass', dateClass) - rangeArr.push(weekDateGroup[day] as never) - - if (+weekDateGroup[day].date >= endDateTimestamp) { - break - } - } - } - this.selectDateSet = [...this.selectDateSet, ...rangeArr] - - // 渲染结束日期样式 - if (this.selectDateSet.length >= 2 && +weekDateGroup[day].date === +(this.selectDateSet[this.selectDateSet.length - 1] as any).date) { - this.$set(weekDateGroup[day], 'dateClass', weekDateGroup[day].dateClass ? `${weekDateGroup[day].dateClass} end-date` : 'end-date') - // set(weekDateGroup[day], 'dateClass', weekDateGroup[day].dateClass ? `${weekDateGroup[day].dateClass} end-date` : 'end-date') - } - }, - getRangeDateArray() { - // TODO: 校验传入的日期格式 - const minYear = this.min.getFullYear() - const maxYear = this.max.getFullYear() - const minMonth = this.min.getMonth() + 1 - const maxMonth = this.max.getMonth() + 1 - - if (+this.min >= +this.max) { - console.warn('传入props错误：时间的max值应大于min值！') - return - } - - for (let year = minYear; year <= maxYear; year++) { - const monthLowerLimit = year === minYear ? minMonth : 1 - const monthUpperLimit = year === maxYear ? maxMonth : 12 - for (let month = monthLowerLimit; month <= monthUpperLimit; month++) { - this.dateList.push(this.getCurrentMonthDaysArray(year, month) as never) - } - } - this.testData = this.dateList - }, - getCurrentMonthDaysArray(year, month) { - const days = getDaysCountInMonth(year, month) - const weeksCountInMonth = getWeeksCountInMonth(year, month) - - // 根据周数，初始化二维数组 - const daysArray = [] as any[] - for (let i = 0; i < weeksCountInMonth; i++) { - daysArray[i] = [] - } - - // 当月日历面板中的排列 - for (let day = 1; day <= days; day++) { - const currentWeekInMonth = getWeekInMonth(year, month, day) - daysArray[currentWeekInMonth - 1].push({ - day, - month: month, - year: year, - date: new Date(year, month - 1, day), - dayInWeek: getDayInWeek(year, month, day), - weekInMonth: currentWeekInMonth - 1, - active: false, - disable: +new Date(year, month - 1, day) < +this.min || +new Date(year, month - 1, day) > +this.max - }) - } - - this.fillDaysInMonth(year, month, days, weeksCountInMonth, daysArray) - - return { - title: `${year}年${month}月`, - dayCount: days, - year: year, - month: month, - dateArr: [...daysArray] - } - }, - fillDaysInMonth(year, month, days, weeksCountInMonth, daysArray) { - const firstDayInWeek = getDayInWeek(year, month, 1) - const lastDayInWeek = getDayInWeek(year, month, days) - if (firstDayInWeek !== 0) { - const fillArr = [...new Array(firstDayInWeek).fill({ date: '' })] - daysArray[0] = [...fillArr, ...daysArray[0]] - } - if (lastDayInWeek !== 6) { - const fillArr = [...new Array(6 - lastDayInWeek).fill({ date: '' })] - daysArray[weeksCountInMonth - 1] = [...daysArray[weeksCountInMonth - 1], ...fillArr] - } } } }) diff --git a/packages/mpx-cube-ui/src/components/calendar-modal/index.mpx b/packages/mpx-cube-ui/src/components/calendar-modal/index.mpx index 52dd88ba..34b85d1f 100644 --- a/packages/mpx-cube-ui/src/components/calendar-modal/index.mpx +++ b/packages/mpx-cube-ui/src/components/calendar-modal/index.mpx @@ -1,55 +1,35 @@ diff --git a/packages/mpx-cube-ui/src/components/calendar/calendar.ts b/packages/mpx-cube-ui/src/components/calendar/calendar.ts index 93c5b780..fefa842b 100644 --- a/packages/mpx-cube-ui/src/components/calendar/calendar.ts +++ b/packages/mpx-cube-ui/src/components/calendar/calendar.ts @@ -70,7 +70,6 @@ createComponent({ dateClass: '', errTipTxt: '最多选择30天', angleOffset: {}, - testData: [] as any[], toastText: '' }, watch: { @@ -90,6 +89,7 @@ createComponent({ ready() { this.getRangeDateArray() this.reset(this.defaultDate) + console.log('node', this.customizeShowFunction) } }, methods: { @@ -249,15 +249,15 @@ createComponent({ const monthLowerLimit = year === minYear ? minMonth : 1 const monthUpperLimit = year === maxYear ? maxMonth : 12 for (let month = monthLowerLimit; month <= monthUpperLimit; month++) { + console.log('year', year) + console.log('month', month) this.dateList.push(this.getCurrentMonthDaysArray(year, month) as never) } } - this.testData = this.dateList }, getCurrentMonthDaysArray(year, month) { const days = getDaysCountInMonth(year, month) const weeksCountInMonth = getWeeksCountInMonth(year, month) - // 根据周数，初始化二维数组 const daysArray = [] as any[] for (let i = 0; i < weeksCountInMonth; i++) { @@ -267,20 +267,22 @@ createComponent({ // 当月日历面板中的排列 for (let day = 1; day <= days; day++) { const currentWeekInMonth = getWeekInMonth(year, month, day) + const disable = +new Date(year, month - 1, day) < this.min || +new Date(year, month - 1, day) > this.max + console.log('customizeShowFunction', this.customizeShowFunction) + console.log('day', this.isCustomizeShow ? (this.customizeShowFunction as any)(day, disable) : day) daysArray[currentWeekInMonth - 1].push({ - day, + day: this.isCustomizeShow ? (this.customizeShowFunction as any)(day, disable) : day, month, year, date: new Date(year, month - 1, day), dayInWeek: getDayInWeek(year, month, day), weekInMonth: currentWeekInMonth - 1, active: false, - disable: +new Date(year, month - 1, day) < this.min || +new Date(year, month - 1, day) > this.max + disable }) } - this.fillDaysInMonth(year, month, days, weeksCountInMonth, daysArray) - + console.log('daysArray', daysArray) return { title: `${year}年${month}月`, dayCount: days, diff --git a/packages/mpx-cube-ui/src/components/calendar/index.mpx b/packages/mpx-cube-ui/src/components/calendar/index.mpx index 8b38d3ab..607ea7e4 100644 --- a/packages/mpx-cube-ui/src/components/calendar/index.mpx +++ b/packages/mpx-cube-ui/src/components/calendar/index.mpx @@ -8,33 +8,34 @@ ref="scroll" scroll-y="{{true}}" > - + - {{monthDateGroup.title}} - - - - - - + {{monthDateGroup.title}} + + + + 1{{customizeShowFunction}} + + + + + - - - + {{monthDateGroup.title}} diff --git a/packages/mpx-cube-ui/src/components/calendar/utils.ts b/packages/mpx-cube-ui/src/components/calendar/utils.ts index 30b38224..f35fc48b 100644 --- a/packages/mpx-cube-ui/src/components/calendar/utils.ts +++ b/packages/mpx-cube-ui/src/components/calendar/utils.ts @@ -69,17 +69,17 @@ function getDayInWeek(year, month, day) { /** * 获取日期对象 - * @param date + * @param inpuDate * @returns {{date: *, month: number, year: number, day: number, dayInWeek: number, weekInMonth: number}} */ -function getDateObj(date) { - const currentDate = new Date(date) - const month = currentDate.getMonth() + 1 - const year = currentDate.getFullYear() - const day = currentDate.getDate() +function getDateObj(inpuDate) { + const date = new Date(inpuDate) + const month = date.getMonth() + 1 + const year = date.getFullYear() + const day = date.getDate() return { - currentDate, + date, month, year, day, From 99002b65c1006aa73abd5fa44b336c5dbc5edefa Mon Sep 17 00:00:00 2001 From: likecodeboys <1239288387@qq.com> Date: Mon, 1 Sep 2025 20:24:38 +0800 Subject: [PATCH 06/13] feat: update --- .../calendar-modal/customize-calendar.mpx | 84 ------------------- example/pages/calendar-modal/index.mpx | 2 - .../pages/calendar-modal/normal-calendar.mpx | 2 +- .../calendar-modal/calendar-modal.ts | 10 --- .../src/components/calendar-modal/index.mpx | 5 +- .../src/components/calendar/calendar.ts | 21 +---- .../src/components/calendar/index.mpx | 77 ++++++----------- 7 files changed, 31 insertions(+), 170 deletions(-) delete mode 100644 example/pages/calendar-modal/customize-calendar.mpx diff --git a/example/pages/calendar-modal/customize-calendar.mpx b/example/pages/calendar-modal/customize-calendar.mpx deleted file mode 100644 index eb457615..00000000 --- a/example/pages/calendar-modal/customize-calendar.mpx +++ /dev/null @@ -1,84 +0,0 @@ - - - - - - - diff --git a/example/pages/calendar-modal/index.mpx b/example/pages/calendar-modal/index.mpx index d3fbd9f5..6d992b82 100644 --- a/example/pages/calendar-modal/index.mpx +++ b/example/pages/calendar-modal/index.mpx @@ -1,7 +1,6 @@