mali-applet-ui 1.0.158 → 1.0.159

package/lib/components/ml-calendar/handle.js

@@ -0,0 +1,145 @@
+import XEUtils from 'xe-utils'
+
+// 判断是否是闰年,
+const isLeapYear = (year) => {
+  if (year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0)) {
+    return true
+  }
+  return false
+}
+
+// 获取当前月份的总天数
+const totalDaysByDate = (date) => {
+  const today = new Date(date)
+  const year = today.getFullYear()
+  const month = today.getMonth() + 1
+  let monthDay = 31
+  switch (month) {
+    case 1: monthDay = 31; break
+    case 2:
+      if (isLeapYear(year)) {
+        monthDay = 29
+      } else {
+        monthDay = 28
+      }
+      break
+    case 3: monthDay = 31; break
+    case 4: monthDay = 30; break
+    case 5: monthDay = 31; break
+    case 6: monthDay = 30; break
+    case 7: monthDay = 31; break
+    case 8: monthDay = 31; break
+    case 9: monthDay = 30; break
+    case 10: monthDay = 31; break
+    case 11: monthDay = 30; break
+    case 12: monthDay = 31; break
+  }
+  return monthDay
+}
+
+// 获取当前月份数据
+export const getDaysByDate = (date) => {
+  // 获取总天数
+  const totalDays = totalDaysByDate(date)
+  const days = []
+  const thisMonth = new Date(date)
+  const todayDate = new Date()
+  const today = XEUtils.toDateString(todayDate, 'yyyy-MM-dd')
+  for (let i = 1; i <= totalDays; i++) {
+    thisMonth.setDate(i)
+    const dateFormat = {
+      date: XEUtils.toDateString(thisMonth, 'yyyy-MM-dd'),
+      day: XEUtils.toDateString(thisMonth, 'd'),
+      statusList: []
+    }
+    if (dateFormat.date === today) {
+      dateFormat.isToday = true
+    } else {
+      if (todayDate.getTime() < thisMonth.getTime()) {
+        dateFormat.isNotYet = true
+      }
+    }
+    days.push(dateFormat)
+  }
+  const { previousMonth, nextMonth } = completion(date)
+  return [...previousMonth, ...days, ...nextMonth]
+}
+
+// 获取这个月的第一天和左后一天
+const getMonthInfo = (date) => {
+  const designatedDate = new Date(date)
+  const nowMonth = designatedDate.getMonth() // 当前月
+  const nowYear = designatedDate.getFullYear() // 当前年
+  // 本月的开始时间
+  const monthStartDate = new Date(nowYear, nowMonth, 1)
+  // 本月的结束时间
+  const monthEndDate = new Date(nowYear, nowMonth + 1, 0)
+  return {
+    start: monthStartDate,
+    end: monthEndDate
+  }
+}
+
+// 补全开头和结尾
+const completion = (date) => {
+  const { start: startDate, end: endDate } = getMonthInfo(date)
+  const startWeek = startDate.getDay()
+  const endWeek = endDate.getDay()
+  const startDifference = startWeek
+  const endDifference = 7 - endWeek
+  const previousMonth = []
+  const nextMonth = []
+  const todayDate = new Date()
+  const today = XEUtils.toDateString(todayDate, 'yyyy-MM-dd')
+  for (let i = startDifference; i > 0; i--) {
+    let needDate = new Date(startDate.getTime())
+    needDate = needDate.setDate(needDate.getDate() - i)
+    needDate = new Date(needDate)
+    const dateFormat = {
+      date: XEUtils.toDateString(needDate, 'yyyy-MM-dd'),
+      day: XEUtils.toDateString(needDate, 'd'),
+      statusList: [],
+      isLastMonth: true
+    }
+    if (dateFormat.date === today) {
+      dateFormat.isToday = true
+    } else {
+      if (todayDate.getTime() < needDate.getTime()) {
+        dateFormat.isNotYet = true
+      }
+    }
+    previousMonth.push(dateFormat)
+  }
+  for (let i = 1; i < endDifference; i++) {
+    let needDate = new Date(endDate.getTime())
+    needDate = needDate.setDate(needDate.getDate() + i)
+    needDate = new Date(needDate)
+    const dateFormat = {
+      date: XEUtils.toDateString(needDate, 'yyyy-MM-dd'),
+      day: XEUtils.toDateString(needDate, 'd'),
+      statusList: [],
+      isNextMonth: true
+    }
+    if (dateFormat.date === today) {
+      dateFormat.isToday = true
+    } else {
+      if (todayDate.getTime() < needDate.getTime()) {
+        dateFormat.isNotYet = true
+      }
+    }
+    nextMonth.push(dateFormat)
+  }
+  return {
+    previousMonth,
+    nextMonth
+  }
+}
+
+// 每组多少
+export const getGroupArray = (list) => {
+  const arr = []
+  for (let i = 0; i < list.length; i += 7) {
+    arr.push(list.slice(i, i + 7))
+  }
+  return arr
+}

package/lib/components/ml-calendar/ml-calendar.vue

@@ -48,8 +48,8 @@
 </template>
 
 <script>
-import { Calendar, GroupArray } from './calendar.js'
 import XEUtils from 'xe-utils'
+import { getDaysByDate, getGroupArray } from './handle.js'
 
 export default {
   name: 'MlCalendar',
@@ -130,8 +130,8 @@ export default {
       if (!date) {
         date = new Date()
       }
-      const dates = Calendar(this.selectMonth)
-      this.months = GroupArray(dates, 7)
+      const dates = getDaysByDate(this.selectMonth)
+      this.months = getGroupArray(dates, 7)
       this.loadsChedule()
     },
     toggleFold () {
@@ -145,9 +145,9 @@ export default {
       this.selectDay = value
       this.selectMonth = XEUtils.toStringDate(value)
       if (item.isLastMonth) {
-        this.initCalendar()
+        this.updateCalendar()
       } else if (item.isNextMonth) {
-        this.initCalendar()
+        this.updateCalendar()
       }
       this.$emit('input', value)
       this.$emit('click', { value })
@@ -183,9 +183,9 @@ export default {
   background-color: #FFFFFF;
   .ml-calendar-header {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    margin-bottom: 10rpx;
+    border-bottom: 1px solid #e8e8e8;
+    padding-bottom: 20rpx;
     .ml-calendar-header-title {
       flex-grow: 1;
       text-align: center;
@@ -195,7 +195,8 @@ export default {
     }
     .ml-calendar-header-button {
       flex-shrink: 0;
-      border: 1px solid #dddddd;
+      border: 0;
+      background: #fff;
       padding: 10rpx;
       border-radius: 8rpx;
       text-align: center;
@@ -206,15 +207,14 @@ export default {
   .ml-calendar-date-head {
     display: flex;
     align-items: center;
-    margin: 0 -10rpx;
     margin-bottom: 10rpx;
     .ml-calendar-week-item {
       flex-grow: 1;
       .ml-calendar-week-box {
         color: #999999;
         text-align: center;
-        width: 60rpx;
-        height: 60rpx;
+        width: 80rpx;
+        height: 80rpx;
         margin: auto;
         display: flex;
         justify-content: center;
@@ -230,7 +230,6 @@ export default {
     .ml-calendar-date-week-list {
       display: flex;
       align-items: center;
-      margin: 0 -10rpx;
       margin-bottom: 10rpx;
       .ml-calendar-date-day-item {
         flex-grow: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mali-applet-ui",
-  "version": "1.0.158",
+  "version": "1.0.159",
   "description": "码里云小程序组件库",
   "files": [
     "lib",