mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Calendar): add reset method
This commit is contained in:
陈嘉涵
neverland
parent
6d85fc0aac
commit
1f6cce692c
@ -75,6 +75,51 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
### 快捷选择
|
||||
|
||||
将`show-confirm`设置为`false`可以隐藏确认按钮，这种情况下选择完成后会立即触发`confirm`事件
|
||||
|
||||
```html
|
||||
<van-calendar v-model="show" :show-confirm="false" />
|
||||
```
|
||||
|
||||
### 自定义日期范围
|
||||
|
||||
通过`min-date`和`max-date`定义日历的范围
|
||||
|
||||
```html
|
||||
<van-calendar
|
||||
v-model="show"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
minDate: new Date(2010, 0, 1),
|
||||
maxDate: new Date(2010, 0, 31)
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 自定义按钮文字
|
||||
|
||||
通过`confirm-text`设置按钮文字，通过`confirm-disabled-text`设置按钮禁用时的文字
|
||||
|
||||
```html
|
||||
<van-calendar
|
||||
v-model="show"
|
||||
type="range"
|
||||
confirm-text="完成"
|
||||
confirm-disabled-text="请选择结束时间"
|
||||
/>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@ -87,10 +132,10 @@ export default {
|
||||
| min-date | 最小日期 | *Date* | 当前日期 | - |
|
||||
| max-date | 最大日期 | *Date* | 当前日期的六个月后 | - |
|
||||
| default-date | 默认选中的日期 | *Date \| Date[]* | 今天 | - |
|
||||
| row-height | 日期所在行的高度 | *number* | `64` | - |
|
||||
| row-height | 日期行高 | *number* | `64` | - |
|
||||
| poppable | 是否以弹层的形式展示日历 | *boolean* | `true` | - |
|
||||
| show-mark | 是否显示月份背景水印 | *boolean* | `true` | - |
|
||||
| show-confirm | 是否展示确认按钮 | *boolean* | `false` | - |
|
||||
| show-confirm | 是否展示确认按钮 | *boolean* | `true` | - |
|
||||
| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` | - |
|
||||
| confirm-text | 确认按钮的文字 | *string* | `确定` | - |
|
||||
| confirm-disabled-text | 确认按钮处于禁用状态时的文字 | *string* | `确定` | - |
|
||||
@ -115,3 +160,4 @@ export default {
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
| reset | 重置选中的日期到默认值 | - | - |
|
||||
|
||||
@ -3,46 +3,60 @@
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-cell
|
||||
is-link
|
||||
:title="$t('selectSingleDate')"
|
||||
:value="formatFullDate(date.selectSingleDate)"
|
||||
@click="toggle('selectSingleDate', true)"
|
||||
:title="$t('selectSingle')"
|
||||
:value="formatFullDate(date.selectSingle)"
|
||||
@click="show('single', 'selectSingle')"
|
||||
/>
|
||||
|
||||
<van-cell
|
||||
is-link
|
||||
:title="$t('selectDateRange')"
|
||||
:value="formatDateRange(date.selectDateRange)"
|
||||
@click="toggle('selectDateRange', true)"
|
||||
:title="$t('selectRange')"
|
||||
:value="formatRange(date.selectRange)"
|
||||
@click="show('range', 'selectRange')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('showConfirm')">
|
||||
<demo-block :title="$t('quickSelect')">
|
||||
<van-cell
|
||||
is-link
|
||||
:title="$t('selectSingleDate')"
|
||||
:value="formatFullDate(date.selectSingleDate)"
|
||||
@click="toggle('selectSingleDate', true, 'showConfirm')"
|
||||
:title="$t('selectSingle')"
|
||||
:value="formatFullDate(date.quickSelect1)"
|
||||
@click="show('single', 'quickSelect1')"
|
||||
/>
|
||||
|
||||
<van-cell
|
||||
is-link
|
||||
:title="$t('selectDateRange')"
|
||||
:value="formatDateRange(date.selectDateRange)"
|
||||
@click="toggle('selectDateRange', true, 'showConfirm')"
|
||||
:title="$t('selectRange')"
|
||||
:value="formatRange(date.quickSelect2)"
|
||||
@click="show('range', 'quickSelect2')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customCalendar')">
|
||||
<van-cell
|
||||
is-link
|
||||
:title="$t('customRange')"
|
||||
:value="formatFullDate(date.customRange)"
|
||||
@click="show('single', 'customRange')"
|
||||
/>
|
||||
|
||||
<van-cell
|
||||
is-link
|
||||
:title="$t('customConfirm')"
|
||||
:value="formatRange(date.customConfirm)"
|
||||
@click="show('range', 'customConfirm')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<van-calendar
|
||||
v-model="show.selectSingleDate"
|
||||
v-model="showCalendar"
|
||||
:type="type"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:show-confirm="showConfirm"
|
||||
@confirm="onConfirm($event, 'selectSingleDate')"
|
||||
/>
|
||||
|
||||
<van-calendar
|
||||
v-model="show.selectDateRange"
|
||||
type="range"
|
||||
:show-confirm="showConfirm"
|
||||
@confirm="onConfirm($event, 'selectDateRange')"
|
||||
:confirm-text="confirmText"
|
||||
:confirm-disabled-text="confirmDisabledText"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
</demo-section>
|
||||
</template>
|
||||
@ -51,39 +65,75 @@
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
selectSingleDate: '选择单个日期',
|
||||
selectDateRange: '选择日期区间',
|
||||
showConfirm: '展示确认按钮'
|
||||
selectSingle: '选择单个日期',
|
||||
selectRange: '选择日期区间',
|
||||
quickSelect: '快捷选择',
|
||||
confirmText: '完成',
|
||||
customRange: '自定义范围',
|
||||
customConfirm: '自定义按钮文字',
|
||||
customCalendar: '自定义日历',
|
||||
confirmDisabledText: '请选择结束时间'
|
||||
},
|
||||
'en-US': {
|
||||
selectSingleDate: 'Select Single Date',
|
||||
selectDateRange: 'Select Date Range',
|
||||
showConfirm: 'Show Confirm Button'
|
||||
selectSingle: 'Select Single Date',
|
||||
selectRange: 'Select Date Range',
|
||||
quickSelect: 'Quick Select',
|
||||
confirmText: 'OK',
|
||||
customRange: 'Custom Range',
|
||||
customConfirm: 'Custom Confirm Text',
|
||||
customCalendar: 'Custom Calendar',
|
||||
confirmDisabledText: 'Select End Time'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showConfirm: false,
|
||||
date: {
|
||||
selectSingleDate: null,
|
||||
selectDateRange: []
|
||||
selectSingle: null,
|
||||
selectRange: [],
|
||||
quickSelect1: null,
|
||||
quickSelect2: [],
|
||||
customConfirm: [],
|
||||
customRange: null
|
||||
},
|
||||
show: {
|
||||
selectSingleDate: false,
|
||||
selectDateRange: false
|
||||
}
|
||||
type: 'single',
|
||||
minDate: undefined,
|
||||
maxDate: undefined,
|
||||
showConfirm: false,
|
||||
showCalendar: false,
|
||||
confirmText: undefined,
|
||||
confirmDisabledText: undefined,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggle(type, show, setting) {
|
||||
this.show[type] = show;
|
||||
resetSettings() {
|
||||
this.minDate = undefined;
|
||||
this.maxDate = undefined;
|
||||
this.showConfirm = true;
|
||||
this.confirmText = undefined;
|
||||
this.confirmDisabledText = undefined;
|
||||
},
|
||||
|
||||
if (setting === 'showConfirm') {
|
||||
this.showConfirm = true;
|
||||
} else {
|
||||
this.showConfirm = false;
|
||||
show(type, id) {
|
||||
this.resetSettings();
|
||||
this.id = id;
|
||||
this.type = type;
|
||||
this.showCalendar = true;
|
||||
|
||||
switch (id) {
|
||||
case 'quickSelect1':
|
||||
case 'quickSelect2':
|
||||
this.showConfirm = false;
|
||||
break;
|
||||
case 'customConfirm':
|
||||
this.confirmText = this.$t('confirmText');
|
||||
this.confirmDisabledText = this.$t('confirmDisabledText');
|
||||
break;
|
||||
case 'customRange':
|
||||
this.minDate = new Date(2010, 0, 1);
|
||||
this.maxDate = new Date(2010, 0, 31);
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
@ -99,16 +149,16 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
formatDateRange(dateRange) {
|
||||
formatRange(dateRange) {
|
||||
if (dateRange.length) {
|
||||
const [start, end] = dateRange;
|
||||
return `${this.formatDate(start)} - ${this.formatDate(end)}`;
|
||||
}
|
||||
},
|
||||
|
||||
onConfirm(date, type) {
|
||||
this.date[type] = date;
|
||||
this.show[type] = false;
|
||||
onConfirm(date) {
|
||||
this.showCalendar = false;
|
||||
this.date[this.id] = date;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -20,7 +20,6 @@ export default createComponent({
|
||||
title: String,
|
||||
value: Boolean,
|
||||
defaultDate: [Date, Array],
|
||||
showConfirm: Boolean,
|
||||
confirmText: String,
|
||||
confirmDisabledText: String,
|
||||
type: {
|
||||
@ -52,6 +51,10 @@ export default createComponent({
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showConfirm: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
@ -92,6 +95,10 @@ export default createComponent({
|
||||
},
|
||||
|
||||
watch: {
|
||||
type() {
|
||||
this.reset();
|
||||
},
|
||||
|
||||
value(val) {
|
||||
if (val) {
|
||||
this.initRect();
|
||||
@ -110,6 +117,11 @@ export default createComponent({
|
||||
},
|
||||
|
||||
methods: {
|
||||
// @exposed-api
|
||||
reset() {
|
||||
this.currentDate = this.getInitialDate();
|
||||
},
|
||||
|
||||
initRect() {
|
||||
this.$nextTick(() => {
|
||||
this.bodyHeight = this.$refs.body.getBoundingClientRect().height;
|
||||
@ -140,7 +152,7 @@ export default createComponent({
|
||||
const heightSum = heights.reduce((a, b) => a + b, 0);
|
||||
|
||||
// iOS scroll bounce may exceed the range
|
||||
if (top < 0 || bottom > heightSum) {
|
||||
if (top < 0 || (bottom > heightSum && top > 0)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -178,9 +190,7 @@ export default createComponent({
|
||||
|
||||
if (compareToStart === 1) {
|
||||
this.select([startDay, date], true);
|
||||
}
|
||||
|
||||
if (compareToStart === -1) {
|
||||
} else if (compareToStart === -1) {
|
||||
this.select([date, null]);
|
||||
}
|
||||
} else {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user