lhl 7ae8bef061 check list | 1 rok pred | |
---|---|---|
.. | ||
components | 1 rok pred | |
changelog.md | 1 rok pred | |
package.json | 1 rok pred | |
readme.md | 1 rok pred | |
screenshot_1.png | 1 rok pred |
uniApp 日期时间选择器, 可选择年, 月, 日, 时, 分, 秒.
推荐从dcloud 插件市场 安装.
在 template 中:
<template>
<view>
<button type="default" @click="openDatetimePicker">open picker</button>
<buuug7-simple-datetime-picker
ref="myPicker"
@submit="handleSubmit"
:start-year="2000"
:end-year="2099"
:time-init="1688860800000"
:time-hide="[true, true, true, true, true, false]"
:time-label="['年', '月', '日', '时', '分', '秒']"
/>
</view>
</template>
在 script 中:
<buuug7-simple-datetime-picker />
import SimpleDateTimePicker from "uni_modules/buuug7-simple-datetime-picker/components/buuug7-simple-datetime-picker/buuug7-simple-datetime-picker.vue";
export default {
data() {
return {
birthday: "",
};
},
methods: {
// 打开picker
openDatetimePicker() {
this.$refs.myPicker.show();
},
// 关闭picker
closeDatetimePicker() {
this.$refs.myPicker.hide();
},
handleSubmit(e) {
// console.log(e);
// {year: "2023", month: "07", day: "11", hour: "15", minute: "21", seconds: '55'}
this.birthday = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${seconds}`;
},
},
};
Note: 不要把组件放 swiper 里面或者 v-for 里面等, 最好放在页面根部. 通常情况下打开 picker 需要调用
this.$refs.refName.show()
, 在选择完毕后 picker 会自动隐藏,不需要调用this.$refs.refName.hide()
来手动隐藏。
类型 Number
,选择开始年份
类型 Number
, 选择结束年份
类型Number
, 自定义初始时间, 默认为当前时间, 值为时间戳
类型 Array
, 自定义时间列显示,默认显示年月日日分 [true, true, true, true, true, false]
[true, true, true, false, false, false]
[false, false, false, true, true, true]
类型 Array
, 自定义各个时间单位,默认为 ['年', '月', '日', '时', '分', '秒']
, 比如想切换成显示英文的年月日, 可以设置 ['year', 'month', 'day', 'hour', 'minute', 'second']
类型 function
, 监听选择事件, 回调函数的第一个参数包含了选择时间的完整信息