mirror of https://github.com/ElemeFE/element
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.vuepull/8648/head
parent
2d8e73bc02
commit
f5aa24e419
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -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 '';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -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 '';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -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)
|
||||||
|
|
Loading…
Reference in New Issue