一、效果
废话不多说，直接上代码
二、代码
1、代码目录
2、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
}))
3、my-date-insert-picker.vue
<template>
<picker-view
class="my-date-picker-view"
:indicatorStyle="`height: ${$u.addUnit(itemHeight)}`"
:value="innerIndex"
@change="changeHandler">
<picker-view-column
v-for="(item, index) in innerColumns"
:key="index"
class="my-date-picker-item">
<text
v-if="$u.test.array(item)"
v-for="(item1, index1) in item"
:key="index1"
:style="{
height: $u.addUnit(itemHeight),
lineHeight: $u.addUnit(itemHeight),
fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal',
display: 'block'
}"
>{{ getItemText(item1) }}</text>
</picker-view-column>
</picker-view>
</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 dayjs from './dayjs.js'
export default {
name: 'my-date-insert-picker',
props: {
// 绑定值
value: {
type: [String, Number],
default: ''
},
// 展示格式，mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择
mode: {
type: String,
default: 'date'
},
// 可选的最大时间
maxDate: {
type: Number,
// 最大默认值为后10年
default: new Date(new Date().getFullYear() + 10, 0, 1).getTime()
},
// 可选的最小时间
minDate: {
type: Number,
// 最小默认值为前10年
default: new Date(new Date().getFullYear() - 10, 0, 1).getTime()
},
// 可选的最小小时，仅mode=time有效
minHour: {
type: Number,
default: 0
},
// 可选的最大小时，仅mode=time有效
maxHour: {
type: Number,
default: 23
},
// 可选的最小分钟，仅mode=time有效
minMinute: {
type: Number,
default: 0
},
// 可选的最大分钟，仅mode=time有效
maxMinute: {
type: Number,
default: 59
},
// 选项过滤函数
filter: {
type: [Function, null],
default: null
},
// 各列中，单个选项的高度
itemHeight: {
type: [String, Number],
default: 44
},
// 每列中可见选项的数量
visibleItemCount: {
type: [String, Number],
default: 5
},
// 选项格式化函数
formatter: {
type: [Function, null],
default: null
},
},
data() {
return {
innerFormatter: (type, value) => value,
// 各列的值
innerColumns: [],
// 索引值 ，对应picker-view的value
innerIndex: [],
innerValue: ''
}
},
computed: {
},
watch: {
value: {
immediate: true,
handler(val) {
this.innerValue = this.correctValue(val)
this.init(this.innerValue)
}
}
},
created() {
},
methods: {
init(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])]
} 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()))
)
}
}
// 根据当前各列的所有值，从各列默认值中找到默认值在各列中的索引
const indexs = this.innerColumns.map((column, index) => {
// 通过取大值，可以保证不会出现找不到索引的-1情况
return Math.max(0, column.findIndex(item => item === values[index]))
})
this.innerIndex = 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.innerColumns = results
// console.log('results', results)
// 如果在设置各列数据时，没有被设置默认的各列索引defaultIndex，那么用0去填充它，数组长度为列的数量
if (this.innerIndex.length === 0) {
this.innerIndex = new Array(results.length).fill(0)
}
},
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
},
// 获取每列的最大和最小值
getRanges() {
if (this.mode === 'time') {
return [{
type: 'hour',
range: [this.minHour, this.maxHour],
},
{
type: 'minute',
range: [this.minMinute, this.maxMinute],
},
]
}
const {
maxYear,
maxDate,
maxMonth,
maxHour,
maxMinute,
} = this.getBoundary('max', this.innerValue)
const {
minYear,
minDate,
minMonth,
minHour,
minMinute,
} = 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],
},
]
if (this.mode === 'date')
result.splice(3, 2)
if (this.mode === 'year-month')
result.splice(2, 3)
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
if (type === 'max') {
month = 12
// 月份的天数
date = dayjs(value).daysInMonth()
hour = 23
minute = 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()
}
}
}
}
return {
[`${type}Year`]: year,
[`${type}Month`]: month,
[`${type}Date`]: date,
[`${type}Hour`]: hour,
[`${type}Minute`]: minute
}
},
// 获取item需要显示的文字，判别为对象还是文本
getItemText(item) {
if (uni.$u.test.object(item)) {
return item['text']
} else {
return item
}
},
// 选择器某一列的数据发生变化时触发
changeHandler(e) {
const {
value
} = e.detail
this.innerIndex = uni.$u.deepClone(value)
const values = this.innerColumns
const indexs = value
let selectValue = ''
if(this.mode === 'time') {
// 根据value各列索引，从各列数组中，取出当前时间的选中值
selectValue = `${this.intercept(values[0][indexs[0]])}:${this.intercept(values[1][indexs[1]])}`
} 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
// 此月份的最大天数
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]]))
}
// 转为时间模式
selectValue = Number(new Date(year, month - 1, date, hour, minute))
}
// 取出准确的合法值，防止超越边界的情况
selectValue = this.correctValue(selectValue)
this.innerValue = selectValue
this.$emit('input', this.innerValue)
this.$emit('change', this.innerValue)
this.init(selectValue)
},
//用正则截取输出值,当出现多组数字时,抛出错误
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]
}
},
// 得出合法的时间
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)}`
}
// 时间类型
if (!isDateMode) {
if (String(value).indexOf(':') === -1) return uni.$u.error('时间错误，请传递如12:24的格式')
let [hour, minute] = 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)))
return `${ hour }:${ minute }`
} else {
// 如果是日期格式，控制在最小日期和最大日期之间
value = dayjs(value).isBefore(dayjs(this.minDate)) ? this.minDate : value
value = dayjs(value).isAfter(dayjs(this.maxDate)) ? this.maxDate : value
return value
}
}
}
}
</script>
<style lang="scss" scoped>
.my-date-picker-view {
width: 100%;
height: 300rpx;
background: #fff;
.u-picker__view__column {
display: flex;
flex: 1;
justify-content: center;
.u-picker__view__item {
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
text-align: center;
/* #ifndef APP-NVUE */
display: block;
/* #endif */
color: $u-main-color;
&--disabled {
/* #ifndef APP-NVUE */
cursor: not-allowed;
/* #endif */
opacity: 0.35;
}
}
}
}
.my-date-picker-item {
line-height: 88rpx;
text-align: center;
}
</style>
三、使用
<my-date-insert-picker
v-model="formData.periodDate"
:formatter="formatter"
></my-date-insert-picker>
// data定义
formData: {
periodDate: ''
}
// 日期组件数据格式化
formatter(type, value) {
if (type === 'year') {
return `${value}年`
}
if (type === 'month') {
return `${value}月`
}
if (type === 'day') {
return `${value}日`
}
return value
}
