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
pull/8648/head
firesh 2017-12-04 13:44:49 +08:00 committed by 杨奕
parent 2d8e73bc02
commit f5aa24e419
4 changed files with 52 additions and 6 deletions

View File

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

View File

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

View File

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

View File

@ -26,6 +26,30 @@ describe('TimePicker', () => {
expect(vm.$el.querySelector('input').value).to.equal('18-40-00'); 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 => { it('default value', done => {
vm = createTest(TimePicker, { vm = createTest(TimePicker, {
value: new Date(2016, 9, 10, 18, 40) value: new Date(2016, 9, 10, 18, 40)