更新记录

1.2.2(2024-04-18)

说明文档

1.2.1(2024-04-18)

修复说明文档

1.2.0(2024-04-18)

改正秒打印不出来的问题

查看更多

平台兼容性

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

uniApp 简单的日期时间选择器

uniApp 日期时间选择器, 可选择年, 月, 日, 时, 分, 秒.

示例链接

计算你来到这个世界多少天了

演示效果图

用法

在 template 中:

<template>
  <view>
    <button type="default" @click="openDatetimePicker">时间选择</button>
    <yt-dateTimePicker
      ref="myPicker"
      @submit="handleSubmit"
      :start-year="2000"
      :end-year="2099"
      time-init="2023-5-20"
      :time-hide="[true, true, true, true, true, false]"
      :time-label="['年', '月', '日', '时', '分', '秒']"
    />
  </view>
</template>

在 script 中:

  • 该插件遵循 easycom 规范, 不用显式导入就可以使用 <yt-dateTimePicker />
  • 如需按需导入可以使用import YtDateTimePicker from "uni_modules/yt-dateTimePicker/components/yt-dateTimePicker/yt-dateTimePicker.vue";
export default {
  data() {
    return {
      birthday: "",
    };
  },
  methods: {
    // 打开picker
    openDatetimePicker() {
      this.$refs.myPicker.show();
    },

    // 关闭picker
    closeDatetimePicker() {
      this.$refs.myPicker.hide();
    },

    handleSubmit(e) {
      this.birthday = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
    },
  },
};

Note: 不要把组件放 swiper 里面或者 v-for 里面等, 最好放在页面根部. 通常情况下打开 picker 需要调用this.$refs.refName.show(), 在选择完毕后 picker 会自动隐藏,不需要调用this.$refs.refName.hide()来手动隐藏。

属性说明

属性 是否必填 值类型 默认值 说明
start-year Number 2000 选择开始年份
end-year Number 2099 选择结束年份
time-init String 2023-5-20 自定义初始时间, 默认为当前时间
time-hidden Array [true, true, true, true, true, true] 自定义时间列显示,默认显示年月日日分
time-label Array ['年', '月', '日', '时', '分', '秒'] 自定义各个时间单位
@submit Function Object 监听选择事件, 回调函数的第一个参数包含了选择时间的完整信息

| QQ交流群(906392632) |

|

| | QQ群号:906392632 |

隐私、权限声明

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

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

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

许可协议

MIT协议

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