normal-calendar.mpx

<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>