didi · likecodeboys · Jun 30, 2025 · Jul 2, 2025 · Aug 1, 2025 · Aug 4, 2025
diff --git a/docs/config/sidebar.js b/docs/config/sidebar.js
@@ -64,6 +64,10 @@ module.exports = [
           {
             title: 'Collapse 展开收起',
             path: '/components/base/collapse'
+          },
+          {
+            title: 'Calendar 日历',
+            path: '/components/base/calendar'
           }
           // {
           //   title: 'Style 内置样式'
@@ -120,6 +124,10 @@ module.exports = [
           {
             title: 'Switch 滑动开关',
             path: '/components/base/switch'
+          },
+          {
+            title: 'CalendarModal 日历弹框',
+            path: '/components/base/calendar-modal'
           }
         ]
       },

diff --git a/docs/guide/design-tokens.md b/docs/guide/design-tokens.md
@@ -35,7 +35,7 @@
 |<span id="color-secondary" class="css-var-name">$color-secondary</span>|<div>#4F5E83</div>|基础-次要颜色|
 |<span id="color-disabled" class="css-var-name">$color-disabled</span>|<div>#ccc</div>|基础-禁用色|
 |<span id="color-dark-grey" class="css-var-name">$color-dark-grey</span>|<div>#333</div>|基础-灰色|
-|<span id="color-dark-grey-s" class="css-var-name">$color-dark-grey-s</span>|<div>#323233</div>|基础-浅灰|
+|<span id="color-dark-grey-s" class="css-var-name">$color-dark-grey-s</span>|<div>#000000</div>|-|
 |<span id="color-light-grey-opacity" class="css-var-name">$color-light-grey-opacity</span>|<div>rgba(0, 0, 0, .04)</div>|基础-透明灰|
 |<span id="mask-bgc_opacity" class="css-var-name">$mask-bgc_opacity</span>|<div>rgba(37, 38, 45, 0.4)</div>|遮罩层背景|
 |<span id="fill-bgc" class="css-var-name">$fill-bgc</span>|<div>#f2f2f2</div>|基础-填充背景色|

diff --git a/example/app.mpx b/example/app.mpx
@@ -47,7 +47,9 @@
       "./pages/float-ball/index",
       "./pages/rate/index",
       "./pages/switch/index",
-      "./pages/loading/index"
+      "./pages/loading/index",
+      "./pages/calendar-modal/index",
+      "./pages/calendar/index"
     ]
   }
 </script>

