alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(DatePicker): support datehour (#6732)

Browse Source 
* feat(DatePicker): support datehour

* add unit test & edit readme for datehour

* fix(DatePicker): try to fix unit test
This commit is contained in:
zhangyong
2020-07-11 11:25:11 +08:00
committed by GitHub
parent 7b21a23cae
commit 7987287be0
6 changed files with 344 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/datetime-picker/test/__snapshots__/demo.spec.js.snap
+248
View File
@@ -1065,6 +1065,254 @@ 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">2020</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">2021</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">2022</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">2023</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">2024</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">2025</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>
</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-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">00</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" 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>
</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>
src/datetime-picker/test/date-picker.spec.js
+17
View File
@@ -122,6 +122,23 @@ test('month-day type', () => {
expect(wrapper.emitted('confirm')[2][0].getDate()).toEqual(31);
});
test('datehour type', async () => {
const wrapper = mount(DatePicker, {
propsData: {
minDate: new Date(2010, 0, 1),
maxDate: new Date(2025, 10, 1),
value: new Date(2020, 10, 1, 0, 0),
},
});
wrapper.find('.van-picker__confirm').trigger('click');
expect(wrapper.emitted('confirm')[0][0].getHours()).toEqual(0);
triggerDrag(wrapper.findAll('.van-picker-column').at(3), 0, -300);
wrapper.find('.van-picker__confirm').trigger('click');
expect(wrapper.emitted('confirm')[1][0].getHours()).toEqual(23);
});
test('cancel event', () => {
const wrapper = mount(DatePicker);