mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Sylvaner
GitHub
parent
f782edc6a4
commit
ea0708357f
@ -83,20 +83,28 @@ export default createComponent({
|
||||
},
|
||||
];
|
||||
|
||||
if (this.type === 'date') {
|
||||
result = result.slice(0, 3);
|
||||
switch (this.type) {
|
||||
case 'date':
|
||||
result = result.slice(0, 3);
|
||||
break;
|
||||
case 'year-month':
|
||||
result = result.slice(0, 2);
|
||||
break;
|
||||
case 'month-day':
|
||||
result = result.slice(1, 3);
|
||||
break;
|
||||
case 'datehour':
|
||||
result = result.slice(0, 4);
|
||||
break;
|
||||
}
|
||||
|
||||
if (this.type === 'year-month') {
|
||||
result = result.slice(0, 2);
|
||||
}
|
||||
|
||||
if (this.type === 'month-day') {
|
||||
result = result.slice(1, 3);
|
||||
}
|
||||
|
||||
if (this.type === 'datehour') {
|
||||
result = result.slice(0, 4);
|
||||
if (this.columnsOrder) {
|
||||
const columnsOrder = this.columnsOrder.concat(
|
||||
result.map((column) => column.type)
|
||||
);
|
||||
result.sort(
|
||||
(a, b) => columnsOrder.indexOf(a.type) - columnsOrder.indexOf(b.type)
|
||||
);
|
||||
}
|
||||
|
||||
return result;
|
||||
@ -155,7 +163,13 @@ export default createComponent({
|
||||
updateInnerValue() {
|
||||
const { type } = this;
|
||||
const indexes = this.getPicker().getIndexes();
|
||||
const getValue = (index) => {
|
||||
const getValue = (type) => {
|
||||
let index = 0;
|
||||
this.originColumns.forEach((column, columnIndex) => {
|
||||
if (type === column.type) {
|
||||
index = columnIndex;
|
||||
}
|
||||
});
|
||||
const { values } = this.originColumns[index];
|
||||
return getTrueValue(values[indexes[index]]);
|
||||
};
|
||||
@ -163,15 +177,14 @@ export default createComponent({
|
||||
let year;
|
||||
let month;
|
||||
let day;
|
||||
|
||||
if (type === 'month-day') {
|
||||
year = this.innerValue.getFullYear();
|
||||
month = getValue(0);
|
||||
day = getValue(1);
|
||||
month = getValue('month');
|
||||
day = getValue('day');
|
||||
} else {
|
||||
year = getValue(0);
|
||||
month = getValue(1);
|
||||
day = type === 'year-month' ? 1 : getValue(2);
|
||||
year = getValue('year');
|
||||
month = getValue('month');
|
||||
day = type === 'year-month' ? 1 : getValue('day');
|
||||
}
|
||||
|
||||
const maxDay = getMonthEndDay(year, month);
|
||||
@ -181,12 +194,12 @@ export default createComponent({
|
||||
let minute = 0;
|
||||
|
||||
if (type === 'datehour') {
|
||||
hour = getValue(3);
|
||||
hour = getValue('hour');
|
||||
}
|
||||
|
||||
if (type === 'datetime') {
|
||||
hour = getValue(3);
|
||||
minute = getValue(4);
|
||||
hour = getValue('hour');
|
||||
minute = getValue('minute');
|
||||
}
|
||||
|
||||
const value = new Date(year, month - 1, day, hour, minute);
|
||||
@ -208,32 +221,23 @@ export default createComponent({
|
||||
const value = this.innerValue;
|
||||
const { formatter } = this;
|
||||
|
||||
let values = [
|
||||
formatter('year', `${value.getFullYear()}`),
|
||||
formatter('month', padZero(value.getMonth() + 1)),
|
||||
formatter('day', padZero(value.getDate())),
|
||||
];
|
||||
|
||||
if (this.type === 'datetime') {
|
||||
values.push(
|
||||
formatter('hour', padZero(value.getHours())),
|
||||
formatter('minute', padZero(value.getMinutes()))
|
||||
);
|
||||
}
|
||||
|
||||
if (this.type === 'datehour') {
|
||||
values.push(
|
||||
formatter('hour', padZero(value.getHours()))
|
||||
);
|
||||
}
|
||||
|
||||
if (this.type === 'year-month') {
|
||||
values = values.slice(0, 2);
|
||||
}
|
||||
|
||||
if (this.type === 'month-day') {
|
||||
values = values.slice(1, 3);
|
||||
}
|
||||
const values = this.originColumns.map((column) => {
|
||||
switch (column.type) {
|
||||
case 'year':
|
||||
return formatter('year', `${value.getFullYear()}`);
|
||||
case 'month':
|
||||
return formatter('month', padZero(value.getMonth() + 1));
|
||||
case 'day':
|
||||
return formatter('day', padZero(value.getDate()));
|
||||
case 'hour':
|
||||
return formatter('hour', padZero(value.getHours()));
|
||||
case 'minute':
|
||||
return formatter('minute', padZero(value.getMinutes()));
|
||||
default:
|
||||
// no default
|
||||
return null;
|
||||
}
|
||||
});
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getPicker().setValues(values);
|
||||
|
||||
@ -208,6 +208,42 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Columns Order
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="date"
|
||||
title="自定义列排序"
|
||||
:columns-order="['month', 'day', 'year']"
|
||||
:formatter="formatter"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: new Date(),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
formatter(type, val) {
|
||||
if (type === 'year') {
|
||||
return val + ' Year';
|
||||
}
|
||||
if (type === 'month') {
|
||||
return val + ' Month';
|
||||
}
|
||||
if (type === 'day') {
|
||||
return val + ' Day';
|
||||
}
|
||||
return val;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@ -222,6 +258,7 @@ export default {
|
||||
| loading | Whether to show loading prompt | _boolean_ | `false` |
|
||||
| filter | Option filter | _(type, vals) => vals_ | - |
|
||||
| formatter | Option text formatter | _(type, val) => val_ | - |
|
||||
| columns-order `v2.9.2` | Array for ordering columns, where item can be set to<br> `year`, `month`, `day`, `hour` and `minute` | _string[]_ | - |
|
||||
| item-height `v2.8.6` | Option height, supports `px` ans `rem` unit, default `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | Count of visible columns | _number \| string_ | `5` |
|
||||
| swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
|
||||
|
||||
@ -217,6 +217,42 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 自定义列排序
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="date"
|
||||
title="自定义列排序"
|
||||
:columns-order="['month', 'day', 'year']"
|
||||
:formatter="formatter"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: new Date(),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
formatter(type, val) {
|
||||
if (type === 'year') {
|
||||
return val + '年';
|
||||
}
|
||||
if (type === 'month') {
|
||||
return val + '月';
|
||||
}
|
||||
if (type === 'day') {
|
||||
return val + '日';
|
||||
}
|
||||
return val;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@ -231,6 +267,7 @@ export default {
|
||||
| loading | 是否显示加载状态 | _boolean_ | `false` |
|
||||
| filter | 选项过滤函数 | _(type, vals) => vals_ | - |
|
||||
| formatter | 选项格式化函数 | _(type, val) => val_ | - |
|
||||
| columns-order `v2.9.2` | 自定义列排序数组, 子项可选值为<br> `year`、`month`、`day`、`hour`、`minute` | _string[]_ | - |
|
||||
| item-height `v2.8.6` | 选项高度，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | 可见的选项个数 | _number \| string_ | `5` |
|
||||
| swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |
|
||||
|
||||
@ -70,6 +70,18 @@
|
||||
:filter="filter"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('sortColumns')">
|
||||
<van-datetime-picker
|
||||
v-model="value.sortColumnsDate"
|
||||
type="date"
|
||||
:title="t('sortColumns')"
|
||||
:columns-order="['month', 'day', 'year']"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:formatter="formatter"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -87,9 +99,10 @@ export default {
|
||||
monthDayType: '选择月日',
|
||||
yearMonthType: '选择年月',
|
||||
optionFilter: '选项过滤器',
|
||||
sortColumns: '自定义列排序',
|
||||
},
|
||||
'en-US': {
|
||||
day: 'Day',
|
||||
day: ' Day',
|
||||
year: ' Year',
|
||||
month: ' Month',
|
||||
timeType: 'Choose Time',
|
||||
@ -99,6 +112,7 @@ export default {
|
||||
monthDayType: 'Choose Month-Day',
|
||||
yearMonthType: 'Choose Year-Month',
|
||||
optionFilter: 'Option Filter',
|
||||
sortColumns: 'Columns Order',
|
||||
},
|
||||
},
|
||||
|
||||
@ -114,6 +128,7 @@ export default {
|
||||
monthDay: new Date(2020, 0, 1),
|
||||
yearMonth: new Date(2020, 0, 1),
|
||||
optionFilter: '12:00',
|
||||
sortColumnsDate: new Date(2020, 0, 1),
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
@ -15,6 +15,7 @@ export const sharedProps = {
|
||||
type: Function,
|
||||
default: (type, value) => value,
|
||||
},
|
||||
columnsOrder: Array,
|
||||
};
|
||||
|
||||
export const TimePickerMixin = {
|
||||
|
||||
@ -1442,5 +1442,177 @@ 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-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__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>
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user