feat(DatetimePicker): add month-day type (#6395)
This commit is contained in:
neverland
@@ -249,6 +249,156 @@ exports[`renders demo correctly 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
||||
<div class="van-ellipsis van-picker__title">选择月日</div><button type="button" class="van-picker__confirm">确认</button>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">01月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">02月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">03月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">04月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">06月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">07月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">08月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">09月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">11月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">12月</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">01日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">02日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">03日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">04日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">06日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">07日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">08日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">09日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">11日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">12日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">13日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">14日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">16日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">17日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">18日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">19日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">21日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">22日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">23日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">24日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">25日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">26日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">27日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">28日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">29日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">31日</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
||||
|
||||
@@ -68,6 +68,60 @@ test('confirm event', () => {
|
||||
expect(wrapper.emitted('confirm')[1][0].getFullYear()).toEqual(2025);
|
||||
});
|
||||
|
||||
test('year-month type', () => {
|
||||
const date = new Date(2020, 10, 1, 0, 0);
|
||||
|
||||
const wrapper = mount(DatePicker, {
|
||||
propsData: {
|
||||
type: 'year-month',
|
||||
value: date,
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0][0].getFullYear()).toEqual(2020);
|
||||
expect(wrapper.emitted('confirm')[0][0].getMonth()).toEqual(10);
|
||||
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[1][0].getFullYear()).toEqual(2025);
|
||||
expect(wrapper.emitted('confirm')[1][0].getMonth()).toEqual(0);
|
||||
|
||||
triggerDrag(wrapper.findAll('.van-picker-column').at(1), 0, -100);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[2][0].getFullYear()).toEqual(2025);
|
||||
expect(wrapper.emitted('confirm')[2][0].getMonth()).toEqual(10);
|
||||
});
|
||||
|
||||
test('month-day type', () => {
|
||||
const date = new Date(2020, 10, 1, 0, 0);
|
||||
|
||||
const wrapper = mount(DatePicker, {
|
||||
propsData: {
|
||||
type: 'month-day',
|
||||
value: date,
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0][0].getMonth()).toEqual(10);
|
||||
expect(wrapper.emitted('confirm')[0][0].getDate()).toEqual(1);
|
||||
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[1][0].getMonth()).toEqual(11);
|
||||
expect(wrapper.emitted('confirm')[1][0].getDate()).toEqual(1);
|
||||
|
||||
triggerDrag(wrapper.findAll('.van-picker-column').at(1), 0, -100);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[2][0].getMonth()).toEqual(11);
|
||||
expect(wrapper.emitted('confirm')[2][0].getDate()).toEqual(31);
|
||||
});
|
||||
|
||||
test('cancel event', () => {
|
||||
const wrapper = mount(DatePicker);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user