mpx-cube-ui/example/pages/calendar/calendar.mpx at 7093c3ecb48d0996c63be308cba147700873640f · didi/mpx-cube-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
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>