feat: 新增 自定义日期格式

kouchao · kouchao · commit a67ad4643bf0 · 2019-04-29T09:32:24.000+08:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "async-validator": "^1.11.0",
+    "dayjs": "^1.8.13",
     "vue": "^2.6.10"
   },
   "devDependencies": {
diff --git a/src/components/date-picker/README.md b/src/components/date-picker/README.md
@@ -4,7 +4,7 @@
 - [x] 日期选择器
 - [x] 年选择器
 - [x] 年月选择器
-- [ ] 自定义日期格式
+- [x] 自定义日期格式
 - [ ] 公历节日
 - [ ] 自定义重要日子
 - [ ] 限制可选日期
diff --git a/src/components/date-picker/src/date-picker.vue b/src/components/date-picker/src/date-picker.vue
@@ -37,6 +37,10 @@ export default {
         return oneOf('type', ['year', 'month', 'date'], value);
       }
     },
+    format: {
+      type: String,
+      default: ''
+    },
     placeholder: {
       type: String,
       default: ''
@@ -69,6 +73,7 @@ export default {
       this.picker.elem = this.$refs.input;
       this.main = new Vue(Main);
       this.main.$props.type = this.type;
+      this.main.$props.format = this.format;
       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
@@ -47,14 +47,16 @@
           class="laydate-btns-confirm"
           @click="handelConfirm"
         >
-          确定{{ type }} {{ selectedType }}
+          确定
         </span>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+
+import dayjs from 'dayjs';
 import { getDaysInMonth } from '../utils';
 
 import DateTable from '../content/date-table';
@@ -78,6 +80,10 @@ export default {
       validator (value) {
         return oneOf('type', ['year', 'month', 'date'], value);
       }
+    },
+    format: {
+      type: String,
+      default: ''
     }
   },
   data () {
@@ -124,22 +130,6 @@ export default {
       this.handerDateTableChange(_day);
 
     },
-    emitChange (isClear) {
-      let val;
-      switch (this.type) {
-      case 'year':
-        val = `${this.selectedYear}`;
-        break;
-      case 'month':
-        val = `${this.selectedYear}/${this.selectedMonth + 1}`;
-        break;
-      case 'date':
-        val = `${this.selectedYear}/${this.selectedMonth + 1}/${this.selectedDay}`;
-        break;
-      }
-      this.$emit('change', isClear ? '' : val);
-      this.$emit('close');
-    },
     checkDay (year = this.selectedYear, month = this.selectedMonth, day = this.selectedDay) {
       const daysInMonth = getDaysInMonth(year, month);
       if (day > daysInMonth) {
@@ -193,6 +183,28 @@ export default {
     handelConfirm () {
       this.selectedType = this.type;
       this.emitChange();
+    },
+    emitChange (isClear) {
+      let date = dayjs(`${this.selectedYear}-${this.selectedMonth + 1}-${this.selectedDay}`);
+      let val;
+      if (!this.format) {
+        switch (this.type) {
+        case 'year':
+          val = date.format('YYYY');
+          break;
+        case 'month':
+          val = date.format('YYYY-MM');
+          break;
+        case 'date':
+          val = date.format('YYYY-MM-DD');
+          break;
+        }
+      } else {
+        val = date.format(this.format);
+      }
+
+      this.$emit('change', isClear ? '' : val);
+      this.$emit('close');
     }
   }
 
diff --git a/src/views/DatePicker.md b/src/views/DatePicker.md
@@ -16,14 +16,22 @@
     placeholder="选择年">
 </lay-date-picker>
 
+<lay-date-picker
+    v-model="value4"
+    format="YYYY年MM月DD日"
+    placeholder="选择格式化">
+</lay-date-picker>
+
+
 <script>
 export default {
   name: "DataPicker",
   data(){
       return {
          value1: '',
          value2: '',
-         value3: ''
+         value3: '',
+         value4: ''
       }
   }
 };