diff --git a/example/common/config.ts b/example/common/config.ts
@@ -1,6 +1,6 @@
 export default {
-  'entryMap': {
-    'default': [
+  entryMap: {
+    default: [
       'button',
       'button-group',
       'collapse',
@@ -31,7 +31,7 @@ export default {
       'time-picker-modal',
       'segment-picker',
       'textarea',
-      'float-ball'
+      'float-ball',
     ],
     introduce: [
       {
@@ -43,7 +43,8 @@ export default {
           'divider',
           'float-ball',
           'loading',
-          'collapse'
+          'collapse',
+          'calendar'
         ]
       },
       {
@@ -64,13 +65,7 @@ export default {
       },
       {
         name: '弹出层',
-        components: [
-          'popup',
-          'toast',
-          'dialog',
-          'modal',
-          'tip',
-        ]
+        components: ['popup', 'toast', 'dialog', 'modal', 'tip']
       },
       {
         name: '组合组件',
@@ -84,7 +79,8 @@ export default {
           'picker-popup',
           'cascade-picker-popup',
           'date-picker-popup',
-          'time-picker-popup'
+          'time-picker-popup',
+          'calendar-modal',
         ]
       }
     ],

diff --git a/example/pages/calendar-modal/README.md b/example/pages/calendar-modal/README.md
@@ -0,0 +1,66 @@
+## cube-calendar-modal
+
+<card>
+
+### 介绍
+
+日历选择弹框
+
+</card>
+
+### 示例
+
+<card>
+
+### 用法
+
+
+<collapse-wrapper>
+
+```vue
+<template>
+  <view class="calendar-normal-page">
+   <cube-button bindtap="showCalendarModal">常规日历组件</cube-button>
+   <view class="calendar-normal-selected-date">起始时间：{{toastText[0]}}</view>
+   <view class="calendar-normal-selected-date">结束时间：{{toastText[1]}}</view>
+    <cube-calendar-modal
+      wx:ref="calendarModal"
+      min="{{min}}"
+      max="{{max}}"
+      maxRange="{{maxRange}}"
+      scrollToEnd="{{scrollToEnd}}"
+      defaultDate="{{defaultDate}}"
+      maskClosable="{{maskClosable}}"
+      bindconfirm="confirm"
+    />
+  </view>
+</template>
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({
+  data: {
+    min: +new Date(2025, 1, 1),
+    max: +new Date(2025, 7, 25),
+    maxRange: 100,
+    scrollToEnd: true,
+    defaultDate: [+new Date(2025, 3, 1), +new Date(2025, 3, 2)],
+    maskClosable: true,
+    toastText: ['暂未选择时间', '暂未选择时间']
+  },
+  methods: {
+    showCalendarModal() {
+      this.$refs.calendarModal.show()
+    },
+    confirm(date) {
+      const { year: startYear, month: startMonth, day: startDay } = date.detail.value[0]
+      const { year: endYear, month: endMonth, day: endDay } = date.detail.value[1]
+      this.toastText = [`${startYear}年${startMonth}月${startDay}日`,`${endYear}年${endMonth}月${endDay}日`]
+    }
+  }
+})
+</script>
+```
+</collapse-wrapper>
+
+</card>
diff --git a/example/pages/calendar-modal/index.mpx b/example/pages/calendar-modal/index.mpx
@@ -0,0 +1,25 @@
+<template>
+  <view class="calendar-page">
+    <base-container>
+      <normal-calendar/>
+    </base-container>
+  </view>
+</template>
+
+<script>
+  import { createPage } from '@mpxjs/core'
+
+  createPage()
+</script>
+
+<style lang="stylus">
+</style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "base-container": "../../components/base-container/index.mpx",
+      "normal-calendar": "./normal-calendar.mpx"
+    }
+  }
+</script>
diff --git a/example/pages/calendar-modal/normal-calendar.mpx b/example/pages/calendar-modal/normal-calendar.mpx
@@ -0,0 +1,62 @@
+<template>
+  <view class="calendar-page">
+   <cube-button bindtap="showCalendarModal">常规日历组件</cube-button>
+   <view class="calendar-selected-date">起始时间：{{toastText[0]}}</view>
+   <view class="calendar-selected-date">结束时间：{{toastText[1]}}</view>
+    <cube-calendar-modal
+      wx:ref="calendarModal"
+      min="{{min}}"
+      max="{{max}}"
+      maxRange="{{maxRange}}"
+      scrollToEnd="{{scrollToEnd}}"
+      defaultDate="{{defaultDate}}"
+      maskClosable="{{maskClosable}}"
+      bindconfirm="confirm"
+    />
+  </view>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({
+  data: {
+    min: +new Date(2025, 1, 1),
+    max: +new Date(2025, 7, 25),
+    maxRange: 100,
+    scrollToEnd: true,
+    defaultDate: [+new Date(2025, 3, 1), +new Date(2025, 3, 2)],
+    maskClosable: true,
+    toastText: ['暂未选择时间', '暂未选择时间']
+  },
+  methods: {
+    showCalendarModal() {
+      this.$refs.calendarModal.showCalendar()
+    },
+    confirm(date) {
+      const { year: startYear, month: startMonth, day: startDay } = date.detail.value[0]
+      const { year: endYear, month: endMonth, day: endDay } = date.detail.value[1]
+      this.toastText = [`${startYear}年${startMonth}月${startDay}日`,`${endYear}年${endMonth}月${endDay}日`]
+    }
+  }
+})
+</script>
+
+<style lang="stylus">
+.calendar-page
+  .calendar-selected-date
+    margin-top: 10px
+    text-align: left
+    white-space: break-spaces
+</style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "base-container": "../../components/base-container/index.mpx",
+      "cube-calendar-modal": "@mpxjs/mpx-cube-ui/src/components/calendar-modal/index",
+      "cube-toast": "@mpxjs/mpx-cube-ui/src/components/toast/index",
+      "cube-button": "@mpxjs/mpx-cube-ui/src/components/button/index.mpx"
+    }
+  }
+</script>
diff --git a/example/pages/calendar/README.md b/example/pages/calendar/README.md
@@ -0,0 +1,72 @@
+## cube-calendar
+
+<card>
+
+### 介绍
+
+日历组件
+
+</card>
+
+### 示例
+
+<card>
+
+### 用法
+
+
+<collapse-wrapper>
+
+```vue
+<template>
+  <view class="calendar-page">
+    <cube-calendar
+      wx:ref="calendar"
+      height="{{height}}"
+      defaultDate="{{defaultDate}}"
+      bind:dateChange="dateChange"
+      maxRange="{{maxRange}}"
+      max="{{max}}"
+      min="{{min}}"
+    />
+    <view class="base-calendar-selected-date">
+      <view class="date-title">起始时间</view>
+      <view class="single-date">年份：{{currentStartDate.year || '暂未选择'}}</view>
+      <view class="single-date">月份：{{currentStartDate.month || '暂未选择'}}</view>
+      <view class="single-date">天份：{{currentStartDate.day || '暂未选择'}}</view>
+      <view class="single-date">时间戳：{{currentStartDate.date || '暂未选择'}}</view>
+    </view>
+    <view class="base-calendar-selected-date">
+      <view class="date-title">结束时间</view>
+      <view class="single-date">年份：{{currentEndDate.year || '暂未选择'}}</view>
+      <view class="single-date">月份：{{currentEndDate.month || '暂未选择'}}</view>
+      <view class="single-date">天份：{{currentEndDate.day || '暂未选择'}}</view>
+      <view class="single-date">时间戳：{{currentEndDate.date || '暂未选择'}}</view>
+    </view>
+  </view>
+</template>
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({
+   data: {
+    min: +new Date(2025, 1, 1),
+    max: +new Date(2025, 7, 25),
+    height: '270px',
+    maxRange: 100,
+    defaultDate: [+new Date(2025, 3, 1), +new Date(2025, 3, 2)],
+    currentStartDate: {},
+    currentEndDate: {}
+  },
+  methods: {
+    dateChange(selectDate) { 
+      this.currentStartDate = selectDate.detail.startDate
+      this.currentEndDate = selectDate.detail.endDate
+    }
+  }
+})
+</script>
+```
+</collapse-wrapper>
+
+</card>
diff --git a/example/pages/calendar/calendar.mpx b/example/pages/calendar/calendar.mpx
@@ -0,0 +1,71 @@
+<template>
+  <view class="calendar-page">
+    <cube-calendar
+      wx:ref="calendar"
+      height="{{height}}"
+      defaultDate="{{defaultDate}}"
+      bind:dateChange="dateChange"
+      maxRange="{{maxRange}}"
+      max="{{max}}"
+      min="{{min}}"
+    />
+    <view class="base-calendar-selected-date">
+      <view class="date-title">起始时间</view>
+      <view class="single-date">年份：{{currentStartDate.year || '暂未选择'}}</view>
+      <view class="single-date">月份：{{currentStartDate.month || '暂未选择'}}</view>
+      <view class="single-date">天份：{{currentStartDate.day || '暂未选择'}}</view>
+      <view class="single-date">时间戳：{{currentStartDate.date || '暂未选择'}}</view>
+    </view>
+    <view class="base-calendar-selected-date">
+      <view class="date-title">结束时间</view>
+      <view class="single-date">年份：{{currentEndDate.year || '暂未选择'}}</view>
+      <view class="single-date">月份：{{currentEndDate.month || '暂未选择'}}</view>
+      <view class="single-date">天份：{{currentEndDate.day || '暂未选择'}}</view>
+      <view class="single-date">时间戳：{{currentEndDate.date || '暂未选择'}}</view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({
+  data: {
+    min: +new Date(2025, 1, 1),
+    max: +new Date(2025, 7, 25),
+    height: '270px',
+    maxRange: 100,
+    defaultDate: [+new Date(2025, 3, 1), +new Date(2025, 3, 2)],
+    currentStartDate: {},
+    currentEndDate: {}
+  },
+  methods: {
+    dateChange(selectDate) { 
+      this.currentStartDate = selectDate.detail.startDate
+      this.currentEndDate = selectDate.detail.endDate
+    }
+  }
+})
+</script>
+
+<style lang="stylus">
+.base-calendar-selected-date
+  margin-top: 10px
+  padding: 10px
+  border-radius: 10px
+  background: white
+  white-space: break-spaces
+.date-title
+  text-align: center
+</style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "base-container": "../../components/base-container/index.mpx",
+      "cube-calendar": "@mpxjs/mpx-cube-ui/src/components/calendar/index",
+      "cube-toast": "@mpxjs/mpx-cube-ui/src/components/toast/index",
+      "cube-button": "@mpxjs/mpx-cube-ui/src/components/button/index.mpx"
+    }
+  }
+</script>