feat(Calendar): add position prop

src/calendar/README.md

@@ -196,6 +196,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
 | default-date | Default selected date | *Date \| Date[]* | Today | - |
 | row-height | Row height | *number* | `64` | - |
 | formatter | Day formatter | *(day: Day) => Day* | - | - |
+| position | Popup position, can be set to `top` `right` `left` | *string* | `bottom` | - |
 | 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` | - |

src/calendar/README.zh-CN.md

@@ -196,6 +196,7 @@ export default {
 | default-date | 默认选中的日期 | *Date \| Date[]* | 今天 | - |
 | row-height | 日期行高 | *number* | `64` | - |
 | formatter | 日期格式化函数 | *(day: Day) => Day* | - | - |
+| position | 弹出位置，可选值为 `top` `right` `left` | *string* | `bottom` | - |
 | poppable | 是否以弹层的形式展示日历 | *boolean* | `true` | - |
 | show-mark | 是否显示月份背景水印 | *boolean* | `true` | - |
 | show-confirm | 是否展示确认按钮 | *boolean* | `true` | - |

src/calendar/index.js

@@ -41,6 +41,10 @@ export default createComponent({
         return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate());
       }
     },
+    position: {
+      type: String,
+      default: 'bottom'
+    },
     rowHeight: {
       type: Number,
       default: ROW_HEIGHT
@@ -307,9 +311,9 @@ export default createComponent({
         <Popup
           round
           closeable
-          value={this.value}
-          position="bottom"
           class={bem('popup')}
+          value={this.value}
+          position={this.position}
           onInput={this.togglePopup}
         >
           {this.genCalendar()}

src/calendar/index.less

@@ -7,7 +7,10 @@
   background-color: @calendar-background-color;
 
   &__popup {
-    height: @calendar-popup-height;
+    &.van-popup--top,
+    &.van-popup--bottom {
+      height: @calendar-popup-height;
+    }
 
     .van-popup__close-icon {
       top: 13px;