feat: datepicker 初始化开发

package.json

@@ -117,4 +117,4 @@
     "last 2 versions",
     "not dead"
   ]
-}
+}

src/config.js

@@ -279,6 +279,16 @@ module.exports = {
           show: true,
           desc: '评分组件',
           author: 'undo'
+        },
+        {
+          version: '3.0.0',
+          name: 'Calendar',
+          type: 'component',
+          cName: '日历',
+          desc: '日历组件',
+          sort: 5,
+          show: true,
+          author: ''
         }
       ]
     },

src/packages/calendar/demo.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="demo">
+    <h2>基础用法</h2>
+    <div>
+      <nut-cell
+        :showIcon="true"
+        title="选择单个日期"
+        :desc="date ? `${date} ${dateWeek}` : '请选择'"
+        @click.native="openSwitch('isVisible')"
+      >
+      </nut-cell
+      ><div class="test-calendar-wrapper">
+        <nut-calendar
+          :is-visible="isVisible"
+          :default-value="date"
+          @close="closeSwitch('isVisible')"
+          @choose="setChooseValue"
+          :start-date="`2019-10-11`"
+          :end-date="`2022-11-11`"
+        >
+        </nut-calendar
+      ></div>
+    </div>
+
+    <div>
+      <nut-cell
+        :showIcon="true"
+        title="选择日期区间"
+        :desc="date1 ? `${date1[0]}至${date1[1]}` : '请选择'"
+        @click.native="openSwitch('isVisible1')"
+      >
+      </nut-cell
+      ><div class="test-calendar-wrapper">
+        <nut-calendar
+          :is-visible="isVisible1"
+          :default-value="date1"
+          type="range"
+          :start-date="`2019-12-22`"
+          :end-date="`2021-01-08`"
+          @close="closeSwitch('isVisible1')"
+          @choose="setChooseValue1"
+        >
+        </nut-calendar
+      ></div>
+    </div>
+    <h2>自定义日历</h2>
+    <h2>平铺展示</h2>
+    <div class="test-calendar-wrapper">
+      <nut-calendar
+        :poppable="false"
+        :is-visible="isVisible2"
+        :default-value="date2"
+        @choose="setChooseValue2"
+      >
+      </nut-calendar>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+import { createComponent } from '@/utils/create';
+
+const { createDemo } = createComponent('calendar');
+import Utils from '@/utils/date';
+
+interface TestCalendarState {
+  isVisible: boolean;
+  date: string;
+  dateWeek: string;
+
+  date2: string;
+  isVisible2: boolean;
+
+  isVisible1: boolean;
+  date1: string[];
+}
+export default createDemo({
+  props: {},
+  setup() {
+    const state: TestCalendarState = reactive({
+      isVisible: false,
+      date: '',
+      dateWeek: '',
+
+      date2: '2020-07-08',
+      isVisible2: true,
+
+      isVisible1: false,
+      date1: ['2019-12-23', '2019-12-26']
+    });
+    const openSwitch = param => {
+      state[`${param}`] = true;
+    };
+
+    const closeSwitch = param => {
+      state[`${param}`] = false;
+    };
+
+    const setChooseValue = param => {
+      state.date = param[3];
+      state.dateWeek = param[4];
+    };
+
+    const setChooseValue2 = param => {
+      state.date2 = param[3];
+      console.log(state.date2);
+    };
+
+    const setChooseValue1 = param => {
+      state.date1 = [...[param[0][3], param[1][3]]];
+    };
+
+    setTimeout(() => {
+      state.date = '2021-01-03';
+    }, 3000);
+
+    return {
+      ...toRefs(state),
+      openSwitch,
+      closeSwitch,
+      setChooseValue,
+      setChooseValue2,
+      setChooseValue1
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.test-calendar-wrapper {
+  display: flex;
+  width: 100%;
+  height: 613px;
+  overflow: hidden;
+}
+</style>

src/packages/calendar/doc.md

@@ -0,0 +1,34 @@
+#  calendar组件
+
+    ### 介绍
+
+    基于 xxxxxxx
+
+    ### 安装
+
+
+
+    ## 代码演示
+
+    ### 基础用法1
+
+
+
+    ## API
+
+    ### Props
+
+    | 参数         | 说明                             | 类型   | 默认值           |
+    |--------------|----------------------------------|--------|------------------|
+    | name         | 图标名称或图片链接               | String | -                |
+    | color        | 图标颜色                         | String | -                |
+    | size         | 图标大小，如 '20px' '2em' '2rem' | String | -                |
+    | class-prefix | 类名前缀，用于使用自定义图标     | String | 'nutui-iconfont' |
+    | tag          | HTML 标签                        | String | 'i'              |
+
+    ### Events
+
+    | 事件名 | 说明           | 回调参数     |
+    |--------|----------------|--------------|
+    | click  | 点击图标时触发 | event: Event |
+

src/packages/calendar/index.scss

@@ -0,0 +1,188 @@
+.nut-calendar {
+  position: relative;
+  display: flex;
+  flex: 1;
+  height: 100%;
+  padding-top: 132px;
+  padding-bottom: 78px;
+  color: $calendar-base-color;
+  font-size: $calendar-base-font;
+  background-color: $white;
+  overflow: hidden;
+
+  &.nut-calendar-tile {
+    padding-top: 46px;
+    padding-bottom: 0;
+
+    .nut-calendar-header {
+      .calendar-title {
+        font-size: $calendar-base-font;
+      }
+    }
+  }
+
+  // 头部导航
+  .nut-calendar-header {
+    position: absolute;
+    top: -1px;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    padding-top: 1px;
+    background-color: $white;
+    z-index: 1;
+
+    .calendar-title {
+      padding-top: 22px;
+      font-size: $calendar-title-font;
+      line-height: 25px;
+      border-radius: 12px 12px 0 0;
+    }
+
+    .calendar-curr-month {
+      padding: 10px 0 7px;
+      line-height: 22px;
+    }
+
+    .calendar-weeks {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      height: 46px;
+      border-radius: 0px 0px 12px 12px;
+      box-shadow: 0px 4px 10px 0px rgba($color: #000000, $alpha: 0.06);
+
+      .calendar-week-item {
+        &:first-of-type,
+        &:last-of-type {
+          color: $calendar-primary-color;
+        }
+      }
+    }
+  }
+
+  // 月份
+  .nut-calendar-content {
+    flex: 1;
+
+    .calendar-months-panel {
+      position: relative;
+      width: 100%;
+      height: auto;
+      display: block;
+
+      .calendar-month {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+      }
+
+      div:nth-of-type(2) {
+        .calendar-month-title {
+          padding-top: 0;
+        }
+      }
+
+      .calendar-loading-tip {
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        position: absolute;
+        top: -50px;
+        left: 0;
+        right: 0;
+        font-size: $calendar-text-font;
+        color: $text-color;
+      }
+
+      .calendar-month-title {
+        height: 23px;
+        line-height: 23px;
+        margin: 8px 0;
+      }
+
+      .calendar-month-con {
+        overflow: hidden;
+
+        .calendar-month-item {
+          .calendar-month-day:nth-child(7n + 0),
+          .calendar-month-day:nth-child(7n + 1) {
+            color: $calendar-primary-color;
+          }
+        }
+
+        .calendar-month-day {
+          float: left;
+          width: 14.28%;
+          height: 64px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          position: relative;
+
+          .curr-tips,
+          .calendar-day-tip {
+            position: absolute;
+            top: 10px;
+            width: 100%;
+            font-size: 11px;
+            line-height: 12px;
+            color: $calendar-primary-color;
+          }
+
+          &-active {
+            background-color: $calendar-primary-color;
+            color: $white !important;
+
+            .curr-tips {
+              visibility: hidden;
+            }
+
+            .calendar-day-tip {
+              color: $white;
+            }
+          }
+
+          &-disabled {
+            color: $calendar-disable-color !important;
+          }
+
+          &-choose {
+            background-color: $calendar-choose-color;
+          }
+
+          .calendar-day {
+            padding: 4px 0;
+            font-size: $calendar-day-font;
+          }
+        }
+      }
+    }
+  }
+
+  // 底部导航
+  .nut-calendar-footer {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -1px;
+    display: flex;
+    height: 78px;
+    width: 100%;
+    background-color: $white;
+
+    .calendar-confirm-btn {
+      height: 44px;
+      width: 100%;
+      margin: 14px 18px;
+      border-radius: 22px;
+      background: $button-primary-background-color;
+      color: $white;
+      text-align: center;
+      line-height: 44px;
+    }
+  }
+}