diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md
index 367960864..43df76f75 100644
--- a/src/calendar/README.zh-CN.md
+++ b/src/calendar/README.zh-CN.md
@@ -75,6 +75,51 @@ export default {
}
```
+### 快捷选择
+
+将`show-confirm`设置为`false`可以隐藏确认按钮，这种情况下选择完成后会立即触发`confirm`事件
+
+```html
+
+```
+
+### 自定义日期范围
+
+通过`min-date`和`max-date`定义日历的范围
+
+```html
+
+```
+
+```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
+
+```
+
## 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 | 重置选中的日期到默认值 | - | - |
diff --git a/src/calendar/demo/index.vue b/src/calendar/demo/index.vue
index 38b24059d..e1769345a 100644
--- a/src/calendar/demo/index.vue
+++ b/src/calendar/demo/index.vue
@@ -3,46 +3,60 @@
-
+
+
+
+
+
+
+
-
-
@@ -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;
}
}
};
diff --git a/src/calendar/index.js b/src/calendar/index.js
index ceafea1e7..5a958fd90 100644
--- a/src/calendar/index.js
+++ b/src/calendar/index.js
@@ -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 {