串接日期資料 & 選擇控制

Author: BYSu

src/assets/style/_animate.scss

@@ -24,7 +24,7 @@
     opacity: 1;
 }
 
-.scale-out-enter-active{
+.scale-out-enter-active {
     transition: 1s;
 }
 .scale-out-leave-active {
@@ -43,3 +43,18 @@
     transform: scaleX(1);
     opacity: 1;
 }
+
+.fade-enter,
+.fade-leave-to {
+    opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave {
+    opacity: 1;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: 0.5s;
+}

src/components/Week/DatePicker.vue

@@ -1,50 +1,62 @@
 <template>
   <div class="datePicker">
     <div class="datePicker_header">
-      <button class="datePicker_close">
+      <button
+        class="datePicker_close"
+        @click="closeHandler"
+      >
         <i class="fas fa-times" />
       </button>
       <div class="datePicker_title">
         <span class="datePicker_icon"><i class="far fa-calendar text-white" /></span>
         <span class="datePicker_title_content">選擇日期</span>
       </div>
+      <!-- 當月標題 -->
       <div class="datePicker_month_title">
-        2020 / 06
+        {{ currentMonthLabel.year }} / {{ currentMonthLabel.month }}
       </div>
+      <!-- 週標 -->
       <div class="datePicker_weekday">
         <span
-          v-for="i in 7"
-          :key="70 + i"
+          v-for="d in 7"
+          :key="84 + d"
           class="datePicker_weekday_label"
-        >{{ i }}</span>
+        >{{ getWeekday(d-1) }}</span>
       </div>
     </div>
     <div class="datePicker_body">
+      <!-- 當月 -->
       <div class="datePicker_month current">
         <div
-          v-for="i in 35"
+          v-for="(day, i) in daysOfMonthWithClass"
           :key="i"
-          class="datePicker_date today"
-        >
-          {{ i }}
-        </div>
+          class="datePicker_date"
+          :class="{'today': day.isToday, 'disabled': day.disabled, 'selected': day.selected}"
+          @click="selectHandler(day)"
+          v-text="day.disabled? '': day.date"
+        />
       </div>
+      <!-- 次月標題 -->
       <div class="datePicker_month_title pt-3">
-        2020 / 07
+        {{ nextMonthLabel.year }} / {{ nextMonthLabel.month }}
       </div>
-
+      <!-- 次月 -->
       <div class="datePicker_month next">
         <div
-          v-for="i in 35"
-          :key=" 35 + i"
+          v-for="(day, i) in daysOfNextMonthWithClass"
+          :key="42 + i"
           class="datePicker_date"
-        >
-          {{ i }}
-        </div>
+          :class="{'today': day.isToday, 'disabled': day.disabled, 'selected': day.selected}"
+          @click="selectHandler(day)"
+          v-text="day.disabled? '': day.date"
+        />
       </div>
     </div>
     <div class="datePicker_select">
-      <button class="btn btn-primary">
+      <button
+        class="btn btn-primary"
+        @click="confirmSelect"
+      >
         選擇
       </button>
     </div>
@@ -55,9 +67,107 @@
 export default {
   name: 'DatePicker',
   props: {
+    current: { type: Date, required: true },
+    calendar: { type: Object, required: true },
+    daysOfMonth: { type: Array, required: true },
+    daysOfNextMonth: { type: Array, required: true }
+  },
+  data () {
+    return {
+      select: {
+        year: 0,
+        month: 0,
+        date: 0,
+        weekDay: 0
+      }
+    }
+  },
+  computed: {
+    today () {
+      const { current } = this
+      return {
+        year: current.getFullYear(),
+        month: current.getMonth(),
+        date: current.getDate(),
+        weekDay: current.getDay()
+      }
+    },
+    getWeekday () {
+      const { daysOfMonth } = this
+      const mapDay = {
+        1: 'M',
+        2: 'T',
+        3: 'W',
+        4: 'T',
+        5: 'F',
+        6: 'S',
+        0: 'S'
+      }
+      return (d) => mapDay[daysOfMonth[d].weekDay]
+    },
+    currentMonth () {
+      const { year, month } = this.calendar
+      const cDate = new Date(year, month, 1)
+      return { year: cDate.getFullYear(), month: cDate.getMonth() }
+    },
+    currentMonthLabel () {
+      const { year, month } = this.currentMonth
+      return { year, month: (month + 1).toString().padStart(2, '0') }
+    },
+    nextMonth () {
+      const { year, month } = this.currentMonth
+      const mDate = new Date(year, month + 1, 1)
+      return { year: mDate.getFullYear(), month: mDate.getMonth() }
+    },
+    nextMonthLabel () {
+      const { year, month } = this.nextMonth
+      return { year, month: (month + 1).toString().padStart(2, '0') }
+    },
+    daysOfMonthWithClass () {
+      const { daysOfMonth, select } = this
+      const { year, month, date } = this.today
+      const currentMonth = this.currentMonth.month
+      return daysOfMonth.map(day => {
+        const disabled = day.month !== currentMonth
 
+        return {
+          ...day,
+          disabled,
+          selected: !disabled && select.year === day.year && select.month === day.month && select.date === day.date,
+          isToday: !disabled && year === day.year && month === day.month && date === day.date
+        }
+      })
+    },
+    daysOfNextMonthWithClass () {
+      const { daysOfNextMonth, select } = this
+      const currentMonth = this.nextMonth.month
+      return daysOfNextMonth.map(day => {
+        const disabled = day.month !== currentMonth
+        return {
+          ...day,
+          disabled,
+          selected: !disabled && select.year === day.year && select.month === day.month && select.date === day.date
+        }
+      })
+    }
   },
-  computed: {}
+  methods: {
+    closeHandler () {
+      this.$emit('switchPicker')
+    },
+    selectHandler (day) {
+      if (day.disabled) return
+      const { year, month, date, weekDay } = day
+      this.select.year = year
+      this.select.month = month
+      this.select.date = date
+      this.select.weekDay = weekDay
+    },
+    confirmSelect () {
+      this.$emit('input', this.select)
+      this.$emit('switchPicker')
+    }
+  }
 }
 </script>
 
@@ -131,15 +241,16 @@ export default {
   }
   &_date {
     width: calc(90vw / 7);
-    padding: 1rem;
+    padding: 0.5rem 0.5rem;
     cursor: pointer;
     position: relative;
+    text-align: center;
 
     &:hover {
       &::before {
         content: "";
         left: calc(50% - 1rem);
-        top: calc(50% - 1rem);
+        top: 0.25rem;
         width: 2rem;
         height: 2rem;
         border-radius: 50%;
@@ -154,7 +265,7 @@ export default {
       &::before {
         content: "";
         left: calc(50% - 1rem);
-        top: calc(50% - 1rem);
+        top: 0.25rem;
         width: 2rem;
         height: 2rem;
         border-radius: 50%;
@@ -164,6 +275,14 @@ export default {
         z-index: -1;
       }
     }
+    &.disabled {
+      color: #f2f2f2;
+      background-color: #f2f2f2;
+      cursor: default;
+      &:hover::before {
+        display: none;
+      }
+    }
     &.today::after {
       width: 8px;
       height: 8px;
@@ -176,6 +295,13 @@ export default {
     }
   }
   &_select {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    display: block;
+    width: 100%;
+    height: 4.2rem;
+    padding-top: 1rem;
     > button {
       width: 9rem;
       border-radius: 10px;

src/components/Week/WeekHeader.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="weekHeader">
-    <div class="weekHeader_col">
+    <div
+      class="weekHeader_col"
+      @click="openHandler"
+    >
       <span class="weekHeader_icon text-primary"><i class="far fa-calendar" /></span>
     </div>
     <div
@@ -74,6 +77,9 @@ export default {
     setActiveDay (weekDay) {
       this.activeDay = weekDay
       this.$emit('selectDate', this.daysOfWeek[weekDay])
+    },
+    openHandler () {
+      this.$emit('switchPicker', true)
     }
   }
 }