mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(DatePicker): support datehour (#6732)
* feat(DatePicker): support datehour * add unit test & edit readme for datehour * fix(DatePicker): try to fix unit test
This commit is contained in:
zhangyong
GitHub
parent
7b21a23cae
commit
7987287be0
@ -95,6 +95,10 @@ export default createComponent({
|
|||||||
result = result.slice(1, 3);
|
result = result.slice(1, 3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.type === 'datehour') {
|
||||||
|
result = result.slice(0, 4);
|
||||||
|
}
|
||||||
|
|
||||||
return result;
|
return result;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -176,6 +180,10 @@ export default createComponent({
|
|||||||
let hour = 0;
|
let hour = 0;
|
||||||
let minute = 0;
|
let minute = 0;
|
||||||
|
|
||||||
|
if (type === 'datehour') {
|
||||||
|
hour = getValue(3);
|
||||||
|
}
|
||||||
|
|
||||||
if (type === 'datetime') {
|
if (type === 'datetime') {
|
||||||
hour = getValue(3);
|
hour = getValue(3);
|
||||||
minute = getValue(4);
|
minute = getValue(4);
|
||||||
@ -213,6 +221,12 @@ export default createComponent({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.type === 'datehour') {
|
||||||
|
values.push(
|
||||||
|
formatter('hour', padZero(value.getHours()))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
if (this.type === 'year-month') {
|
if (this.type === 'year-month') {
|
||||||
values = values.slice(0, 2);
|
values = values.slice(0, 2);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -155,6 +155,30 @@ export default {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Choose DateHour
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-datetime-picker
|
||||||
|
v-model="currentDate"
|
||||||
|
type="datehour"
|
||||||
|
title="Choose DateTime"
|
||||||
|
:min-date="minDate"
|
||||||
|
:max-date="maxDate"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
minDate: new Date(2020, 0, 1),
|
||||||
|
maxDate: new Date(2025, 10, 1),
|
||||||
|
currentDate: new Date(),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
### Option Filter
|
### Option Filter
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@ -190,7 +214,7 @@ export default {
|
|||||||
|
|
||||||
| Attribute | Description | Type | Default |
|
| Attribute | Description | Type | Default |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| type | Can be set to `date` `time`<br> `year-month` `month-day` | _string_ | `datetime` |
|
| type | Can be set to `date` `time`<br> `year-month` `month-day` `datehour` | _string_ | `datetime` |
|
||||||
| title | Toolbar title | _string_ | `''` |
|
| title | Toolbar title | _string_ | `''` |
|
||||||
| confirm-button-text | Text of confirm button | _string_ | `Confirm` |
|
| confirm-button-text | Text of confirm button | _string_ | `Confirm` |
|
||||||
| cancel-button-text | Text of cancel button | _string_ | `Cancel` |
|
| cancel-button-text | Text of cancel button | _string_ | `Cancel` |
|
||||||
|
|||||||
@ -165,6 +165,32 @@ export default {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 选择年月日小时
|
||||||
|
|
||||||
|
将 type 设置为 `datehour` 即可选择日期和小时，包括年月日和小时。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-datetime-picker
|
||||||
|
v-model="currentDate"
|
||||||
|
type="datehour"
|
||||||
|
title="选择年月日小时"
|
||||||
|
:min-date="minDate"
|
||||||
|
:max-date="maxDate"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
minDate: new Date(2020, 0, 1),
|
||||||
|
maxDate: new Date(2025, 10, 1),
|
||||||
|
currentDate: new Date(),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
### 选项过滤器
|
### 选项过滤器
|
||||||
|
|
||||||
通过传入`filter`函数，可以对选项数组进行过滤，实现自定义时间间隔
|
通过传入`filter`函数，可以对选项数组进行过滤，实现自定义时间间隔
|
||||||
@ -197,7 +223,7 @@ export default {
|
|||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| type | 时间类型，可选值为 `date` `time` <br> `year-month` `month-day` | _string_ | `datetime` |
|
| type | 时间类型，可选值为 `date` `time` <br> `year-month` `month-day` `datehour` | _string_ | `datetime` |
|
||||||
| title | 顶部栏标题 | _string_ | `''` |
|
| title | 顶部栏标题 | _string_ | `''` |
|
||||||
| confirm-button-text | 确认按钮文字 | _string_ | `确认` |
|
| confirm-button-text | 确认按钮文字 | _string_ | `确认` |
|
||||||
| cancel-button-text | 取消按钮文字 | _string_ | `取消` |
|
| cancel-button-text | 取消按钮文字 | _string_ | `取消` |
|
||||||
|
|||||||
@ -52,6 +52,16 @@
|
|||||||
/>
|
/>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block card :title="t('datehourType')">
|
||||||
|
<van-datetime-picker
|
||||||
|
v-model="value.datehour"
|
||||||
|
type="datehour"
|
||||||
|
:title="t('datehourType')"
|
||||||
|
:min-date="minDate"
|
||||||
|
:max-date="maxDate"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
<demo-block card :title="t('optionFilter')">
|
<demo-block card :title="t('optionFilter')">
|
||||||
<van-datetime-picker
|
<van-datetime-picker
|
||||||
v-model="value.optionFilter"
|
v-model="value.optionFilter"
|
||||||
@ -73,6 +83,7 @@ export default {
|
|||||||
timeType: '选择时间',
|
timeType: '选择时间',
|
||||||
dateType: '选择年月日',
|
dateType: '选择年月日',
|
||||||
datetimeType: '选择完整时间',
|
datetimeType: '选择完整时间',
|
||||||
|
datehourType: '选择年月日小时',
|
||||||
monthDayType: '选择月日',
|
monthDayType: '选择月日',
|
||||||
yearMonthType: '选择年月',
|
yearMonthType: '选择年月',
|
||||||
optionFilter: '选项过滤器',
|
optionFilter: '选项过滤器',
|
||||||
@ -84,6 +95,7 @@ export default {
|
|||||||
timeType: 'Choose Time',
|
timeType: 'Choose Time',
|
||||||
dateType: 'Choose Date',
|
dateType: 'Choose Date',
|
||||||
datetimeType: 'Choose DateTime',
|
datetimeType: 'Choose DateTime',
|
||||||
|
datehourType: 'Choose DateHour',
|
||||||
monthDayType: 'Choose Month-Day',
|
monthDayType: 'Choose Month-Day',
|
||||||
yearMonthType: 'Choose Year-Month',
|
yearMonthType: 'Choose Year-Month',
|
||||||
optionFilter: 'Option Filter',
|
optionFilter: 'Option Filter',
|
||||||
@ -98,6 +110,7 @@ export default {
|
|||||||
date: null,
|
date: null,
|
||||||
time: '12:00',
|
time: '12:00',
|
||||||
datetime: new Date(2020, 0, 1),
|
datetime: new Date(2020, 0, 1),
|
||||||
|
datehour: new Date(2020, 0, 1),
|
||||||
monthDay: new Date(2020, 0, 1),
|
monthDay: new Date(2020, 0, 1),
|
||||||
yearMonth: new Date(2020, 0, 1),
|
yearMonth: new Date(2020, 0, 1),
|
||||||
optionFilter: '12:00',
|
optionFilter: '12:00',
|
||||||
|
|||||||
@ -1065,6 +1065,254 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<!---->
|
<!---->
|
||||||
</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>
|
||||||
|
<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>
|
||||||
<div class="van-picker van-datetime-picker">
|
<div class="van-picker van-datetime-picker">
|
||||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
||||||
|
|||||||
@ -122,6 +122,23 @@ test('month-day type', () => {
|
|||||||
expect(wrapper.emitted('confirm')[2][0].getDate()).toEqual(31);
|
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', () => {
|
test('cancel event', () => {
|
||||||
const wrapper = mount(DatePicker);
|
const wrapper = mount(DatePicker);
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user