1、首先参考官网https://www.uviewui.com/引入框架
2、gitee源码地址：https://gitee.com/gaojingzhen/u-view_seconds.git
3、DatetimePicker 组件只能实现《年 -月-日-时-分》，如图：
4、本人参考组件源码并加以修改，添加了**《秒》**的实现（本人组件命名为：my-datetime-picker），使用方法与官网的DatetimePicker 一样，如图：
5、文件夹my-datetime-picker中有3个文件，dayjs.js，my-datetime-picker.vue，props.js，如图：
5.1、dayjs.js源码
!(function (t, e) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = e() : typeof define === 'function'
&& define.amd ? define(e) : t.dayjs = e()
}(this, () => {
'use strict'
const t = 'millisecond'
const e = 'second'
const n = 'minute'
const r = 'hour'
const i = 'day'
const s = 'week'
const u = 'month'
const a = 'quarter'
const o = 'year'
const f = 'date'
const h = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[^0-9]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?.?(\d+)?$/
const c = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g
const d = {
name: 'en',
weekdays: 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'),
months: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_')
}
const $ = function (t, e, n) {
const r = String(t)
return !r || r.length >= e ? t : `${Array(e + 1 - r.length).join(n)}${t}`
}
const l = {
s: $,
z(t) {
const e = -t.utcOffset()
const n = Math.abs(e)
const r = Math.floor(n / 60)
const i = n % 60
return `${(e <= 0 ? '+' : '-') + $(r, 2, '0')}:${$(i, 2, '0')}`
},
m: function t(e, n) {
if (e.date() < n.date()) return -t(n, e)
const r = 12 * (n.year() - e.year()) + (n.month() - e.month())
const i = e.clone().add(r, u)
const s = n - i < 0
const a = e.clone().add(r + (s ? -1 : 1), u)
return +(-(r + (n - i) / (s ? i - a : a - i)) || 0)
},
a(t) {
return t < 0 ? Math.ceil(t) || 0 : Math.floor(t)
},
p(h) {
return {
M: u,
y: o,
w: s,
d: i,
D: f,
h: r,
m: n,
s: e,
ms: t,
Q: a
}[h] || String(h || '').toLowerCase().replace(/s$/, '')
},
u(t) {
return void 0 === t
}
}
let y = 'en'
const M = {}
M[y] = d
const m = function (t) {
return t instanceof S
}
const D = function (t, e, n) {
let r
if (!t) return y
if (typeof t === 'string') M[t] && (r = t), e && (M[t] = e, r = t)
else {
const i = t.name
M[i] = t, r = i
}
return !n && r && (y = r), r || !n && y
}
const v = function (t, e) {
if (m(t)) return t.clone()
const n = typeof e === 'object' ? e : {}
return n.date = t, n.args = arguments, new S(n)
}
const g = l
g.l = D, g.i = m, g.w = function (t, e) {
return v(t, {
locale: e.$L,
utc: e.$u,
x: e.$x,
$offset: e.$offset
})
}
var S = (function () {
function d(t) {
this.$L = D(t.locale, null, !0), this.parse(t)
}
const $ = d.prototype
return $.parse = function (t) {
this.$d = (function (t) {
const e = t.date
const n = t.utc
if (e === null) return new Date(NaN)
if (g.u(e)) return new Date()
if (e instanceof Date) return new Date(e)
if (typeof e === 'string' && !/Z$/i.test(e)) {
const r = e.match(h)
if (r) {
const i = r[2] - 1 || 0
const s = (r[7] || '0').substring(0, 3)
return n ? new Date(Date.UTC(r[1], i, r[3] || 1, r[4] || 0, r[5] || 0, r[6] || 0, s)) : new Date(r[1], i, r[3]
|| 1, r[4] || 0, r[5] || 0, r[6] || 0, s)
}
}
return new Date(e)
}(t)), this.$x = t.x || {}, this.init()
}, $.init = function () {
const t = this.$d
this.$y = t.getFullYear(), this.$M = t.getMonth(), this.$D = t.getDate(), this.$W = t.getDay(), this.$H = t.getHours(),
this.$m = t.getMinutes(), this.$s = t.getSeconds(), this.$ms = t.getMilliseconds()
}, $.$utils = function () {
return g
}, $.isValid = function () {
return !(this.$d.toString() === 'Invalid Date')
}, $.isSame = function (t, e) {
const n = v(t)
return this.startOf(e) <= n && n <= this.endOf(e)
}, $.isAfter = function (t, e) {
return v(t) < this.startOf(e)
}, $.isBefore = function (t, e) {
return this.endOf(e) < v(t)
}, $.$g = function (t, e, n) {
return g.u(t) ? this[e] : this.set(n, t)
}, $.unix = function () {
return Math.floor(this.valueOf() / 1e3)
}, $.valueOf = function () {
return this.$d.getTime()
}, $.startOf = function (t, a) {
const h = this
const c = !!g.u(a) || a
const d = g.p(t)
const $ = function (t, e) {
const n = g.w(h.$u ? Date.UTC(h.$y, e, t) : new Date(h.$y, e, t), h)
return c ? n : n.endOf(i)
}
const l = function (t, e) {
return g.w(h.toDate()[t].apply(h.toDate('s'), (c ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(e)), h)
}
const y = this.$W
const M = this.$M
const m = this.$D
const D = `set${this.$u ? 'UTC' : ''}`
switch (d) {
case o:
return c ? $(1, 0) : $(31, 11)
case u:
return c ? $(1, M) : $(0, M + 1)
case s:
var v = this.$locale().weekStart || 0
var S = (y < v ? y + 7 : y) - v
return $(c ? m - S : m + (6 - S), M)
case i:
case f:
return l(`${D}Hours`, 0)
case r:
return l(`${D}Minutes`, 1)
case n:
return l(`${D}Seconds`, 2)
case e:
return l(`${D}Milliseconds`, 3)
default:
return this.clone()
}
}, $.endOf = function (t) {
return this.startOf(t, !1)
}, $.$set = function (s, a) {
let h; const c = g.p(s)
const d = `set${this.$u ? 'UTC' : ''}`
const $ = (h = {}, h[i] = `${d}Date`, h[f] = `${d}Date`, h[u] = `${d}Month`, h[o] = `${d}FullYear`, h[r] = `${d}Hours`,
h[n] = `${d}Minutes`, h[e] = `${d}Seconds`, h[t] = `${d}Milliseconds`, h)[c]
const l = c === i ? this.$D + (a - this.$W) : a
if (c === u || c === o) {
const y = this.clone().set(f, 1)
y.$d[$](l), y.init(), this.$d = y.set(f, Math.min(this.$D, y.daysInMonth())).$d
} else $ && this.$d[$](l)
return this.init(), this
}, $.set = function (t, e) {
return this.clone().$set(t, e)
}, $.get = function (t) {
return this[g.p(t)]()
}, $.add = function (t, a) {
let f; const
h = this
t = Number(t)
const c = g.p(a)
const d = function (e) {
const n = v(h)
return g.w(n.date(n.date() + Math.round(e * t)), h)
}
if (c === u) return this.set(u, this.$M + t)
if (c === o) return this.set(o, this.$y + t)
if (c === i) return d(1)
if (c === s) return d(7)
const $ = (f = {}, f[n] = 6e4, f[r] = 36e5, f[e] = 1e3, f)[c] || 1
const l = this.$d.getTime() + t * $
return g.w(l, this)
}, $.subtract = function (t, e) {
return this.add(-1 * t, e)
}, $.format = function (t) {
const e = this
if (!this.isValid()) return 'Invalid Date'
const n = t || 'YYYY-MM-DDTHH:mm:ssZ'
const r = g.z(this)
const i = this.$locale()
const s = this.$H
const u = this.$m
const a = this.$M
const o = i.weekdays
const f = i.months
const h = function (t, r, i, s) {
return t && (t[r] || t(e, n)) || i[r].substr(0, s)
}
const d = function (t) {
return g.s(s % 12 || 12, t, '0')
}
const $ = i.meridiem || function (t, e, n) {
const r = t < 12 ? 'AM' : 'PM'
return n ? r.toLowerCase() : r
}
const l = {
YY: String(this.$y).slice(-2),
YYYY: this.$y,
M: a + 1,
MM: g.s(a + 1, 2, '0'),
MMM: h(i.monthsShort, a, f, 3),
MMMM: h(f, a),
D: this.$D,
DD: g.s(this.$D, 2, '0'),
d: String(this.$W),
dd: h(i.weekdaysMin, this.$W, o, 2),
ddd: h(i.weekdaysShort, this.$W, o, 3),
dddd: o[this.$W],
H: String(s),
HH: g.s(s, 2, '0'),
h: d(1),
hh: d(2),
a: $(s, u, !0),
A: $(s, u, !1),
m: String(u),
mm: g.s(u, 2, '0'),
s: String(this.$s),
ss: g.s(this.$s, 2, '0'),
SSS: g.s(this.$ms, 3, '0'),
Z: r
}
return n.replace(c, (t, e) => e || l[t] || r.replace(':', ''))
}, $.utcOffset = function () {
return 15 * -Math.round(this.$d.getTimezoneOffset() / 15)
}, $.diff = function (t, f, h) {
let c; const d = g.p(f)
const $ = v(t)
const l = 6e4 * ($.utcOffset() - this.utcOffset())
const y = this - $
let M = g.m(this, $)
return M = (c = {}, c[o] = M / 12, c[u] = M, c[a] = M / 3, c[s] = (y - l) / 6048e5, c[i] = (y - l) / 864e5, c[r] = y / 36e5, c[n] = y / 6e4, c[e] = y / 1e3, c)[d] || y, h ? M : g.a(M)
}, $.daysInMonth = function () {
return this.endOf(u).$D
}, $.$locale = function () {
return M[this.$L]
}, $.locale = function (t, e) {
if (!t) return this.$L
const n = this.clone()
const r = D(t, e, !0)
return r && (n.$L = r), n
}, $.clone = function () {
return g.w(this.$d, this)
}, $.toDate = function () {
return new Date(this.valueOf())
}, $.toJSON = function () {
return this.isValid() ? this.toISOString() : null
}, $.toISOString = function () {
return this.$d.toISOString()
}, $.toString = function () {
return this.$d.toUTCString()
}, d
}())
const p = S.prototype
return v.prototype = p, [
['$ms', t],
['$s', e],
['$m', n],
['$H', r],
['$W', i],
['$M', u],
['$y', o],
['$D', f]
].forEach((t) => {
p[t[1]] = function (e) {
return this.$g(e, t[0], t[1])
}
}), v.extend = function (t, e) {
return t.$i || (t(e, S, v), t.$i = !0), v
}, v.locale = D, v.isDayjs = m, v.unix = function (t) {
return v(1e3 * t)
}, v.en = M[y], v.Ls = M, v.p = {}, v
}))
5.2、my-datetime-picker.vue源码，mode默认值为 ‘datetime’，初始类型即为：年月日时分秒
<template>
<u-picker
ref="picker"
:show="show"
:closeOnClickOverlay="closeOnClickOverlay"
:columns="columns"
:title="title"
:itemHeight="itemHeight"
:showToolbar="showToolbar"
:visibleItemCount="visibleItemCount"
:defaultIndex="innerDefaultIndex"
:cancelText="cancelText"
:confirmText="confirmText"
:cancelColor="cancelColor"
:confirmColor="confirmColor"
@close="close"
@cancel="cancel"
@confirm="confirm"
@change="change"
>
</u-picker>
</template>
<script>
function times(n, iteratee) {
let index = -1
const result = Array(n < 0 ? 0 : n)
while (++index < n) {
result[index] = iteratee(index)
}
return result
}
import props from './props.js';
import dayjs from './dayjs.js';
/**
* DatetimePicker 时间日期选择器
* @description 此选择器用于时间日期
* @tutorial https://www.uviewui.com/components/datetimePicker.html
* @property {Boolean} show 用于控制选择器的弹出与收起 ( 默认 false )
* @property {Boolean} showToolbar 是否显示顶部的操作栏 ( 默认 true )
* @property {String | Number} value 绑定值
* @property {String} title 顶部标题
* @property {String} mode 展示格式 mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择 ( 默认 ‘datetime )
* @property {Number} maxDate 可选的最大时间 默认值为后10年
* @property {Number} minDate 可选的最小时间 默认值为前10年
* @property {Number} minHour 可选的最小小时，仅mode=time有效 ( 默认 0 )
* @property {Number} maxHour 可选的最大小时，仅mode=time有效 ( 默认 23 )
* @property {Number} minMinute 可选的最小分钟，仅mode=time有效 ( 默认 0 )
* @property {Number} maxMinute 可选的最大分钟，仅mode=time有效 ( 默认 59 )
* @property {Number} minSeconds 可选的最小秒，仅mode=time有效 ( 默认 0 )
* @property {Number} maxSeconds 可选的最大秒，仅mode=time有效 ( 默认 59 )
* @property {Function} filter 选项过滤函数
* @property {Function} formatter 选项格式化函数
* @property {Boolean} loading 是否显示加载中状态 ( 默认 false )
* @property {String | Number} itemHeight 各列中，单个选项的高度 ( 默认 44 )
* @property {String} cancelText 取消按钮的文字 ( 默认 '取消' )
* @property {String} confirmText 确认按钮的文字 ( 默认 '确认' )
* @property {String} cancelColor 取消按钮的颜色 ( 默认 '#909193' )
* @property {String} confirmColor 确认按钮的颜色 ( 默认 '#3c9cff' )
* @property {String | Number} visibleItemCount 每列中可见选项的数量 ( 默认 5 )
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭选择器 ( 默认 false )
* @property {Array} defaultIndex 各列的默认索引
* @event {Function} close 关闭选择器时触发
* @event {Function} confirm 点击确定按钮，返回当前选择的值
* @event {Function} change 当选择值变化时触发
* @event {Function} cancel 点击取消按钮
* @example <u-datetime-picker :show="show" :value="value1" mode="datetime" ></u-datetime-picker>
*/
export default {
name: 'datetime-picker',
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
data() {
return {
columns: [],
innerDefaultIndex: [],
innerFormatter: (type, value) => value
}
},
watch: {
show(newValue, oldValue) {
if (newValue) {
this.updateColumnValue(this.innerValue)
}
},
propsChange() {
this.init()
}
},
computed: {
// 如果以下这些变量发生了变化，意味着需要重新初始化各列的值
propsChange() {
return [this.mode, this.maxDate, this.minDate, this.minHour, this.maxHour, this.minMinute, this.maxMinute, this.minSeconds, this.maxSeconds, this.filter, ]
}
},
mounted() {
this.init()
},
methods: {
init() {
this.innerValue = this.correctValue(this.value)
this.updateColumnValue(this.innerValue)
},
// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
setFormatter(e) {
this.innerFormatter = e
},
// 关闭选择器
close() {
if (this.closeOnClickOverlay) {
this.$emit('close')
}
},
// 点击工具栏的取消按钮
cancel() {
this.$emit('cancel')
},
// 点击工具栏的确定按钮
confirm() {
this.$emit('confirm', {
value: this.innerValue,
mode: this.mode
})
this.$emit('input', this.innerValue)
},
//用正则截取输出值,当出现多组数字时,抛出错误
intercept(e,type){
let judge = e.match(/\d+/g)
//判断是否掺杂数字
if(judge.length>1){
uni.$u.error("请勿在过滤或格式化函数时添加数字")
return 0
}else if(type&&judge[0].length==4){//判断是否是年份
return judge[0]
}else if(judge[0].length>2){
uni.$u.error("请勿在过滤或格式化函数时添加数字")
return 0
}else{
return judge[0]
}
},
// 列发生变化时触发
change(e) {
const { indexs, values } = e
let selectValue = ''
if(this.mode === 'time') {
// 根据value各列索引，从各列数组中，取出当前时间的选中值
selectValue = `${this.intercept(values[0][indexs[0]])}:${this.intercept(values[1][indexs[1]])}:${this.intercept(values[2][indexs[2]])}`
} else {
// 将选择的值转为数值，比如'03'转为数值的3，'2019'转为数值的2019
const year = parseInt(this.intercept(values[0][indexs[0]],'year'))
const month = parseInt(this.intercept(values[1][indexs[1]]))
let date = parseInt(values[2] ? this.intercept(values[2][indexs[2]]) : 1)
let hour = 0, minute = 0, seconds = 0
// 此月份的最大天数
const maxDate = dayjs(`${year}-${month}`).daysInMonth()
// year-month模式下，date不会出现在列中，设置为1，为了符合后边需要减1的需求
if (this.mode === 'year-month') {
date = 1
}
// 不允许超过maxDate值
date = Math.min(maxDate, date)
if (this.mode === 'datetime') {
hour = parseInt(this.intercept(values[3][indexs[3]]))
minute = parseInt(this.intercept(values[4][indexs[4]]))
seconds = parseInt(this.intercept(values[5][indexs[5]]))
}
// 转为时间模式
selectValue = Number(new Date(year, month - 1, date, hour, minute, seconds))
}
// 取出准确的合法值，防止超越边界的情况
selectValue = this.correctValue(selectValue)
this.innerValue = selectValue
this.updateColumnValue(selectValue)
// 发出change时间，value为当前选中的时间戳
this.$emit('change', {
value: selectValue,
//
// 微信小程序不能传递this实例，会因为循环引用而报错
picker: this.$refs.picker,
//
mode: this.mode
})
},
// 更新各列的值，进行补0、格式化等操作
updateColumnValue(value) {
this.innerValue = value
this.updateColumns()
this.updateIndexs(value)
},
// 更新索引
updateIndexs(value) {
let values = []
const formatter = this.formatter || this.innerFormatter
const padZero = uni.$u.padZero
if (this.mode === 'time') {
// 将time模式的时间用:分隔成数组
const timeArr = value.split(':')
// 使用formatter格式化方法进行管道处理
values = [formatter('hour', timeArr[0]), formatter('minute', timeArr[1]), formatter('seconds', timeArr[2])]
} else {
const date = new Date(value)
values = [
formatter('year', `${dayjs(value).year()}`),
// 月份补0
formatter('month', padZero(dayjs(value).month() + 1))
]
if (this.mode === 'date') {
// date模式，需要添加天列
values.push(formatter('day', padZero(dayjs(value).date())))
}
if (this.mode === 'datetime') {
// 数组的push方法，可以写入多个参数
values.push(
formatter('day', padZero(dayjs(value).date())),
formatter('hour', padZero(dayjs(value).hour())),
formatter('minute', padZero(dayjs(value).minute())),
formatter('seconds', padZero(dayjs(value).second()))
)
}
}
// 根据当前各列的所有值，从各列默认值中找到默认值在各列中的索引
const indexs = this.columns.map((column, index) => {
// 通过取大值，可以保证不会出现找不到索引的-1情况
return Math.max(0, column.findIndex(item => item === values[index]))
})
this.innerDefaultIndex = indexs
},
// 更新各列的值
updateColumns() {
const formatter = this.formatter || this.innerFormatter
// 获取各列的值，并且map后，对各列的具体值进行补0操作
const results = this.getOriginColumns().map((column) => column.values.map((value) => formatter(column.type, value)))
this.columns = results
},
getOriginColumns() {
// 生成各列的值
const results = this.getRanges().map(({ type, range }) => {
let values = times(range[1] - range[0] + 1, (index) => {
let value = range[0] + index
value = type === 'year' ? `${value}` : uni.$u.padZero(value)
return value
})
// 进行过滤
if (this.filter) {
values = this.filter(type, values)
}
return { type, values }
})
return results
},
// 通过最大值和最小值生成数组
generateArray(start, end) {
return Array.from(new Array(end + 1).keys()).slice(start)
},
// 得出合法的时间
correctValue(value) {
const isDateMode = this.mode !== 'time'
if (isDateMode && !uni.$u.test.date(value)) {
// 如果是日期类型，但是又没有设置合法的当前时间的话，使用最小时间为当前时间
value = this.minDate
} else if (!isDateMode && !value) {
// 如果是时间类型，而又没有默认值的话，就用最小时间
value = `${uni.$u.padZero(this.minHour)}:${uni.$u.padZero(this.minMinute)}:${uni.$u.padZero(this.minSeconds)}`
}
// 时间类型
if (!isDateMode) {
if (String(value).indexOf(':') === -1) return uni.$u.error('时间错误，请传递如12:24:43的格式')
let [hour, minute, seconds] = value.split(':')
// 对时间补零，同时控制在最小值和最大值之间
hour = uni.$u.padZero(uni.$u.range(this.minHour, this.maxHour, Number(hour)))
minute = uni.$u.padZero(uni.$u.range(this.minMinute, this.maxMinute, Number(minute)))
seconds = uni.$u.padZero(uni.$u.range(this.minSeconds, this.maxSeconds, Number(seconds)))
return `${ hour }:${ minute }:${ seconds }`
} else {
// 如果是日期格式，控制在最小日期和最大日期之间
value = dayjs(value).isBefore(dayjs(this.minDate)) ? this.minDate : value
value = dayjs(value).isAfter(dayjs(this.maxDate)) ? this.maxDate : value
return value
}
},
// 获取每列的最大和最小值
getRanges() {
if (this.mode === 'time') {
return [
{
type: 'hour',
range: [this.minHour, this.maxHour],
},
{
type: 'minute',
range: [this.minMinute, this.maxMinute],
},
{
type: 'seconds',
range: [this.minSeconds, this.maxSeconds],
}
];
}
const { maxYear, maxDate, maxMonth, maxHour, maxMinute, maxSeconds } = this.getBoundary('max', this.innerValue);
const { minYear, minDate, minMonth, minHour, minMinute, minSeconds } = this.getBoundary('min', this.innerValue);
const result = [
{
type: 'year',
range: [minYear, maxYear],
},
{
type: 'month',
range: [minMonth, maxMonth],
},
{
type: 'day',
range: [minDate, maxDate],
},
{
type: 'hour',
range: [minHour, maxHour],
},
{
type: 'minute',
range: [minMinute, maxMinute],
},
{
type: 'seconds',
range: [minSeconds, maxSeconds],
},
];
if (this.mode === 'date')
result.splice(3, 3);
if (this.mode === 'year-month')
result.splice(2, 4);
return result;
},
// 根据minDate、maxDate、minHour、maxHour等边界值，判断各列的开始和结束边界值
getBoundary(type, innerValue) {
const value = new Date(innerValue)
const boundary = new Date(this[`${type}Date`])
const year = dayjs(boundary).year()
let month = 1
let date = 1
let hour = 0
let minute = 0
let seconds = 0
if (type === 'max') {
month = 12
// 月份的天数
date = dayjs(value).daysInMonth()
hour = 23
minute = 59
seconds = 59
}
// 获取边界值，逻辑是：当年达到了边界值(最大或最小年)，就检查月允许的最大和最小值，以此类推
if (dayjs(value).year() === year) {
month = dayjs(boundary).month() + 1
if (dayjs(value).month() + 1 === month) {
date = dayjs(boundary).date()
if (dayjs(value).date() === date) {
hour = dayjs(boundary).hour()
if (dayjs(value).hour() === hour) {
minute = dayjs(boundary).minute()
if (dayjs(value).minute() === minute) {
seconds = dayjs(boundary).second()
}
}
}
}
}
return {
[`${type}Year`]: year,
[`${type}Month`]: month,
[`${type}Date`]: date,
[`${type}Hour`]: hour,
[`${type}Minute`]: minute,
[`${type}Seconds`]: seconds
}
},
},
}
</script>
<!-- <style lang="scss" scoped>
@import '../../libs/css/components.scss';
</style> -->
5.3、props.js源码
export default {
props: {
// 是否打开组件
show: {
type: Boolean,
default: uni.$u.props.datetimePicker.show
},
// 是否展示顶部的操作栏
showToolbar: {
type: Boolean,
default: uni.$u.props.datetimePicker.showToolbar
},
// 绑定值
value: {
type: [String, Number],
default: uni.$u.props.datetimePicker.value
},
// 顶部标题
title: {
type: String,
default: uni.$u.props.datetimePicker.title
},
// 展示格式，年月日 date 为-日期选择，时分秒 time 为时间选择， year-month 为年月选择，年月日时分秒 datetime 为日期时间选择
mode: {
type: String,
default: uni.$u.props.datetimePicker.mode
},
// 可选的最大时间
maxDate: {
type: Number,
// 最大默认值为后10年
default: uni.$u.props.datetimePicker.maxDate
},
// 可选的最小时间
minDate: {
type: Number,
// 最小默认值为前10年
default: uni.$u.props.datetimePicker.minDate
},
// 可选的最小小时，仅mode=time有效
minHour: {
type: Number,
default: uni.$u.props.datetimePicker.minHour
},
// 可选的最大小时，仅mode=time有效
maxHour: {
type: Number,
default: uni.$u.props.datetimePicker.maxHour
},
// 可选的最小分钟，仅mode=time有效
minMinute: {
type: Number,
default: uni.$u.props.datetimePicker.minMinute
},
// 可选的最大分钟，仅mode=time有效
maxMinute: {
type: Number,
default: uni.$u.props.datetimePicker.maxMinute
},
// 可选的最小秒，仅mode=time有效
minSeconds: {
type: Number,
default: 0
},
// 可选的最大秒，仅mode=time有效
maxSeconds: {
type: Number,
default: 59
},
// 选项过滤函数
filter: {
type: [Function, null],
default: uni.$u.props.datetimePicker.filter
},
// 选项格式化函数
formatter: {
type: [Function, null],
default: uni.$u.props.datetimePicker.formatter
},
// 是否显示加载中状态
loading: {
type: Boolean,
default: uni.$u.props.datetimePicker.loading
},
// 各列中，单个选项的高度
itemHeight: {
type: [String, Number],
default: uni.$u.props.datetimePicker.itemHeight
},
// 取消按钮的文字
cancelText: {
type: String,
default: uni.$u.props.datetimePicker.cancelText
},
// 确认按钮的文字
confirmText: {
type: String,
default: uni.$u.props.datetimePicker.confirmText
},
// 取消按钮的颜色
cancelColor: {
type: String,
default: uni.$u.props.datetimePicker.cancelColor
},
// 确认按钮的颜色
confirmColor: {
type: String,
default: uni.$u.props.datetimePicker.confirmColor
},
// 每列中可见选项的数量
visibleItemCount: {
type: [String, Number],
default: uni.$u.props.datetimePicker.visibleItemCount
},
// 是否允许点击遮罩关闭选择器
closeOnClickOverlay: {
type: Boolean,
default: uni.$u.props.datetimePicker.closeOnClickOverlay
},
// 各列的默认索引
defaultIndex: {
type: Array,
default: uni.$u.props.datetimePicker.defaultIndex
}
}
}
5543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
