feat(Calendar): support select day

src/calendar/index.js

@@ -5,7 +5,12 @@ import Header from './Header';
 
 export default createComponent({
   props: {
+    value: Date,
     title: String,
+    type: {
+      type: String,
+      default: 'single'
+    },
     minDate: {
       type: Date,
       default: () => new Date(),
@@ -22,8 +27,6 @@ export default createComponent({
   },
 
   data() {
-    this.monthsHeight = [];
-
     return {
       currentMonth: this.minDate
     };
@@ -52,14 +55,14 @@ export default createComponent({
   },
 
   mounted() {
-    this.getMonthsHeight();
+    this.initRects();
   },
 
   methods: {
-    getMonthsHeight() {
-      this.$refs.month.forEach((month, index) => {
-        this.monthsHeight[index] = month.getBoundingClientRect().height;
-      });
+    initRects() {
+      this.monthsHeight = this.$refs.month.map(
+        month => month.getBoundingClientRect().height
+      );
     },
 
     getDays(date) {
@@ -67,8 +70,12 @@ export default createComponent({
       const { minDate, maxDate } = this;
       const checkMinDate = compareMonth(date, minDate) === 0;
       const checkMaxDate = compareMonth(date, maxDate) === 0;
+      const checkSelected =
+        this.value &&
+        this.type === 'single' &&
+        compareMonth(date, this.value) === 0;
 
-      function isDisabled(date) {
+      const isDisabled = date => {
         if (checkMaxDate && date.getDate() > maxDate.getDate()) {
           return true;
         }
@@ -78,7 +85,10 @@ export default createComponent({
         }
 
         return false;
-      }
+      };
+
+      const isSelected = date =>
+        checkSelected && date.getDate() === this.value.getDate();
 
       const placeholderCount = date.getDay() === 0 ? 6 : date.getDay() - 1;
 
@@ -92,7 +102,8 @@ export default createComponent({
         days.push({
           day: cursor.getDate(),
           date: new Date(cursor),
-          disabled: isDisabled(cursor)
+          disabled: isDisabled(cursor),
+          selected: isSelected(cursor)
         });
 
         cursor.setDate(cursor.getDate() + 1);
@@ -106,9 +117,28 @@ export default createComponent({
         <div class={bem('month-title')}>{month.title}</div>
       );
 
-      const Days = month.days.map(item => (
-        <div class={bem('day', { disabled: item.disabled })}>{item.day}</div>
-      ));
+      const Days = month.days.map(item => {
+        const onClick = () => {
+          this.onClickDay(item);
+        };
+
+        if (item.selected) {
+          return (
+            <div class={bem('day')} onClick={onClick}>
+              <div class={bem('selected-day')}>{item.day}</div>
+            </div>
+          );
+        }
+
+        return (
+          <div
+            class={bem('day', { disabled: item.disabled })}
+            onClick={onClick}
+          >
+            {item.day}
+          </div>
+        );
+      });
 
       return (
         <div class={bem('month')} ref="month" refInFor>
@@ -133,6 +163,16 @@ export default createComponent({
 
         height += this.monthsHeight[i];
       }
+    },
+
+    onClickDay(item) {
+      if (item.disabled) {
+        return;
+      }
+
+      if (this.type === 'single') {
+        this.$emit('input', item.date);
+      }
     }
   },
 

src/calendar/index.less

@@ -65,10 +65,14 @@
     pointer-events: none;
   }
 
-  &__day {
+  &__day,
+  &__selected-day {
     display: flex;
     align-items: center;
     justify-content: center;
+  }
+
+  &__day {
     width: 14.285%;
     height: 64px;
     font-size: @font-size-lg;
@@ -77,4 +81,12 @@
       color: @gray-5;
     }
   }
+
+  &__selected-day {
+    width: 54px;
+    height: 54px;
+    color: @white;
+    background: @red;
+    border-radius: @border-radius-md;
+  }
 }

src/calendar/utils.ts

@@ -1,11 +1,12 @@
 import { createNamespace } from '../utils';
+import { padZero } from '../utils/format/string';
 
 const [createComponent, bem, t] = createNamespace('calendar');
 
 export { createComponent, bem, t };
 
 export function formatMonthTitle(date: Date) {
-  return t('monthTitle', date.getFullYear(), date.getMonth() + 1);
+  return t('monthTitle', date.getFullYear(), padZero(date.getMonth() + 1));
 }
 
 export function compareMonth(date1: Date, date2: Date) {