feat: 新增 公历节日

kouchao · kouchao · commit 68db579a497e · 2019-04-29T10:05:34.000+08:00
diff --git a/src/components/date-picker/README.md b/src/components/date-picker/README.md
@@ -5,7 +5,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
@@ -27,15 +27,19 @@
             }"
             @click="emitChange(date.day, date.month)"
           >
-            {{ date.day }}
+            <span
+              :class="{
+                'laydate-day-mark': festival && date.festival
+              }"
+            >{{ festival && date.festival || date.day }}</span>
           </td>
         </tr>
       </tbody>
     </table>
   </div>
 </template>
 <script>
-import { getDay, getDaysInMonth, getPrevDaysInMonth } from '../utils';
+import { getDay, getDaysInMonth, getPrevDaysInMonth, getFestival } from '../utils';
 
 export default {
   name: 'DateContent',
@@ -51,7 +55,8 @@ export default {
     day: {
       type: Number,
       required: true
-    }
+    },
+    festival: Boolean
   },
   data () {
     return {
@@ -119,7 +124,8 @@ export default {
           year: _year,
           month: _month,
           day: _day,
-          key: `${_year}/${_month + 1}/${_day}`
+          key: `${_year}/${_month + 1}/${_day}`,
+          festival: this.festival ? getFestival(_month, _day) : ''
         });
 
       }
diff --git a/src/components/date-picker/src/date-picker.vue b/src/components/date-picker/src/date-picker.vue
@@ -55,7 +55,8 @@ export default {
       type: Number,
       default: 0
     },
-    number: Boolean
+    number: Boolean,
+    festival: Boolean
   },
   destroyed () {
     this.handleHide();
@@ -74,6 +75,7 @@ export default {
       this.main = new Vue(Main);
       this.main.$props.type = this.type;
       this.main.$props.format = this.format;
+      this.main.$props.festival = this.festival;
       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
@@ -15,6 +15,7 @@
         :year="selectedYear"
         :month="selectedMonth"
         :day="selectedDay"
+        :festival="festival"
         @change="handerDateTableChange"
       />
       <month-table
@@ -84,7 +85,8 @@ export default {
     format: {
       type: String,
       default: ''
-    }
+    },
+    festival: Boolean
   },
   data () {
     return {
diff --git a/src/components/date-picker/src/utils/index.js b/src/components/date-picker/src/utils/index.js
@@ -1,8 +1,18 @@
+const DAYS_IN_MONTH = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+const FESTIVAL = {
+  '1-1': '元旦',
+  '2-14': '情人节',
+  '3-8': '妇女',
+  '3-12': '植树',
+  '9-18': '国耻',
+  '10-1': '国庆',
+  '12-25': '圣诞'
+};
+
 // 是否闰年
 export const isLeapYear = (year) => {
   return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
 };
-const DAYS_IN_MONTH = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 
 // 获得某月的第一天是周几
 export const getDay = (year, month) => {
@@ -17,6 +27,7 @@ export const getDaysInMonth = (year, month) => {
 
   return DAYS_IN_MONTH[month];
 };
+
 // 获得上个月总天数
 export const getPrevDaysInMonth = (year, month) => {
   if (month == 0) {
@@ -28,3 +39,8 @@ 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/components/slider/src/slider-btn.vue b/src/components/slider/src/slider-btn.vue
@@ -42,9 +42,7 @@ export default {
       type: Array,
       default: () => []
     },
-    vertical: {
-      type: Boolean
-    },
+    vertical: Boolean,
     theme: {
       type: String,
       default: ''
diff --git a/src/views/DatePicker.md b/src/views/DatePicker.md
@@ -22,6 +22,12 @@
     placeholder="选择格式化">
 </lay-date-picker>
 
+<lay-date-picker
+    festival
+    v-model="value5"
+    format="YYYY年MM月DD日"
+    placeholder="节日">
+</lay-date-picker>
 
 <script>
 export default {
@@ -31,7 +37,8 @@ export default {
          value1: '',
          value2: '',
          value3: '',
-         value4: ''
+         value4: '',
+         value5: ''
       }
   }
 };
