feat: 新增 自定义重要节日

kouchao · kouchao · commit b37d771db136 · 2019-04-29T10:22:31.000+08:00
diff --git a/src/components/date-picker/README.md b/src/components/date-picker/README.md
@@ -6,7 +6,7 @@
 - [x] 年月选择器
 - [x] 自定义日期格式
 - [x] 公历节日
-- [ ] 自定义重要日子
+- [x] 自定义重要日子
 - [ ] 限制可选日期
 - [ ] 限制日期前后几天
 - [ ] 日期多选
diff --git a/src/components/date-picker/src/content/date-table.vue b/src/components/date-picker/src/content/date-table.vue
@@ -29,9 +29,9 @@
           >
             <span
               :class="{
-                'laydate-day-mark': festival && date.festival
+                'laydate-day-mark': (festival || importantDays) && date.festival
               }"
-            >{{ festival && date.festival || date.day }}</span>
+            >{{ (festival || importantDays) && date.festival || date.day }}</span>
           </td>
         </tr>
       </tbody>
@@ -56,7 +56,11 @@ export default {
       type: Number,
       required: true
     },
-    festival: Boolean
+    festival: Boolean,
+    importantDays: {
+      type: Object,
+      default: () => {}
+    }
   },
   data () {
     return {
@@ -125,9 +129,8 @@ export default {
           month: _month,
           day: _day,
           key: `${_year}/${_month + 1}/${_day}`,
-          festival: this.festival ? getFestival(_month, _day) : ''
+          festival: this.festival || this.importantDays ? getFestival(_month, _day, this.importantDays) : ''
         });
-
       }
       this.days = _days;
     },
diff --git a/src/components/date-picker/src/date-picker.vue b/src/components/date-picker/src/date-picker.vue
@@ -56,7 +56,11 @@ export default {
       default: 0
     },
     number: Boolean,
-    festival: Boolean
+    festival: Boolean,
+    importantDays: {
+      type: Object,
+      default: () => {}
+    }
   },
   destroyed () {
     this.handleHide();
@@ -76,6 +80,7 @@ export default {
       this.main.$props.type = this.type;
       this.main.$props.format = this.format;
       this.main.$props.festival = this.festival;
+      this.main.$props.importantDays = this.importantDays;
       this.main.$mount();
       this.main.$on('change', this.emitChange);
       this.main.$on('close', () => {
diff --git a/src/components/date-picker/src/main/index.vue b/src/components/date-picker/src/main/index.vue
@@ -16,6 +16,7 @@
         :month="selectedMonth"
         :day="selectedDay"
         :festival="festival"
+        :important-days="importantDays"
         @change="handerDateTableChange"
       />
       <month-table
@@ -86,7 +87,11 @@ export default {
       type: String,
       default: ''
     },
-    festival: Boolean
+    festival: Boolean,
+    importantDays: {
+      type: Object,
+      default: () => {}
+    }
   },
   data () {
     return {
diff --git a/src/components/date-picker/src/utils/index.js b/src/components/date-picker/src/utils/index.js
@@ -1,4 +1,5 @@
 const DAYS_IN_MONTH = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+// TODO: 待补充，按招 https://github.com/sentsin/laydate/blob/master/src/laydate.js
 const FESTIVAL = {
   '1-1': '元旦',
   '2-14': '情人节',
@@ -40,7 +41,7 @@ export const getPrevDaysInMonth = (year, month) => {
   return getDaysInMonth(year, month);
 };
 
-// 获得公历节日
+// 获得公历节日和自定义节日
 export const getFestival = (month, day, festival = FESTIVAL) => {
   return festival[`${month + 1}-${day}`];
 };
diff --git a/src/views/DatePicker.md b/src/views/DatePicker.md
@@ -28,6 +28,14 @@
     format="YYYY年MM月DD日"
     placeholder="节日">
 </lay-date-picker>
+<lay-date-picker
+    v-model="value6"
+    format="YYYY年MM月DD日"
+    :important-days="importantDays"
+    placeholder="自定义重要日子">
+</lay-date-picker>
+
+
 
 <script>
 export default {
@@ -38,7 +46,22 @@ export default {
          value2: '',
          value3: '',
          value4: '',
-         value5: ''
+         value5: '',
+         value6: '',
+         importantDays: {
+             '1-10': '测试',
+             '2-11': '测试',
+             '3-12': '测试',
+             '4-13': '测试',
+             '5-14': '测试',
+             '6-15': '测试',
+             '7-16': '测试',
+             '8-17': '测试',
+             '9-18': '测试',
+             '10-19': '测试',
+             '11-9': '测试',
+             '12-8': '测试'
+         }
       }
   }
 };
