dykj-football/uni_modules/uview-plus/components/u-datetime-picker/u-datetime-picker.vue

449 lines
16 KiB
Vue
Raw Normal View History

2024-04-17 15:27:43 +08:00
<template>
<view v-if="hasInput">
<u-input
:placeholder="placeholder"
border="surround"
v-model="inputValue"
@click="showByClickInput = !showByClickInput"
></u-input>
</view>
<u-picker
ref="picker"
:show="show || (hasInput && showByClickInput)"
:popupMode="popupMode"
: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';
import mpMixin from '../../libs/mixin/mpMixin';
import mixin from '../../libs/mixin/mixin';
import dayjs from 'dayjs/esm/index';
import { range, error, padZero } from '../../libs/function/index';
import test from '../../libs/function/test';
/**
* DatetimePicker 时间日期选择器
* @description 此选择器用于时间日期
* @tutorial https://ijry.github.io/uview-plus/components/datetimePicker.html
* @property {Boolean} show 用于控制选择器的弹出与收起 ( 默认 false )
* @property {Boolean} showToolbar 是否显示顶部的操作栏 ( 默认 true )
* @property {String | Number} modelValue 绑定值
* @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 {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: [mpMixin, mixin, props],
data() {
return {
// 原来的日期选择器不方便这里增加一个hasInput选项支持类似element的自带输入框的功能。
inputValue: '', // 表单显示值
showByClickInput: false, // 是否在hasInput模式下显示日期选择弹唱
columns: [],
innerDefaultIndex: [],
innerFormatter: (type, value) => value
}
},
watch: {
show(newValue, oldValue) {
if (newValue) {
this.updateColumnValue(this.innerValue)
}
},
// #ifdef VUE3
modelValue(newValue) {
this.init()
this.getInputValue()
},
// #endif
// #ifdef VUE2
value(newValue) {
this.init()
this.getInputValue()
},
// #endif
propsChange() {
this.init()
}
},
computed: {
// 如果以下这些变量发生了变化,意味着需要重新初始化各列的值
propsChange() {
return [this.mode, this.maxDate, this.minDate, this.minHour, this.maxHour, this.minMinute, this.maxMinute, this.filter, ]
}
},
mounted() {
this.init()
},
// #ifdef VUE3
emits: ['close', 'cancel', 'confirm', 'change', 'update:modelValue'],
// #endif
methods: {
getInputValue(newValue) {
if (this.mode == 'time') {
this.inputValue = newValue
} else {
if (this.format) {
this.inputValue = dayjs(newValue).format(this.format)
} else {
let format = ''
switch (this.mode) {
case 'date':
format = 'YYYY-MM-DD'
break;
case 'year-month':
format = 'YYYY-MM'
break;
case 'datetime':
format = 'YYYY-MM-DD HH:mm'
break;
case 'time':
format = 'HH:mm'
break;
default:
break;
}
this.inputValue = dayjs(newValue).format(format)
}
}
},
init() {
// #ifdef VUE3
this.innerValue = this.correctValue(this.modelValue)
// #endif
// #ifdef VUE2
this.innerValue = this.correctValue(this.value)
// #endif
this.updateColumnValue(this.innerValue)
},
// 在微信小程序中不支持将函数当做props参数故只能通过ref形式调用
setFormatter(e) {
this.innerFormatter = e
},
// 关闭选择器
close() {
if (this.closeOnClickOverlay) {
this.$emit('close')
}
},
// 点击工具栏的取消按钮
cancel() {
if (this.hasInput) {
this.showByClickInput = false
}
this.$emit('cancel')
},
// 点击工具栏的确定按钮
confirm() {
this.$emit('confirm', {
value: this.innerValue,
mode: this.mode
})
// #ifdef VUE3
this.$emit('update:modelValue', this.innerValue)
// #endif
// #ifdef VUE2
this.$emit('input', this.innerValue)
// #endif
if (this.hasInput) {
this.getInputValue(this.innerValue)
this.showByClickInput = false
}
},
//用正则截取输出值,当出现多组数字时,抛出错误
intercept(e,type){
let judge = e.match(/\d+/g)
//判断是否掺杂数字
if(judge.length>1){
error("请勿在过滤或格式化函数时添加数字")
return 0
}else if(type&&judge[0].length==4){//判断是否是年份
return judge[0]
}else if(judge[0].length>2){
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]])}`
} 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.updateColumnValue(selectValue)
// 发出change时间value为当前选中的时间戳
this.$emit('change', {
value: selectValue,
// #ifndef MP-WEIXIN
// 微信小程序不能传递this实例会因为循环引用而报错
picker: this.$refs.picker,
// #endif
mode: this.mode
})
},
// 更新各列的值进行补0、格式化等操作
updateColumnValue(value) {
this.innerValue = value
this.updateColumns()
// 延迟执行,等待u-picker组件列数据更新完后再设置选中值索引
setTimeout(() => {
this.updateIndexs(value)
}, 0);
},
// 更新索引
updateIndexs(value) {
let values = []
const formatter = this.formatter || this.innerFormatter
const padZero = 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.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}` : padZero(value)
return value
})
// 进行过滤
if (this.filter) {
values = this.filter(type, values)
if (!values || (values && values.length == 0)) {
uni.showToast({
title: '日期filter结果不能为空',
icon: 'error',
mask: true
})
}
}
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 && !test.date(value)) {
// 如果是日期类型,但是又没有设置合法的当前时间的话,使用最小时间为当前时间
value = this.minDate
} else if (!isDateMode && !value) {
// 如果是时间类型,而又没有默认值的话,就用最小时间
value = `${padZero(this.minHour)}:${padZero(this.minMinute)}`
}
// 时间类型
if (!isDateMode) {
if (String(value).indexOf(':') === -1) return error('时间错误请传递如12:24的格式')
let [hour, minute] = value.split(':')
// 对时间补零,同时控制在最小值和最大值之间
hour = padZero(range(this.minHour, this.maxHour, Number(hour)))
minute = padZero(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
}
},
// 获取每列的最大和最小值
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
}
},
},
}
</script>
<style lang="scss" scoped>
@import '../../libs/css/components.scss';
</style>