mpx-cube-ui

# Cube-Time-Picker

# 介绍

TimePicker 组件提供了常用的日期选择功能。

# 示例

# 基础用法

min 和 max 直接控制时间的可选范围，showNow 用于控制是否显示“现在”时间。如下方例子可选当前时间及未来3天的时间。

收起 
<template>
  <view>
    <view class="picker-demo-title">basic-picker:</view>
    <cube-time-picker
      wx:ref="picker"
      min="{{ min }}"
      max="{{ max }}"
      show-now="{{ showNow }}"
      bindcolumnChange="onColumnChange"
      bindchange="onChange"
    />
    <view class="button-wrapper">
      <cube-button bindclick="getSelected">获取当前选中项</cube-button>
    </view>
    <view class="demo-data" wx:if="{{ selectedInfo.length || changeParams.length }}">
      <block wx:if="{{ selectedInfo.length }}">
        <view class="key">getSelectedInfo 事件返回值：</view>
        <view class="value">
          <view class="value-item" wx:for="{{selectedInfo}}" wx:key="index">
            <view class="item-key">{{item[0]}}</view>
            <view class="item-value">{{item[1]}}</view>
          </view>
        </view>
      </block>
      <block wx:if="{{ changeParams.length }}">
        <view class="key">change 事件参数：</view>
        <view class="value">
          <view class="value-item" wx:for="{{changeParams}}" wx:key="index">
            <view class="item-key">{{item[0]}}</view>
            <view class="item-value">{{item[1]}}</view>
          </view>
        </view>
      </block>
      <block wx:if="{{ changeParams.length }}">
        <view class="key">columnChange 事件参数：</view>
        <view class="value">
          <view wx:for="{{ columnChangeParams }}" wx:key="index">
            <view class="value-number">第{{ index+1 }}次：</view>
            <view class="value-item" wx:for={{item}} wx:for-item="itemChild" wx:key="twoIndex">
              <view class="item-key">{{itemChild[0]}}</view>
              <view class="item-value">{{itemChild[1]}}</view>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
  import { createComponent } from '@mpxjs/core'
  import { beauty } from '../../common/utils'
  let columnChangeArr = []
  createComponent({
    data: {
      min: Date.now() - 1 * 60 * 60 * 1000,
      max: Date.now() + 3 * 24 * 60 * 60 * 1000,
      showNow: true,
      columnChangeParams: [''],
      changeParams: '',
      selectedInfo: ''
    },
    methods: {
      onColumnChange(e) {
        columnChangeArr.push(Object.entries(e.detail))
      },
      onChange(e) {
        this.columnChangeParams = [...columnChangeArr]
        columnChangeArr = []
        this.changeParams = Object.entries(e.detail)
      },
      getSelected() {
        const info = this.$refs.picker.getSelectedInfo()
        this.selectedInfo = Object.entries(info)
      }
    }
  })
</script>



<style lang="stylus" scoped>
.button-wrapper
  margin-top: 10px
.picker-demo-title
  margin-bottom 8px
.demo-data
  margin-top: 10px
  padding: 10px 10px
  background-color: white
  border: 1px solid  white
  border-radius: 10px

  .key
    margin-bottom: 10px
    font-size: 16px
  .key-introduce
    margin-bottom: 10px
    line-height: 20px
  .value
    margin-bottom: 20px
    white-space: break-spaces
    .value-number
      margin-top: 20px
    .value-item
      display flex
      justify-content: space-between
      height: 25px
      line-height: 25px
      font-size: 15px
      .item-value
        margin-left: 10px
        white-space nowrap
</style>
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

# Config Day

day字段的len属性可以设置第一列需要展示的日期长度；

filer属性设置第一列日期展示的文案，当len的数量大于filter的数组长度时，会以M月d日的格式显示文案；

format属性用以格式化日期显示的方式。

收起 
<template>
  <view>
    <view class="picker-demo-title">Config day options:</view>
    <cube-time-picker day="{{day}}" />
  </view>
</template>

