feat(Calendar): add basic files

src/calendar/README.md

@@ -0,0 +1,47 @@
+# Calendar
+
+### Install
+
+``` javascript
+import Vue from 'vue';
+import { Calendar } from 'vant';
+
+Vue.use(Calendar);
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<van-calendar v-model="checked" />
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default | Version |
+|------|------|------|------|------|
+
+### Props
+
+| Attribute | Description | Type | Default | Version |
+|------|------|------|------|------|
+
+### Events
+
+| Event | Description | Parameters |
+|------|------|------|
+
+### Slots
+
+| Name | Description | SlotProps |
+|------|------|------|
+
+### Methods
+
+Use [ref](https://vuejs.org/v2/api/#ref) to get Canlendar instance and call instance methods
+
+| Name | Description | Attribute | Return value |
+|------|------|------|------|

src/calendar/README.zh-CN.md

@@ -0,0 +1,44 @@
+# Calendar 日历
+
+### 引入
+
+``` javascript
+import Vue from 'vue';
+import { Calendar } from 'vant';
+
+Vue.use(Calendar);
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<van-calendar />
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| v-model | 选中的日期 | `Date` | - | - |
+| title | 日历标题 | `string` | - | - |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+|------|------|------|
+
+### Slots
+
+| 名称 | 说明 | SlotProps |
+|------|------|------|
+
+### 方法
+
+通过 [ref](https://cn.vuejs.org/v2/api/#ref) 可以获取到 Calendar 实例并调用实例方法
+
+| 方法名 | 说明 | 参数 | 返回值 |
+|------|------|------|------|

src/calendar/demo/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-cell
+        :title="$t('selectDate')"
+        is-link
+        @click="toggle('selectDate', true)"
+      />
+    </demo-block>
+
+    <van-popup
+      v-model="show.selectDate"
+      round
+      closeable
+      position="bottom"
+    >
+      <van-calendar v-model="date.selectDate" :title="$t('title')" />
+    </van-popup>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title: '日期选择',
+      selectDate: '选择日期'
+    },
+    'en-US': {
+      title: 'Select Date',
+      selectDate: 'Select Date'
+    }
+  },
+
+  data() {
+    return {
+      date: {
+        selectDate: null
+      },
+      show: {
+        selectDate: false
+      }
+    };
+  },
+
+  methods: {
+    toggle(type, show) {
+      this.show[type] = show;
+    }
+  }
+};
+</script>

src/calendar/index.js

@@ -0,0 +1,57 @@
+import { createNamespace } from '../utils';
+import { isDate } from '../utils/validate/date';
+
+const [createComponent, bem, t] = createNamespace('calendar');
+const now = new Date();
+
+export default createComponent({
+  props: {
+    title: String,
+    minDate: {
+      type: Date,
+      default: () => new Date(now),
+      validator: isDate
+    },
+    maxDate: {
+      type: Date,
+      default: () => new Date(now.getFullYear(), now.getMonth() + 6, now.getDate()),
+      validator: isDate
+    }
+  },
+
+  data() {
+    return {};
+  },
+
+  methods: {
+    genTitle() {
+      if (this.title) {
+        return <div class={bem('title')}>{this.title}</div>;
+      }
+    },
+
+    genWeekDays() {
+      const weekdays = t('weekdays');
+
+      return (
+        <div class={bem('weekdays')}>
+          {weekdays.map(item => (
+            <span class={bem('weekday')}>{item}</span>
+          ))}
+        </div>
+      );
+    },
+
+    genMonth() {}
+  },
+
+  render() {
+    return (
+      <div class={bem()}>
+        {this.genTitle()}
+        {this.genWeekDays()}
+        <div class={bem('body')}></div>
+      </div>
+    );
+  }
+});

src/calendar/index.less

@@ -0,0 +1,37 @@
+@import '../style/var';
+
+.van-calendar {
+  display: flex;
+  flex-direction: column;
+  height: 80vh;
+
+  &__title,
+  &__weekdays {
+    flex-shrink: 0;
+  }
+
+  &__title {
+    height: 44px;
+    font-weight: @font-weight-bold;
+    font-size: @font-size-lg;
+    line-height: 44px;
+    text-align: center;
+  }
+
+  &__weekdays {
+    display: flex;
+  }
+
+  &__weekday {
+    flex: 1;
+    font-size: @font-size-sm;
+    line-height: 30px;
+    text-align: center;
+  }
+
+  &__body {
+    flex: 1;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}

src/calendar/test/demo.spec.js

@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);

src/locale/lang/zh-CN.ts

@@ -11,6 +11,9 @@ export default {
   nameEmpty: '请填写姓名',
   confirmDelete: '确定要删除么',
   telInvalid: '请填写正确的电话',
+  vanCalendar: {
+    weekdays: ['日', '一', '二', '三', '四', '五', '六']
+  },
   vanContactCard: {
     addText: '添加联系人'
   },

vant.config.js

@@ -114,6 +114,10 @@ module.exports = {
             title: '表单组件',
             icon: 'orders-o',
             items: [
+              {
+                path: 'calendar',
+                title: 'Calendar 日历'
+              },
               {
                 path: 'checkbox',
                 title: 'Checkbox 复选框'
@@ -446,6 +450,10 @@ module.exports = {
             title: 'Form Components',
             icon: 'orders-o',
             items: [
+              {
+                path: 'calendar',
+                title: 'Calendar'
+              },
               {
                 path: 'checkbox',
                 title: 'Checkbox'