diff --git a/src/calendar/README.md b/src/calendar/README.md
index f75a5a491..0879f3e1d 100644
--- a/src/calendar/README.md
+++ b/src/calendar/README.md
@@ -1,5 +1,9 @@
# Calendar
+### Intro
+
+Calendar component for selecting dates or date ranges
+
### Install
``` javascript
@@ -11,10 +15,162 @@ Vue.use(Calendar);
## Usage
-### Basic Usage
+### Select Single Date
+
+The `confirm` event will be triggered after the date selection is completed
```html
-
+
+
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ date: '',
+ show: false
+ };
+ },
+
+ methods: {
+ formatDate() {
+ return `${date.getMonth() + 1}/${date.getDate()}`;
+ },
+ onConfirm(date) {
+ const [start, end] = date;
+ this.show = false;
+ this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
+ }
+ }
+}
+```
+
+### Select Date Range
+
+You can select a date range after setting `type` to` range`. In range mode, the date returned by the `confirm` event is an array, the first item in the array is the start time and the second item is the end time.
+
+```html
+
+
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ show: false,
+ date: []
+ };
+ },
+ methods: {
+ onConfirm(date) {
+ this.show = false;
+ this.date = date;
+ }
+ }
+}
+```
+
+### Quick Select
+
+Set `show-confirm` to` false` to hide the confirm button. In this case, the `confirm` event will be triggered immediately after the selection is completed.
+
+```html
+
+```
+
+### Custom Date Range
+
+Use `min-date` and `max-date` to custom date range
+
+```html
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ show: false,
+ minDate: new Date(2010, 0, 1),
+ maxDate: new Date(2010, 0, 31)
+ };
+ }
+};
+```
+
+### Custom Confirm Text
+
+Use `confirm-text` and `confirm-disabled-text` to custom confirm text
+
+```html
+
+```
+
+### Custom Day Text
+
+Use `formatter` to custom day text
+
+```html
+
+```
+
+```js
+export default {
+ methods: {
+ formatter(day) {
+ const month = day.date.getMonth() + 1;
+ const date = day.date.getDate();
+
+ if (month === 5) {
+ if (date === 1) {
+ day.topInfo = 'Labor Day';
+ } else if (date === 4) {
+ day.topInfo = 'Youth Day';
+ } else if (date === 11) {
+ day.text = 'Today';
+ }
+ }
+
+ if (day.type === 'start') {
+ day.bottomInfo = 'In';
+ } else if (day.type === 'end') {
+ day.bottomInfo = 'Out';
+ }
+
+ return day;
+ }
+ }
+}
+```
+
+### Tiled display
+
+Set `poppable` to `false`, the calendar will be displayed directly on the page instead of appearing as a popup
+
+```html
+
```
## API
@@ -23,25 +179,50 @@ Vue.use(Calendar);
| Attribute | Description | Type | Default | Version |
|------|------|------|------|------|
+| v-model | Whether to show calendar | *boolean* | `false` | - |
+| type | Type，can be set to `single` `range` | *string* | `single` | - |
+| title | Title of calendar | *string* | `Calendar` | - |
+| min-date | Min date | *Date* | Today | - |
+| max-date | Max date | *Date* | Six months after the today | - |
+| default-date | Default selected date | *Date \| Date[]* | Today | - |
+| row-height | Row height | *number* | `64` | - |
+| formatter | Day formatter | *(day: Day) => Day* | - | - |
+| poppable | Whether to show the calendar inside a popup | *boolean* | `true` | - |
+| show-mark | Whether to show background month mark | *boolean* | `true` | - |
+| show-confirm | Whether to show confirm button | *boolean* | `true` | - |
+| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `true` | - |
+| confirm-text | Confirm button text | *string* | `Confirm` | - |
+| confirm-disabled-text | Confirm button text when disabled | *string* | `Confirm` | - |
-### Props
+### Data Structure of Day
-| Attribute | Description | Type | Default | Version |
-|------|------|------|------|------|
+| Key | Description | Type |
+|------|------|------|
+| date | Date | *Date* |
+| type | Type, can be set to `selected`、`start`、`middle`、`end`、`disabled` | *string* |
+| text | Text | *string* |
+| topInfo | Top info | *string* |
+| bottomInfo | Bottom info | *string* |
+| className | Extra className | *string* |
### Events
-| Event | Description | Parameters |
+| Event | Description | Arguments |
|------|------|------|
+| select | Triggered when select date | value: Date \| Date[] |
+| confirm | Triggered after date selection is complete，if `show-confirm` is` true`, it is triggered after clicking the confirm button | value: Date \| Date[] |
### Slots
-| Name | Description | SlotProps |
-|------|------|------|
+| Name | Description |
+|------|------|
+| title | Custom title |
+| footer | Custom fotter |
### Methods
-Use [ref](https://vuejs.org/v2/api/#ref) to get Canlendar instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get Calendar instance and call instance methods
| Name | Description | Attribute | Return value |
|------|------|------|------|
+| reset | Reset selected date to default date | - | - |
diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md
index 613c4c94b..83b2f3642 100644
--- a/src/calendar/README.zh-CN.md
+++ b/src/calendar/README.zh-CN.md
@@ -29,7 +29,6 @@ Vue.use(Calendar);
export default {
data() {
return {
- // 当前选中的日期
date: '',
show: false
};
@@ -136,10 +135,10 @@ export default {
export default {
methods: {
formatter(day) {
- const month = day.date.getMonth();
+ const month = day.date.getMonth() + 1;
const date = day.date.getDate();
- if (month === 4) {
+ if (month === 5) {
if (date === 1) {
day.topInfo = '劳动节';
} else if (date === 4) {
diff --git a/src/calendar/demo/index.vue b/src/calendar/demo/index.vue
index 4f13b9216..1e83a7569 100644
--- a/src/calendar/demo/index.vue
+++ b/src/calendar/demo/index.vue
@@ -82,6 +82,11 @@
export default {
i18n: {
'zh-CN': {
+ in: '入店',
+ out: '离店',
+ today: '今天',
+ laborDay: '劳动节',
+ youthDay: '五四青年节',
calendar: '日历',
selectSingle: '选择单个日期',
selectRange: '选择日期区间',
@@ -95,6 +100,11 @@ export default {
tiledDisplay: '平铺展示'
},
'en-US': {
+ in: 'In',
+ out: 'Out',
+ today: 'Today',
+ laborDay: 'Labor day',
+ youthDay: 'Youth Day',
calendar: 'Calendar',
selectSingle: 'Select Single Date',
selectRange: 'Select Date Range',
@@ -169,23 +179,23 @@ export default {
},
dayFormatter(day) {
- const month = day.date.getMonth();
+ const month = day.date.getMonth() + 1;
const date = day.date.getDate();
- if (month === 4) {
+ if (month === 5) {
if (date === 1) {
- day.topInfo = '劳动节';
+ day.topInfo = this.$t('laborDay');
} else if (date === 4) {
- day.topInfo = '五四青年节';
+ day.topInfo = this.$t('youthDay');
} else if (date === 11) {
- day.text = '今天';
+ day.text = this.$t('today');
}
}
if (day.type === 'start') {
- day.bottomInfo = '入住';
+ day.bottomInfo = this.$t('in');
} else if (day.type === 'end') {
- day.bottomInfo = '离店';
+ day.bottomInfo = this.$t('out');
}
return day;
diff --git a/src/calendar/index.less b/src/calendar/index.less
index 1319f1b9e..e8c6a7614 100644
--- a/src/calendar/index.less
+++ b/src/calendar/index.less
@@ -8,6 +8,10 @@
&__popup {
height: 80%;
+
+ .van-popup__close-icon {
+ top: 13px;
+ }
}
&__header {
@@ -59,8 +63,8 @@
position: absolute;
top: 50%;
left: 50%;
- z-index: -1;
- color: @gray-2;
+ z-index: 0;
+ color: fade(@gray-2, 80%);
font-size: 160px;
transform: translate(-50%, -50%);
pointer-events: none;
@@ -113,6 +117,10 @@
left: 0;
font-size: @font-size-xs;
line-height: 14px;
+
+ @media (max-width: 350px) {
+ font-size: 9px;
+ }
}
&__top-info {