feat(DatetimePicker): add month-day type (#6395)

src/datetime-picker/demo/index.vue

@@ -1,41 +1,52 @@
 <template>
   <demo-section>
-    <demo-block :title="t('title2')">
+    <demo-block :title="t('dateType')">
       <van-datetime-picker
-        v-model="currentDate2"
+        v-model="value.date"
         type="date"
-        :title="t('title2')"
+        :title="t('dateType')"
         :min-date="minDate"
         :max-date="maxDate"
       />
     </demo-block>
 
-    <demo-block :title="t('title3')">
+    <demo-block :title="t('yearMonthType')">
       <van-datetime-picker
-        v-model="currentDate3"
+        v-model="value.yearMonth"
         type="year-month"
-        :title="t('title3')"
+        :title="t('yearMonthType')"
         :min-date="minDate"
         :max-date="maxDate"
         :formatter="formatter"
       />
     </demo-block>
 
-    <demo-block :title="t('title4')">
+    <demo-block :title="t('monthDayType')">
       <van-datetime-picker
-        v-model="currentTime1"
+        v-model="value.monthDayType"
+        type="month-day"
+        :title="t('monthDayType')"
+        :min-date="minDate"
+        :max-date="maxDate"
+        :formatter="formatter"
+      />
+    </demo-block>
+
+    <demo-block :title="t('timeType')">
+      <van-datetime-picker
+        v-model="value.time"
         type="time"
-        :title="t('title4')"
+        :title="t('timeType')"
         :min-hour="10"
         :max-hour="20"
       />
     </demo-block>
 
-    <demo-block :title="t('title1')">
+    <demo-block :title="t('datetimeType')">
       <van-datetime-picker
-        v-model="currentDate1"
+        v-model="value.datetime"
         type="datetime"
-        :title="t('title1')"
+        :title="t('datetimeType')"
         :min-date="minDate"
         :max-date="maxDate"
       />
@@ -43,7 +54,7 @@
 
     <demo-block :title="t('optionFilter')">
       <van-datetime-picker
-        v-model="currentTime2"
+        v-model="value.optionFilter"
         type="time"
         :title="t('optionFilter')"
         :filter="filter"
@@ -56,21 +67,25 @@
 export default {
   i18n: {
     'zh-CN': {
-      title1: '选择完整时间',
-      title2: '选择年月日',
-      title3: '选择年月',
-      title4: '选择时间',
+      day: '日',
       year: '年',
       month: '月',
+      timeType: '选择时间',
+      dateType: '选择年月日',
+      datetimeType: '选择完整时间',
+      monthDayType: '选择月日',
+      yearMonthType: '选择年月',
       optionFilter: '选项过滤器',
     },
     'en-US': {
-      title1: 'Choose DateTime',
-      title2: 'Choose Date',
-      title3: 'Choose Year-Month',
-      title4: 'Choose Time',
+      day: 'Day',
       year: ' Year',
       month: ' Month',
+      timeType: 'Choose Time',
+      dateType: 'Choose Date',
+      datetimeType: 'Choose DateTime',
+      monthDayType: 'Choose Month-Day',
+      yearMonthType: 'Choose Year-Month',
       optionFilter: 'Option Filter',
     },
   },
@@ -79,11 +94,14 @@ export default {
     return {
       minDate: new Date(2020, 0, 1),
       maxDate: new Date(2025, 10, 1),
-      currentDate1: new Date(2020, 0, 1),
-      currentDate2: null,
-      currentDate3: new Date(2020, 0, 1),
-      currentTime1: '12:00',
-      currentTime2: '12:00',
+      value: {
+        date: null,
+        time: '12:00',
+        datetime: new Date(2020, 0, 1),
+        monthDay: new Date(2020, 0, 1),
+        yearMonth: new Date(2020, 0, 1),
+        optionFilter: '12:00',
+      },
     };
   },
 
@@ -95,6 +113,9 @@ export default {
       if (type === 'month') {
         return value + this.t('month');
       }
+      if (type === 'day') {
+        return value + this.t('day');
+      }
       return value;
     },