feat: 日历支持footer的children定义，增加日历+datepicker的demo (#1277)

* feat: 日历组件支持在 footer 部分的children自定义，增加demo 日历+datepicker的交互demo

* docs: 补充文档

* fix: review

src/packages/calendar/calendar.scss

@@ -85,10 +85,6 @@
     display: block;
     box-sizing: border-box;
 
-    // .viewArea {
-    //   display: block;
-    // }
-
     .calendar-loading-tip {
       height: 50px;
       line-height: 50px;
@@ -211,13 +207,12 @@
   // 底部导航
   &-footer {
     display: flex;
-    height: 62px;
     width: 100%;
+    flex-direction: column;
     background-color: $white;
 
     .calendar-confirm-btn {
       height: 44px;
-      width: 100%;
       margin: 10px 18px;
       border-radius: 22px;
       background: $button-primary-background-color;

src/packages/calendar/calendar.taro.tsx

@@ -75,6 +75,7 @@ export const Calendar = React.forwardRef<
   const {
     style,
     className,
+    children,
     popup,
     visible,
     type,
@@ -138,6 +139,7 @@ export const Calendar = React.forwardRef<
         ref={calendarRef}
         style={style}
         className={className}
+        children={children}
         type={type}
         autoBackfill={autoBackfill}
         popup={popup}

src/packages/calendar/calendar.tsx

@@ -75,6 +75,7 @@ export const Calendar = React.forwardRef<
   const {
     style,
     className,
+    children,
     popup,
     visible,
     type,
@@ -138,6 +139,7 @@ export const Calendar = React.forwardRef<
         ref={calendarRef}
         style={style}
         className={className}
+        children={children}
         type={type}
         autoBackfill={autoBackfill}
         popup={popup}

src/packages/calendar/demo.scss

@@ -1,25 +1,59 @@
-.wrapper {
-  display: flex;
-  padding: 0 40px;
-}
+.nut-calendar {
+  .nut-calendar-btns {
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    padding: 0 20px;
+  }
+
+  .nut-calendar-date {
+    background-color: #f9f9f9;
+    font-size: 12px;
+
+    &.disabled {
+      color: $disable-color;
+    }
+  }
+
+  .wrapper {
+    display: flex;
+    padding: 0 40px;
+  }
 
-.d_div {
-  margin: 0px 5px;
+  .d_div {
+    margin: 0px 5px;
 
-  .d_btn {
-    background: #fa3f19;
-    color: #fff;
+    .d_btn {
+      background: #fa3f19;
+      color: #fff;
+      font-size: 12px;
+      padding: 2px 8px;
+      border-radius: 4px;
+      display: inline-block;
+      height: 20px;
+    }
+  }
+
+  .info {
+    display: block;
     font-size: 12px;
-    padding: 2px 8px;
-    border-radius: 4px;
-    display: inline-block;
-    height: 20px;
+    line-height: 16px;
+    color: #999;
   }
 }
 
-.info {
-  display: block;
-  font-size: 12px;
-  line-height: 16px;
-  color: #999;
+.nut-cell__description {
+  .desc-box {
+    display: flex;
+  }
+
+  .desc {
+    padding: 10px;
+    background-color: #f9f9f9;
+  }
+
+  .desc1 {
+    padding: 10px;
+  }
 }