更新记录

1.2.2(2023-08-12)

1.加入useslotprops

1.2.1(2023-08-11)

1.更新说明

1.2.0(2023-08-11)

1.修复已知bug:默认时间月份显示是一月份,设置小时范围和默认时间冲突 2.增加默认插槽 3.增加返回时间格式

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

更新

  • 很久没登录,登录看到这么多伙伴需要,更新了一下(1.2.0),修复了已知bug和增加了默认插槽,和增加了一个返回时间的格式props(valueFormat,具体格式参考moment.js)
  • 修复已知bug:默认时间月份显示是一月份,设置小时范围和默认时间冲突
  • 增加默认插槽
  • 增加返回时间格式

props

属性名 类型 默认值 说明
beginDate String, Number 1990-1-1 开始时间
endDate String, Number 2050-12-31 结束时间
hourBegin Number, String 0 开始小时
hourEnd Number, String 23 结束小时
minutesInterval Number, String 1 分钟间隔
params Object 具体看实例 年月日时分秒选择返回
defaultTime String 1990-1-1 默认显示的时间
cancelText String 取消 左上角文字
confirmText String 确认 右上角文字
cancelTextColor String #000 左上角文字颜色
confirmTextColor String #1E7DEB 右上角文字颜色
showTimeTag Boolean true 是否显示后面的年月日中文提示
backClickClose Boolean true 是否允许通过点击背景关闭Picker
valueFormat String YYYY-MM-DD HH:mm:ss 返回时间的格式(具体参考moment.js)
useSlot Boolean false 是否使用插槽
value Boolean false 不使用插槽时v-model的值

Events

事件称名 说明
@confirm 右上角确定
@cancel 左上角取消
open 打开picker
close 关闭picker

slot

name 说明
- 输入框

实例

<template>
 <view class="content">
  <time-picker
   useSlot
   :params="params"
   :showTimeTag="false"
   :hourBegin="hourBegin"
   :hourEnd="hourEnd"
   @confirm="timeConfirm">
   <button>点击我显示时间</button>
  </time-picker>
  <time-picker
   useSlot
   :params="params"
   :showTimeTag="false"
   :hourBegin="hourBegin"
   :hourEnd="hourEnd"
   @confirm="timeConfirm">
  </time-picker>

  <button @click="$refs.timePicker.open()">不使用插槽</button>
  <time-picker
   ref="timePicker"
   :params="params"
   :showTimeTag="false"
   :hourBegin="hourBegin"
   :hourEnd="hourEnd"
   @confirm="timeConfirm">
  </time-picker>
 </view>
</template>

<script>
 import timePicker from '../../components/time-picker/time-picker.vue'
 export default {
  components: {
   timePicker
  },
  data() {
   return {
    hourBegin: '09',
    hourEnd: '18',
    defaultTime: '2021-06-25 08:12:00',
    params: {
     year: true,
     month: true,
     day: true,
     hour: true,
     minute: true,
     second: true,
     timestamp: false,
    }
   }
  },
  methods: {
   timeConfirm(result, date) {
    console.log('result', result);
    console.log('date', date);
   }
  }
 }
</script>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问