<script>
  import { createComponent } from '@mpxjs/core'

  createComponent({
    data: {
      day: {
        len: 5,
        filter: ['今天', '明天'],
        format: 'M月D日'
      }
    }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Config MinuteStep

通过 minuteStep 属性可配置分钟数的步长，默认为 10 分钟，这样的话，可选的分钟就是 10、20、30、40、50。另外 minuteStep 还支持传入一个对象，你可以通过子属性 rule 配置取整的规则，是向上取整 ceil，向下取整 floor，又或是四舍五入round。而子属性 step 则代表步长。

收起 
<template>
  <view>
    <view class="picker-demo-title">Config minute step:</view>
    <cube-time-picker minuteStep="{{minuteStep}}" />
  </view>
</template>

<script>
import { createComponent } from '@mpxjs/core'

createComponent({
  data: {
    minuteStep: {
      rule: 'ceil',
      step: 15
    }
  }
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Config Format

通过 format 属性可配置 select 事件的 formatedTime 参数的格式。

收起 
<template>
  <view>
    <view class="picker-demo-title">Config format:</view>
    <cube-time-picker format="{{format}}" bindchange="onChange" />
    <view class="demo-data" wx:if="{{ changeParams.length }}">
      <view class="key">change 事件参数：</view>
      <view class="value">
        <view class="value-item" wx:for="{{changeParams}}" wx:key="index">
          <view class="item-key">{{item[0]}}</view>
          <view class="item-value">{{item[1]}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { createComponent } from '@mpxjs/core'
import { beauty } from '../../common/utils'

createComponent({
  data: {
    format: 'hh:mm',
    changeParams: ''
  },
  methods: {
    onChange(e) {
      this.changeParams = Object.entries(e.detail)
    }
  }
})
</script>
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

# Config Delay

delay 则表示的是当前时间向后推迟的时间，决定了最小可选时间（注：仅当未设置 min 时有效）。

在例子中配置了30，代表第一个可选时间在当前时间的30分之后。

收起 
<template>
  <view>
    <view class="picker-demo-title">Config delay step:</view>
    <cube-time-picker delay="{{delay}}" />
  </view>
</template>

<script>
import { createComponent } from '@mpxjs/core'

createComponent({
  data: {
    delay: 30
  }
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 手动设置显示时间

timePicker实例向外暴露setTime方法用以手动设置时间，时间格式为时间戳。当时间戳小于当前时间戳时，timePicker实例会默认显示当前时间。

收起 
<template>
  <view>
    <cube-button bindclick="showPickerWithSetTime">Use setTime</cube-button>
    <cube-time-picker
      wx:ref="picker"
      bindchange="onChange"
      bindcolumnChange="onColumnChange" />
    </cube-time-picker>
  </view>
</template>

<script>
import { createComponent } from '@mpxjs/core'
import funcMixin from '../../common/mixins/picker'

createComponent({
  mixins: [ funcMixin ],
  methods: {
    showPickerWithSetTime() {
      const time = new Date().valueOf() + 1 * 60 * 60 * 1000 * 24
      this.$refs.picker.setTime(time)
    }
  }
})
</script>
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

# Props

参数 说明 类型 可选值 默认值
themeType 用于生成最外层类名 如原类名为 cube-component，添加 themeType = demo 后，类名变为 cube-component cube-component-demo String - -
delay 将当前时间向后推算的分钟数，决定了最小可选时间（注：仅当未设置 min 时有效） Number - 15
day 日期配置 Object - { len: 3 }
showNow 是否显示现在（需当前时间在可选范围内）；以及现在选项的文案 boolean, { text: string } - true
minuteStep 分钟数的步长 number, { rule?: string, step?: number } rule 可选:floor/ceil/round, step 默认10 10
format 时间格式 String - YYYY/M/D hh:mm
min 最小可选时间 Number - 根据 delay、minuteStep、hourSpan等计算 默认为 当前时间 + 15 分钟
max 最大可选时间 Number - 根据 min、minuteStep、hourSpan、day 等计算 默认为 min + 3天
hourSpan 小时范围 [0, 24]，右开区间 最小值0，最大值24 Array - HourSpan
immediateChange 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件。 微信 webview 特有属性，基础库 2.21.1 及以上； 支付宝需基础库 2.8.7 及以上 Boolean - false

# TsType

Name Type
DayConfig 
{
  filter?: string[];
  format?: string;
  len?: number;
}
NowConfig 
{
  text?: string;
}
MinuteStepConfig 
{
  rule?: string;
  step?: number;
}
HourSpan 
number[]

# Events

事件名 说明 参数
pickstart 当滚动选择开始时候触发事件 -
pickend 当滚动选择结束时候触发事件 -
change 滚动后触发 event.detail = { selectedTime, selectedText, formatedTime, selectedIndex }。 selectedTime: 当前选中的timestamp； selectedText: 当前选中的时间文案； formatedTime: 格式化日期； selectedIndex: 当前选中的索引。
columnChange 列变化事件，某列选中的 value 及 index 任意一个变化后触发事件 event.detail = { column, index, text, value } column 是发生变化的列；index, text, value 分别是变化后的索引、文案、值

# Methods

组件实例方法 说明 参数 返回值
setTime 手动设置time-picker组件显示的时间，数据格式为时间戳 time：时间戳 -
getSelectedInfo 获取当前所有列的选中信息 - { selectedTime, selectedText, formatedTime, selectedIndex }。 selectedTime: 当前选中的timestamp； selectedText: 当前选中的时间文案； formatedTime: 格式化日期； selectedIndex: 当前选中的索引。

← Popup 弹出层 →