DatePicker: add am/pm mode in time selector (#8620)

* time-picker: add am/pm mode in time selector (#8270)

* time-picker: add 'hh:mm:ss A' format test

* time-picker: add am/pm mode in time selector (#8270)

* time-picker: add am/pm mode in time selector (#8270)

* time-picker: add am/pm mode in time selector (#8270)

* Update time-spinner.vue

* Update time-spinner.vue

* Update time-spinner.vue

packages/date-picker/src/basic/time-spinner.vue

@@ -13,9 +13,8 @@
         <li
           @click="handleClick('hours', { value: hour, disabled: disabled })"
           v-for="(disabled, hour) in hoursList"
-          track-by="hour"
           class="el-time-spinner__item"
-          :class="{ 'active': hour === hours, 'disabled': disabled }">{{ ('0' + hour).slice(-2) }}</li>
+          :class="{ 'active': hour === hours, 'disabled': disabled }">{{ ('0' + (amPmMode ? (hour % 12 || 12) : hour )).slice(-2) }}{{ amPm(hour) }}</li>
       </el-scrollbar>
       <el-scrollbar
         @mouseenter.native="emitSelectRange('minutes')"
@@ -59,9 +58,7 @@
           <li
             class="el-time-spinner__item"
             :class="{ 'active': hour === hours, 'disabled': hoursList[hour] }"
-            v-for="hour in arrowHourList">
-            {{ hour === undefined ? '' : ('0' + hour).slice(-2) }}
-          </li>
+            v-for="hour in arrowHourList">{{ hour === undefined ? '' : ('0' + (amPmMode ? (hour % 12 || 12) : hour )).slice(-2) + amPm(hour) }}</li>
         </ul>
       </div>
       <div
@@ -116,7 +113,11 @@
         type: Boolean,
         default: true
       },
-      arrowControl: Boolean
+      arrowControl: Boolean,
+      amPmMode: {
+        type: String,
+        default: '' // 'a': am/pm; 'A': AM/PM
+      }
     },
 
     computed: {
@@ -273,6 +274,14 @@
 
         this.modifyDateField(label, now);
         this.adjustSpinner(label, now);
+      },
+      amPm(hour) {
+        let shouldShowAmPm = this.amPmMode.toLowerCase() === 'a';
+        if (!shouldShowAmPm) return '';
+        let isCapital = this.amPmMode === 'A';
+        let content = (hour < 12) ? ' am' : ' pm';
+        if (isCapital) content = content.toUpperCase();
+        return content;
       }
     }
   };

packages/date-picker/src/panel/time-range.vue

@@ -15,6 +15,7 @@
             <time-spinner
               ref="minSpinner"
               :show-seconds="showSeconds"
+              :am-pm-mode="amPmMode"
               @change="handleMinChange"
               :arrow-control="arrowControl"
               @select-range="setMinSelectionRange"
@@ -30,6 +31,7 @@
             <time-spinner
               ref="maxSpinner"
               :show-seconds="showSeconds"
+              :am-pm-mode="amPmMode"
               @change="handleMaxChange"
               :arrow-control="arrowControl"
               @select-range="setMaxSelectionRange"
@@ -100,6 +102,11 @@
 
       btnDisabled() {
         return this.minDate.getTime() > this.maxDate.getTime();
+      },
+      amPmMode() {
+        if ((this.format || '').indexOf('A') !== -1) return 'A';
+        if ((this.format || '').indexOf('a') !== -1) return 'a';
+        return '';
       }
     },
 

packages/date-picker/src/panel/time.vue

@@ -10,6 +10,7 @@
           @change="handleChange"
           :arrow-control="useArrow"
           :show-seconds="showSeconds"
+          :am-pm-mode="amPmMode"
           @select-range="setSelectionRange"
           :date="date">
         </time-spinner>
@@ -104,6 +105,11 @@
       },
       useArrow() {
         return this.arrowControl || this.timeArrowControl || false;
+      },
+      amPmMode() {
+        if ((this.format || '').indexOf('A') !== -1) return 'A';
+        if ((this.format || '').indexOf('a') !== -1) return 'a';
+        return '';
       }
     },
 

test/unit/specs/time-picker.spec.js

@@ -26,6 +26,30 @@ describe('TimePicker', () => {
     expect(vm.$el.querySelector('input').value).to.equal('18-40-00');
   });
 
+  it('set AM/PM format', done => {
+    vm = createTest(TimePicker, {
+      format: 'hh:mm:ss A',
+      value: new Date(2016, 9, 10, 18, 40)
+    }, true);
+
+    const input = vm.$el.querySelector('input');
+
+    expect(vm.$el.querySelector('input').value).to.equal('06:40:00 PM');
+
+    input.blur();
+    input.focus();
+
+    setTimeout(_ => {
+      const list = vm.picker.$el.querySelectorAll('.el-time-spinner__list');
+      const hoursEl = list[0];
+      expect(hoursEl.querySelectorAll('.el-time-spinner__item')[0].textContent).to.equal('12 AM');
+      expect(hoursEl.querySelectorAll('.el-time-spinner__item')[1].textContent).to.equal('01 AM');
+      expect(hoursEl.querySelectorAll('.el-time-spinner__item')[12].textContent).to.equal('12 PM');
+      expect(hoursEl.querySelectorAll('.el-time-spinner__item')[15].textContent).to.equal('03 PM');
+      done();
+    }, DELAY);
+  });
+
   it('default value', done => {
     vm = createTest(TimePicker, {
       value: new Date(2016, 9, 10, 18, 40)