[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('title1')">
|
||||
<van-datetime-picker
|
||||
v-model="currentDate1"
|
||||
type="datetime"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-datetime-picker
|
||||
v-model="currentDate2"
|
||||
type="date"
|
||||
:min-date="minDate"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-datetime-picker
|
||||
v-model="currentDate3"
|
||||
type="year-month"
|
||||
:min-date="minDate"
|
||||
:formatter="formatter"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-datetime-picker
|
||||
v-model="currentTime1"
|
||||
type="time"
|
||||
:min-hour="10"
|
||||
:max-hour="20"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('optionFilter')">
|
||||
<van-datetime-picker
|
||||
v-model="currentTime2"
|
||||
type="time"
|
||||
:filter="filter"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title1: '选择完整时间',
|
||||
title2: '选择日期（年月日）',
|
||||
title3: '选择日期（年月）',
|
||||
title4: '选择时间',
|
||||
year: '年',
|
||||
month: '月',
|
||||
optionFilter: '选项过滤器'
|
||||
},
|
||||
'en-US': {
|
||||
title1: 'Choose DateTime',
|
||||
title2: 'Choose Date',
|
||||
title3: 'Choose Year-Month',
|
||||
title4: 'Choose Time',
|
||||
year: ' Year',
|
||||
month: ' Month',
|
||||
optionFilter: 'Option Filter'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
minDate: new Date(2018, 0, 1),
|
||||
maxDate: new Date(2019, 10, 1),
|
||||
currentDate1: new Date(2018, 0, 1),
|
||||
currentDate2: null,
|
||||
currentDate3: new Date(2018, 0, 1),
|
||||
currentTime1: '12:00',
|
||||
currentTime2: '12:00',
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatter(type, value) {
|
||||
if (type === 'year') {
|
||||
return value + this.$t('year');
|
||||
}
|
||||
if (type === 'month') {
|
||||
return value + this.$t('month');
|
||||
}
|
||||
return value;
|
||||
},
|
||||
|
||||
filter(type, values) {
|
||||
if (type === 'minute') {
|
||||
return values.filter(value => value % 5 === 0);
|
||||
}
|
||||
|
||||
return values;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,172 @@
|
||||
# DatetimePicker
|
||||
|
||||
### Intro
|
||||
|
||||
The DatetimePicker component is usually used with [Popup](#/en-US/popup) Component.
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { DatetimePicker } from 'vant';
|
||||
|
||||
Vue.use(DatetimePicker);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Choose DateTime
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="datetime"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minHour: 10,
|
||||
maxHour: 20,
|
||||
minDate: new Date(),
|
||||
maxDate: new Date(2019, 10, 1),
|
||||
currentDate: new Date()
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Choose Date
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="date"
|
||||
:min-date="minDate"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: new Date()
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Choose Year-Month
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="year-month"
|
||||
:min-date="minDate"
|
||||
:formatter="formatter"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: new Date()
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatter(type, value) {
|
||||
if (type === 'year') {
|
||||
return `${value} Year`;
|
||||
} else if (type === 'month') {
|
||||
return `${value} Month`
|
||||
}
|
||||
return value;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Choose Time
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentTime"
|
||||
type="time"
|
||||
:min-hour="10"
|
||||
:max-hour="20"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentTime: '12:00'
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Option Filter
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentTime"
|
||||
type="time"
|
||||
:filter="filter"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentTime: '12:00'
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
filter(type, options) {
|
||||
if (type === 'minute') {
|
||||
return options.filter(option => option % 5 === 0)
|
||||
}
|
||||
|
||||
return options;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|------|
|
||||
| type | Can be set to `date` `time`<br> `year-month` | `String` | `datetime` |
|
||||
| min-date | Min date | `Date` | Ten years ago on January 1 |
|
||||
| max-date | Max date | `Date` | Ten years later on December 31 |
|
||||
| min-hour | Min hour for `time` type | `Number` | `0` |
|
||||
| max-hour | Max hour for `time` type | `Number` | `23` |
|
||||
| min-minute | Max minute for `time` type | `Number` | `0` |
|
||||
| max-minute | Max minute for `time` type | `Number` | `59` |
|
||||
| filter | Option filter | `(type, values) => values` | - |
|
||||
| formatter | Option text formatter | `(type, value) => value` | - |
|
||||
| title | Toolbar title | `String` | `''` |
|
||||
| loading | Whether to show loading prompt | `Boolean` | `false` |
|
||||
| item-height | Option height | `Number` | `44` |
|
||||
| confirm-button-text | Text of confirm button | `String` | `Confirm` |
|
||||
| cancel-button-text | Text of cancel button | `String` | `Cancel` |
|
||||
| visible-item-count | Count of visible columns | `Number` | `5` |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| change | Triggered when value changed | picker: picker instance |
|
||||
| confirm | Triggered when click confirm button | value: current value |
|
||||
| cancel | Triggered when click cancel button | - |
|
||||
@@ -0,0 +1,327 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { range } from '../utils/format/number';
|
||||
import { padZero } from '../utils/format/string';
|
||||
import Picker from '../picker';
|
||||
import { pickerProps } from '../picker/shared';
|
||||
import {
|
||||
times,
|
||||
isValidDate,
|
||||
getTrueValue,
|
||||
getMonthEndDay
|
||||
} from './utils';
|
||||
|
||||
const [createComponent, bem] = createNamespace('datetime-picker');
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
export default createComponent({
|
||||
props: {
|
||||
...pickerProps,
|
||||
value: null,
|
||||
filter: Function,
|
||||
minHour: Number,
|
||||
minMinute: Number,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'datetime'
|
||||
},
|
||||
showToolbar: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
default: 'YYYY.MM.DD HH时 mm分'
|
||||
},
|
||||
formatter: {
|
||||
type: Function,
|
||||
default: (type, value) => value
|
||||
},
|
||||
minDate: {
|
||||
type: Date,
|
||||
default: () => new Date(currentYear - 10, 0, 1),
|
||||
validator: isValidDate
|
||||
},
|
||||
maxDate: {
|
||||
type: Date,
|
||||
default: () => new Date(currentYear + 10, 11, 31),
|
||||
validator: isValidDate
|
||||
},
|
||||
maxHour: {
|
||||
type: Number,
|
||||
default: 23
|
||||
},
|
||||
maxMinute: {
|
||||
type: Number,
|
||||
default: 59
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
innerValue: this.correctValue(this.value)
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(val) {
|
||||
val = this.correctValue(val);
|
||||
const isEqual =
|
||||
this.type === 'time'
|
||||
? val === this.innerValue
|
||||
: val.valueOf() === this.innerValue.valueOf();
|
||||
|
||||
if (!isEqual) {
|
||||
this.innerValue = val;
|
||||
|
||||
if (this.type === 'time') {
|
||||
this.updateColumnValue(val);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
innerValue(val) {
|
||||
this.$emit('input', val);
|
||||
},
|
||||
|
||||
columns() {
|
||||
this.updateColumnValue(this.innerValue);
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
ranges() {
|
||||
if (this.type === 'time') {
|
||||
return [
|
||||
{
|
||||
type: 'hour',
|
||||
range: [this.minHour, this.maxHour]
|
||||
},
|
||||
{
|
||||
type: 'minute',
|
||||
range: [this.minMinute, this.maxMinute]
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
const {
|
||||
maxYear,
|
||||
maxDate,
|
||||
maxMonth,
|
||||
maxHour,
|
||||
maxMinute
|
||||
} = this.getBoundary('max', this.innerValue);
|
||||
|
||||
const {
|
||||
minYear,
|
||||
minDate,
|
||||
minMonth,
|
||||
minHour,
|
||||
minMinute
|
||||
} = this.getBoundary('min', this.innerValue);
|
||||
|
||||
const result = [
|
||||
{
|
||||
type: 'year',
|
||||
range: [minYear, maxYear]
|
||||
},
|
||||
{
|
||||
type: 'month',
|
||||
range: [minMonth, maxMonth]
|
||||
},
|
||||
{
|
||||
type: 'day',
|
||||
range: [minDate, maxDate]
|
||||
},
|
||||
{
|
||||
type: 'hour',
|
||||
range: [minHour, maxHour]
|
||||
},
|
||||
{
|
||||
type: 'minute',
|
||||
range: [minMinute, maxMinute]
|
||||
}
|
||||
];
|
||||
|
||||
if (this.type === 'date') result.splice(3, 2);
|
||||
if (this.type === 'year-month') result.splice(2, 3);
|
||||
return result;
|
||||
},
|
||||
|
||||
columns() {
|
||||
const results = this.ranges.map(({ type, range: rangeArr }) => {
|
||||
let values = times(rangeArr[1] - rangeArr[0] + 1, index => {
|
||||
const value = padZero(rangeArr[0] + index);
|
||||
return this.formatter(type, value);
|
||||
});
|
||||
|
||||
if (this.filter) {
|
||||
values = this.filter(type, values);
|
||||
}
|
||||
|
||||
return {
|
||||
values
|
||||
};
|
||||
});
|
||||
|
||||
return results;
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.updateColumnValue(this.innerValue);
|
||||
},
|
||||
|
||||
methods: {
|
||||
correctValue(value) {
|
||||
// validate value
|
||||
const isDateType = this.type !== 'time';
|
||||
|
||||
if (isDateType && !isValidDate(value)) {
|
||||
value = this.minDate;
|
||||
} else if (!value) {
|
||||
value = `${padZero(this.minHour)}:00`;
|
||||
}
|
||||
|
||||
// time type
|
||||
if (!isDateType) {
|
||||
let [hour, minute] = value.split(':');
|
||||
hour = padZero(range(hour, this.minHour, this.maxHour));
|
||||
minute = padZero(range(minute, this.minMinute, this.maxMinute));
|
||||
|
||||
return `${hour}:${minute}`;
|
||||
}
|
||||
|
||||
// date type
|
||||
value = Math.max(value, this.minDate.getTime());
|
||||
value = Math.min(value, this.maxDate.getTime());
|
||||
|
||||
return new Date(value);
|
||||
},
|
||||
|
||||
getBoundary(type, value) {
|
||||
const boundary = this[`${type}Date`];
|
||||
const year = boundary.getFullYear();
|
||||
let month = 1;
|
||||
let date = 1;
|
||||
let hour = 0;
|
||||
let minute = 0;
|
||||
|
||||
if (type === 'max') {
|
||||
month = 12;
|
||||
date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
|
||||
hour = 23;
|
||||
minute = 59;
|
||||
}
|
||||
|
||||
if (value.getFullYear() === year) {
|
||||
month = boundary.getMonth() + 1;
|
||||
if (value.getMonth() + 1 === month) {
|
||||
date = boundary.getDate();
|
||||
if (value.getDate() === date) {
|
||||
hour = boundary.getHours();
|
||||
if (value.getHours() === hour) {
|
||||
minute = boundary.getMinutes();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
[`${type}Year`]: year,
|
||||
[`${type}Month`]: month,
|
||||
[`${type}Date`]: date,
|
||||
[`${type}Hour`]: hour,
|
||||
[`${type}Minute`]: minute
|
||||
};
|
||||
},
|
||||
|
||||
onConfirm() {
|
||||
this.$emit('confirm', this.innerValue);
|
||||
},
|
||||
|
||||
onChange(picker) {
|
||||
let value;
|
||||
|
||||
if (this.type === 'time') {
|
||||
const indexes = picker.getIndexes();
|
||||
value = `${indexes[0] + this.minHour}:${indexes[1] + this.minMinute}`;
|
||||
} else {
|
||||
const values = picker.getValues();
|
||||
const year = getTrueValue(values[0]);
|
||||
const month = getTrueValue(values[1]);
|
||||
const maxDate = getMonthEndDay(year, month);
|
||||
let date = getTrueValue(values[2]);
|
||||
if (this.type === 'year-month') {
|
||||
date = 1;
|
||||
}
|
||||
date = date > maxDate ? maxDate : date;
|
||||
let hour = 0;
|
||||
let minute = 0;
|
||||
if (this.type === 'datetime') {
|
||||
hour = getTrueValue(values[3]);
|
||||
minute = getTrueValue(values[4]);
|
||||
}
|
||||
|
||||
value = new Date(year, month - 1, date, hour, minute);
|
||||
}
|
||||
|
||||
this.innerValue = this.correctValue(value);
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$nextTick(() => {
|
||||
this.$emit('change', picker);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
updateColumnValue(value) {
|
||||
let values = [];
|
||||
const { formatter } = this;
|
||||
|
||||
if (this.type === 'time') {
|
||||
const pair = value.split(':');
|
||||
values = [formatter('hour', pair[0]), formatter('minute', pair[1])];
|
||||
} else {
|
||||
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 === 'year-month') {
|
||||
values = values.slice(0, 2);
|
||||
}
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.picker.setValues(values);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const props = {};
|
||||
Object.keys(pickerProps).forEach(key => {
|
||||
props[key] = this[key];
|
||||
});
|
||||
|
||||
return (
|
||||
<Picker
|
||||
class={bem()}
|
||||
ref="picker"
|
||||
columns={this.columns}
|
||||
onChange={this.onChange}
|
||||
onConfirm={this.onConfirm}
|
||||
onCancel={() => {
|
||||
this.$emit('cancel');
|
||||
}}
|
||||
{...{ props }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,447 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</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; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2018</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2019</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; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</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; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">31</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; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">00</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</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; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">00</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">32</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">33</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">34</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">36</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">37</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">38</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">39</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">41</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">42</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">43</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">44</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">46</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">47</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">48</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">49</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">51</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">52</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">53</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">54</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">56</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">57</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">58</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</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; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2018</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2019</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2020</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2021</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2022</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2023</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2024</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2025</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2026</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2027</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2028</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2029</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; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</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; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</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; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2018年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2019年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2020年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2021年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2022年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2023年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2024年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2025年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2026年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2027年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2028年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2029年</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; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12月</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</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; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">00</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">32</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">33</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">34</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">36</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">37</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">38</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">39</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">41</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">42</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">43</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">44</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">46</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">47</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">48</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">49</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">51</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">52</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">53</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">54</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">56</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">57</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">58</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -440px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">00</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</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; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">00</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
@@ -0,0 +1,25 @@
|
||||
export function isValidDate(date) {
|
||||
return Object.prototype.toString.call(date) === '[object Date]' && !isNaN(date.getTime());
|
||||
}
|
||||
|
||||
export function times(n, iteratee) {
|
||||
let index = -1;
|
||||
const result = Array(n);
|
||||
|
||||
while (++index < n) {
|
||||
result[index] = iteratee(index);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
export function getTrueValue(formattedValue) {
|
||||
if (!formattedValue) return;
|
||||
while (isNaN(parseInt(formattedValue, 10))) {
|
||||
formattedValue = formattedValue.slice(1);
|
||||
}
|
||||
return parseInt(formattedValue, 10);
|
||||
}
|
||||
|
||||
export function getMonthEndDay(year, month) {
|
||||
return 32 - new Date(year, month - 1, 32).getDate();
|
||||
}
|
||||
@@ -0,0 +1,191 @@
|
||||
# DatetimePicker 时间选择
|
||||
|
||||
### 介绍
|
||||
|
||||
时间选择组件通常与 [弹出层](#/zh-CN/popup) 组件配合使用
|
||||
|
||||
### 引入
|
||||
|
||||
``` javascript
|
||||
import { DatetimePicker } from 'vant';
|
||||
|
||||
Vue.use(DatetimePicker);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 选择完整时间
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="datetime"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minHour: 10,
|
||||
maxHour: 20,
|
||||
minDate: new Date(),
|
||||
maxDate: new Date(2019, 10, 1),
|
||||
currentDate: new Date()
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 选择日期（年月日）
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="date"
|
||||
:min-date="minDate"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: new Date()
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 选择日期（年月）
|
||||
|
||||
通过传入`formatter`函数，可以对选项文字进行格式化处理
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="year-month"
|
||||
:min-date="minDate"
|
||||
:formatter="formatter"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: new Date()
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatter(type, value) {
|
||||
if (type === 'year') {
|
||||
return `${value}年`;
|
||||
} else if (type === 'month') {
|
||||
return `${value}月`
|
||||
}
|
||||
return value;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 选择时间
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentTime"
|
||||
type="time"
|
||||
:min-hour="10"
|
||||
:max-hour="20"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentTime: '12:00'
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 选项过滤器
|
||||
|
||||
通过传入`filter`函数，可以对选项数组进行过滤，实现自定义时间间隔
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentTime"
|
||||
type="time"
|
||||
:filter="filter"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentTime: '12:00'
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
filter(type, options) {
|
||||
if (type === 'minute') {
|
||||
return options.filter(option => option % 5 === 0)
|
||||
}
|
||||
|
||||
return options;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| type | 类型，可选值为 `date` <br> `time` `year-month` | `String` | `datetime` | 1.0.2 |
|
||||
| min-date | 可选的最小时间，精确到分钟 | `Date` | 十年前 | - |
|
||||
| max-date | 可选的最大时间，精确到分钟 | `Date` | 十年后 | - |
|
||||
| min-hour | 可选的最小小时，针对 time 类型 | `Number` | `0` | - |
|
||||
| max-hour | 可选的最大小时，针对 time 类型 | `Number` | `23` | - |
|
||||
| min-minute | 可选的最小分钟，针对 time 类型 | `Number` | `0` | 1.1.15 |
|
||||
| max-minute | 可选的最大分钟，针对 time 类型 | `Number` | `59` | 1.1.15 |
|
||||
| filter | 选项过滤函数 | `(type, values) => values` | - | 2.0.0 |
|
||||
| formatter | 选项格式化函数 | `(type, value) => value` | - | 1.1.14 |
|
||||
| title | 顶部栏标题 | `String` | `''` | 1.0.4 |
|
||||
| show-toolbar | 是否显示顶部栏 | `Boolean` | `false` | 1.0.2 |
|
||||
| loading | 是否显示加载状态 | `Boolean` | `false` | 1.0.4 |
|
||||
| item-height | 选项高度 | `Number` | `44` | 1.0.4 |
|
||||
| confirm-button-text | 确认按钮文字 | `String` | `确认` | 1.0.4 |
|
||||
| cancel-button-text | 取消按钮文字 | `String` | `取消` | 1.0.4 |
|
||||
| visible-item-count | 可见的选项个数 | `Number` | `5` | 1.0.4 |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| change | 当值变化时触发的事件 | picker 实例 |
|
||||
| confirm | 点击完成按钮时触发的事件 | 当前 value |
|
||||
| cancel | 点击取消按钮时触发的事件 | - |
|
||||
|
||||
### change 事件
|
||||
|
||||
在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
|
||||
|
||||
| 函数 | 说明 |
|
||||
|------|------|
|
||||
| getColumnValue(index) | 获取对应列中选中的值 |
|
||||
| setColumnValue(index, value) | 设置对应列中选中的值 |
|
||||
| getColumnValues(index) | 获取对应列中所有的备选值 |
|
||||
| setColumnValues(index, values) | 设置对应列中所有的备选值 |
|
||||
| getValues() | 获取所有列中被选中的值，返回一个数组 |
|
||||
| setValues(values) | `values`为一个数组，设置所有列中被选中的值 |
|
||||
Reference in New Issue
Block a user