mx-time-picker 选择器

提供多个时间类型的选择。

引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "mx-picker": "/miniprogram_npm/m-ui/mx-time-picker/index"
}

小程序码

可使用微信扫码查看小程序码

#

代码演示

基本用法

<mx-time-picker
      bind:confirm="confirm"
      bind:cancel="toggleActionSheet"
      bind:close="toggleActionSheet"
      description="请选择时间"
      show="{{ show }}"
      bind:change="onChange"
    />

Page({
  data: {
    show: false,
     value: '',
  },
  
 toggletype(type) {
    this.setData({
      [type]: !this.data[type],
    })
  },

  toggleActionSheet(event) {
    this.toggletype('show')
    console.log(event)
  },
  confirm(e) {
    this.toggletype('show')
    const { time } = e.detail
    this.setData({
      value: time,
    })
  },
});

切换类型

可以直接通过show-type属性设置不同类型，共有四个类型date,time,date-date,time-time。默认是date

<mx-time-picker
      bind:confirm="confirm"
      bind:cancel="toggleActionSheet"
      bind:close="toggleActionSheet"
      show-type="date-date"
      description="请选择时间"
      show="{{ show }}"
      bind:change="onChange"
    />

展示多少天

time和time-time类型可以通过show-date来显示多少天，可选值有1,2,3。1只显示今天，2显示今天明天，3显示今天明天后天

 <mx-time-picker
      bind:confirm="confirm3"
      bind:cancel="toggleActionSheet3"
      bind:close="toggleActionSheet3"
      show-type="time-time"
      show-date="3"
      description="请选择时间"
      show="{{ show3 }}"
      bind:change="onChange3"
    />

API

Props

参数	说明	类型	默认值
show	是否显示动作面板	boolean	false
z-index	z-index 层级	string、 number	10001
description	选项上方的描述信息	string	-
show-type	展示日期类型，date time date-date time-time	string	date
show-date	time和time-time类型展示谭树，1只显示今天 2显示今天明天 3显示今天明天后天	string	2
confirm-text	确认按钮文字	string	确认
cancel-text	取消按钮文字	string	取消

Events

事件名	说明	参数
bind:confirm	点击确定按钮时触发	event.detail: 当前选中标签的时间
bind:close	关闭时触发	-
bind:cancel	取消按钮点击时触发	-
bind:change	选项改变时触发	event.detail: 当前选中标签的时间或索引值