1
This commit is contained in:
@@ -0,0 +1,507 @@
|
||||
<script lang="ts">
|
||||
import { type PropType } from "vue"
|
||||
import { getUid, setPagePullRefresh, getPagePullRefresh } from "../../core/util/xCoreUtil.uts"
|
||||
import { getDefaultColor } from "../../core/util/xCoreColorUtil.uts"
|
||||
import { xDate, xDateTypeTime, createDate } from "../../core/util/xDate.uts"
|
||||
import { xConfig } from "../../config/xConfig.uts"
|
||||
import { PICKER_ITEM_INFO } from "../../interface.uts"
|
||||
type coverValue = {
|
||||
value : string[][],
|
||||
str : string
|
||||
}
|
||||
type ModelType = "year" | "month" | "day" | "hour" | "minute" | "second";
|
||||
|
||||
/**
|
||||
* @name 嵌入式日期选择器 xDateView
|
||||
* @description 内嵌日期选择，可以控制显示精确到秒。默认的开始时间为当前时间的上一年，结束时间为默认当前时间
|
||||
* 使用时，建议不要显示过多年份以防卡太多数据。
|
||||
* @page /pages/index/picker-date
|
||||
* @category 表单组件
|
||||
* @constant 平台兼容
|
||||
* | Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
|
||||
| --- | --- | --- | --- | --- | --- | --- | --- |
|
||||
| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
|
||||
*/
|
||||
export default {
|
||||
data() {
|
||||
let startValue = new xDate();
|
||||
let endValue = new xDate();
|
||||
startValue.subtraction(1, 'y')
|
||||
return {
|
||||
nowValue: [] as string[][],
|
||||
nowValueStr: '',
|
||||
startDate: startValue,
|
||||
endDate: endValue,
|
||||
dateList: [] as PICKER_ITEM_INFO[][],
|
||||
changeIndex: 0,
|
||||
nowPull: false
|
||||
}
|
||||
},
|
||||
emits: [
|
||||
|
||||
/**
|
||||
* 滑动变换时触发
|
||||
* @param {string} date - 当前选中时间
|
||||
*/
|
||||
'change',
|
||||
/**
|
||||
* 经格式化后的值。等同v-model:model-str
|
||||
*/
|
||||
'update:modelStr',
|
||||
'update:modelValue'
|
||||
],
|
||||
props: {
|
||||
|
||||
/**
|
||||
* 当前时间,与modelStr不同，此提供的值必须是正常的时间格式
|
||||
* 否则报错，无法运行。可以提供以下合法格式：
|
||||
* YYYY,YYYY-MM,YYYY-MM-DD,YYYY-MM-DD HH,YYYY-MM-DD HH:mm,YYYY-MM-DD HH:mm:ss
|
||||
*/
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
/**
|
||||
* 当前时间经过format格式化后输出的值。
|
||||
* 此值不会处理输入，只输出显示。
|
||||
*/
|
||||
modelStr: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
/**
|
||||
* 顶部标题
|
||||
*/
|
||||
title: {
|
||||
type: String,
|
||||
default: "请选择时间"
|
||||
},
|
||||
/**
|
||||
* 开始时间，请提供正确的时间格式
|
||||
*/
|
||||
start: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
/**
|
||||
* 结束时间，请提供正确的时间格式
|
||||
*/
|
||||
end: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
/**
|
||||
* 精确到的级别
|
||||
* year:年
|
||||
* month:年月
|
||||
* day:年月日
|
||||
* hour:年月日小时
|
||||
* minute:年月日小时分钟
|
||||
* second:年月日小时分钟秒
|
||||
*/
|
||||
type: {
|
||||
type: String as PropType<ModelType>,
|
||||
default: "day"
|
||||
},
|
||||
/**
|
||||
* 输出时间格式，只对v-model:modelStr有效
|
||||
* 如果桢同步对vmodel:modelValue有效需要设置formatSyncValue为true
|
||||
* 有效格式：
|
||||
* YYYY年
|
||||
* MM月
|
||||
* DD日
|
||||
* hh小时
|
||||
* mm分钟
|
||||
* ss秒
|
||||
*/
|
||||
format: {
|
||||
type: String,
|
||||
default: "YYYY-MM-DD"
|
||||
},
|
||||
/**
|
||||
* 是否将format格式化的v-model:modelStr同步到v-model:modelValue
|
||||
* 默认false,注意：如果开启了同步，你要确保format的值是正常的时间值
|
||||
* 正常兼容以下时间格式：
|
||||
* YYYY,YYYY-MM,YYYY-MM-DD,YYYY-MM-DD HH,YYYY-MM-DD HH:mm,YYYY-MM-DD HH:mm:ss
|
||||
*/
|
||||
formatSyncValue:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
/**
|
||||
* 上方的单位名称,'年', '月', '日', '时', '分', '秒'
|
||||
*/
|
||||
cellUnits: {
|
||||
type: Array as PropType<string[]>,
|
||||
default: () : string[] => [] as string[]
|
||||
},
|
||||
|
||||
},
|
||||
computed: {
|
||||
_cellUnits():string[]{
|
||||
if(this.cellUnits.length==0){
|
||||
|
||||
return [
|
||||
this!.i18n.t("tmui4x.pickerDate.year"),
|
||||
this!.i18n.t("tmui4x.pickerDate.month"),
|
||||
this!.i18n.t("tmui4x.pickerDate.day"),
|
||||
this!.i18n.t("tmui4x.pickerDate.hour"),
|
||||
this!.i18n.t("tmui4x.pickerDate.minute"),
|
||||
this!.i18n.t("tmui4x.pickerDate.second"),
|
||||
]
|
||||
}
|
||||
return this.cellUnits;
|
||||
},
|
||||
_start_date() : xDate {
|
||||
if (this.start == "") return this.startDate
|
||||
|
||||
return new xDate(this.start)
|
||||
},
|
||||
_end_date() : xDate {
|
||||
if (this.end == "") return this.endDate
|
||||
return new xDate(this.end)
|
||||
},
|
||||
_getDateType():xDateTypeTime{
|
||||
let isType = 's' as xDateTypeTime
|
||||
if (this.type == 'year') isType = 'y'
|
||||
if (this.type == 'month') isType = 'm'
|
||||
if (this.type == 'day') isType = 'd'
|
||||
if (this.type == 'hour') isType = 'h'
|
||||
if (this.type == 'minute') isType = 'M'
|
||||
return isType;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
modelValue(newvalue : string) {
|
||||
if (newvalue == '') return;
|
||||
let isType = this._getDateType
|
||||
if (new xDate(newvalue).isBetweenOf(new xDate(this.nowValueStr), '=', isType)) return;
|
||||
this.defaultModelvalue(newvalue,true)
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.nowPull = getPagePullRefresh()
|
||||
let nowValue = new xDate(this.modelValue)
|
||||
this.defaultModelvalue(nowValue.format('YYYY-MM-DD'), this.modelValue != '')
|
||||
|
||||
},
|
||||
methods: {
|
||||
defaultModelvalue(newvalue:string, showStr : boolean){
|
||||
let isType = this._getDateType
|
||||
let nowValue = new xDate(newvalue)
|
||||
if(nowValue.isBetweenOf(this._start_date, '<=', isType)){
|
||||
nowValue = this._start_date;
|
||||
}
|
||||
if(nowValue.isBetweenOf(this._end_date, '>=', isType)){
|
||||
nowValue = this._end_date;
|
||||
}
|
||||
|
||||
let stp = this.getRangByDateTime(nowValue)
|
||||
|
||||
this.nowValue = stp.value;
|
||||
this.nowValueStr = stp.str;
|
||||
this.dateList = this.getTimeTreeByStartAndEnd(this._start_date, this._end_date)
|
||||
/**
|
||||
* 经格式化后的值。等同v-model:model-str
|
||||
*/
|
||||
this.$emit('update:modelStr', this.formatTimeDate());
|
||||
},
|
||||
getRangByDateTime(d : xDate) : coverValue {
|
||||
let nowRange = [
|
||||
[d.getYear().toString()],
|
||||
[(d.getMonth()).toString()],
|
||||
[d.getDate().toString()],
|
||||
[d.getHours().toString()],
|
||||
[d.getMinutes().toString()],
|
||||
[d.getSeconds().toString()],
|
||||
] as string[][]
|
||||
let nowRangeStr = d.getYear().toString() + "-" + (d.getMonth() + 1).toString()
|
||||
+ "-" + d.getDate().toString()
|
||||
+ " " + d.getHours().toString() + ":"
|
||||
+ d.getMinutes().toString() + ":"
|
||||
+ d.getSeconds().toString()
|
||||
return {
|
||||
value: nowRange as string[][],
|
||||
str: nowRangeStr
|
||||
} as coverValue
|
||||
},
|
||||
|
||||
getNowTypeLenIndex() : number {
|
||||
let index = 6
|
||||
if (this.type == 'year') {
|
||||
index = 1;
|
||||
} else if (this.type == 'month') {
|
||||
index = 2;
|
||||
} else if (this.type == 'day') {
|
||||
index = 3;
|
||||
} else if (this.type == 'hour') {
|
||||
index = 4;
|
||||
} else if (this.type == 'minute') {
|
||||
index = 5;
|
||||
}
|
||||
return index;
|
||||
},
|
||||
indexToHex(i : number) : string {
|
||||
let n = i.toString()
|
||||
if (n.length == 1) return '0' + n;
|
||||
return n;
|
||||
},
|
||||
getTimeTreeByStartAndEnd(start : xDate, end : xDate) : PICKER_ITEM_INFO[][] {
|
||||
let startCopy = start.getClone();
|
||||
let nowDate = new xDate(this.nowValueStr)
|
||||
let endCopy = end.getClone();
|
||||
let years = [] as PICKER_ITEM_INFO[];
|
||||
let months = [] as PICKER_ITEM_INFO[];
|
||||
let days = [] as PICKER_ITEM_INFO[];
|
||||
let hours = [] as PICKER_ITEM_INFO[];
|
||||
let minutes = [] as PICKER_ITEM_INFO[];
|
||||
let seconds = [] as PICKER_ITEM_INFO[];
|
||||
|
||||
for (let i = startCopy.getYear(); i <= endCopy.getYear(); i++) {
|
||||
years.push({
|
||||
id: i.toString(),
|
||||
title: this.indexToHex(i)
|
||||
} as PICKER_ITEM_INFO)
|
||||
}
|
||||
let _this = this;
|
||||
function getD(type : string, s : number, n : number) {
|
||||
if (type == 'm') {
|
||||
for (let i = s; i <= n; i++) {
|
||||
months.push({
|
||||
id: i.toString(),
|
||||
title: _this.indexToHex(i + 1)
|
||||
} as PICKER_ITEM_INFO)
|
||||
}
|
||||
} else if (type == 'd') {
|
||||
for (let i = s; i <= n; i++) {
|
||||
days.push({
|
||||
id: i.toString(),
|
||||
title: _this.indexToHex(i)
|
||||
} as PICKER_ITEM_INFO)
|
||||
}
|
||||
} else if (type == 'h') {
|
||||
for (let i = s; i <= n; i++) {
|
||||
hours.push({
|
||||
id: i.toString(),
|
||||
title: _this.indexToHex(i)
|
||||
} as PICKER_ITEM_INFO)
|
||||
}
|
||||
} else if (type == 'M') {
|
||||
for (let i = s; i <= n; i++) {
|
||||
minutes.push({
|
||||
id: i.toString(),
|
||||
title: _this.indexToHex(i)
|
||||
} as PICKER_ITEM_INFO)
|
||||
}
|
||||
} else if (type == 's') {
|
||||
for (let i = s; i <= n; i++) {
|
||||
seconds.push({
|
||||
id: i.toString(),
|
||||
title: _this.indexToHex(i)
|
||||
} as PICKER_ITEM_INFO)
|
||||
}
|
||||
}
|
||||
}
|
||||
function getDnumber(type : xDateTypeTime, target : xDateTypeTime) : number[] {
|
||||
let st = 0;
|
||||
let et = 0
|
||||
|
||||
// 不包含起始, 开始和结束内。
|
||||
if (nowDate.isBetween(startCopy, endCopy, type, '()')) {
|
||||
if (target == 'm') {
|
||||
st = 0
|
||||
et = 11
|
||||
} else if (target == 'd') {
|
||||
st = 1
|
||||
et = nowDate.getMonthCountDay()
|
||||
} else if (target == 'h') {
|
||||
st = 0
|
||||
et = 23
|
||||
} else if (target == 'M' || target == 's') {
|
||||
st = 0
|
||||
et = 59
|
||||
}
|
||||
|
||||
//
|
||||
} else {
|
||||
|
||||
// 开始和结束相等
|
||||
if (startCopy.isBetweenOf(endCopy, '=', type)) {
|
||||
|
||||
if (target == 'm') {
|
||||
st = startCopy.getMonth()
|
||||
et = endCopy.getMonth()
|
||||
} else if (target == 'd') {
|
||||
st = startCopy.getDate()
|
||||
et = endCopy.getDate()
|
||||
} else if (target == 'h') {
|
||||
st = startCopy.getHours()
|
||||
et = endCopy.getHours()
|
||||
} else if (target == 'M') {
|
||||
st = startCopy.getMinutes()
|
||||
et = endCopy.getMinutes()
|
||||
} else if (target == 's') {
|
||||
st = startCopy.getSeconds()
|
||||
et = endCopy.getSeconds()
|
||||
}
|
||||
|
||||
} else if (nowDate.isBetweenOf(startCopy, '<=', type)) {
|
||||
|
||||
if (target == 'm') {
|
||||
st = startCopy.getMonth()
|
||||
et = 11
|
||||
} else if (target == 'd') {
|
||||
st = startCopy.getDate()
|
||||
et = startCopy.getMonthCountDay()
|
||||
} else if (target == 'h') {
|
||||
st = startCopy.getHours()
|
||||
et = 23
|
||||
} else if (target == 'M') {
|
||||
st = startCopy.getMinutes()
|
||||
et = 59
|
||||
} else if (target == 's') {
|
||||
st = startCopy.getSeconds()
|
||||
et = 59
|
||||
}
|
||||
} else if (nowDate.isBetweenOf(endCopy, '>=', type)) {
|
||||
|
||||
if (target == 'm') {
|
||||
|
||||
st = 0
|
||||
et = endCopy.getMonth()
|
||||
} else if (target == 'd') {
|
||||
st = 1
|
||||
et = endCopy.getDate()
|
||||
|
||||
} else if (target == 'h') {
|
||||
st = 0
|
||||
et = endCopy.getHours()
|
||||
} else if (target == 'M') {
|
||||
st = 0
|
||||
et = endCopy.getMinutes()
|
||||
} else if (target == 's') {
|
||||
st = 0
|
||||
et = endCopy.getSeconds()
|
||||
}
|
||||
}
|
||||
}
|
||||
return [st, et] as number[]
|
||||
}
|
||||
let maxlen = this.getNowTypeLenIndex();
|
||||
|
||||
if (maxlen > 1) {
|
||||
let sdate = getDnumber('y', 'm')
|
||||
getD('m', sdate[0]!, sdate[1]!)
|
||||
}
|
||||
if (maxlen > 2) {
|
||||
let sdate = getDnumber('m', 'd')
|
||||
|
||||
getD('d', sdate[0]!, sdate[1]!)
|
||||
}
|
||||
if (maxlen > 3) {
|
||||
let sdate = getDnumber('d', 'h')
|
||||
getD('h', sdate[0]!, sdate[1]!)
|
||||
}
|
||||
if (maxlen > 4) {
|
||||
let sdate = getDnumber('h', 'M')
|
||||
getD('M', sdate[0]!, sdate[1]!)
|
||||
}
|
||||
if (maxlen > 5) {
|
||||
let sdate = getDnumber('m', 's')
|
||||
getD('s', sdate[0]!, sdate[1]!)
|
||||
}
|
||||
|
||||
|
||||
return [years, months, days, hours, minutes, seconds].slice(0, this.getNowTypeLenIndex()) as PICKER_ITEM_INFO[][];
|
||||
},
|
||||
getRangNumber(start : number, end : number) : string[] {
|
||||
let iar = [] as string[];
|
||||
for (let i = start; i <= end; i++) {
|
||||
iar.push(i.toString());
|
||||
}
|
||||
return iar;
|
||||
},
|
||||
stringArValuCoverToString() : string {
|
||||
if (this.nowValue.length != 6) return "";
|
||||
|
||||
let newsday = new xDate(this.nowValue[0][0] + "-" + (parseInt(this.nowValue[1][0]) + 1).toString() + "-1")
|
||||
let days = parseInt(this.nowValue[2][0])
|
||||
days = days >= newsday.getMonthCountDay() ? newsday.getMonthCountDay() : days
|
||||
this.nowValue.splice(2, 1, [days.toString()])
|
||||
|
||||
return this.fillNumber(this.nowValue[0][0]) + "-" + this.fillNumber((parseInt(this.nowValue[1][0]) + 1).toString())
|
||||
+ "-" + this.fillNumber(this.nowValue[2][0])
|
||||
+ " " + this.fillNumber(this.nowValue[3][0]) + ":"
|
||||
+ this.fillNumber(this.nowValue[4][0]) + ":"
|
||||
+ this.fillNumber(this.nowValue[5][0])
|
||||
},
|
||||
fillNumber(n : string) : string {
|
||||
if (parseInt(n) > 9) return n;
|
||||
return "0" + n
|
||||
},
|
||||
formatTimeDate() : string {
|
||||
if (this.nowValue.length != 6) return "";
|
||||
let sp = this.format;
|
||||
sp = sp.replace(/YYYY/g, this.fillNumber(this.nowValue[0][0]))
|
||||
sp = sp.replace(/MM/g, this.fillNumber((parseInt(this.nowValue[1][0]) + 1).toString()))
|
||||
sp = sp.replace(/DD/g, this.fillNumber(this.nowValue[2][0]))
|
||||
sp = sp.replace(/hh/g, this.fillNumber(this.nowValue[3][0]))
|
||||
sp = sp.replace(/mm/g, this.fillNumber(this.nowValue[4][0]))
|
||||
sp = sp.replace(/ss/g, this.fillNumber(this.nowValue[5][0]))
|
||||
return sp;
|
||||
},
|
||||
|
||||
|
||||
mchange(ids : string[], index : number) {
|
||||
|
||||
this.nowValue.splice(index, 1, ids)
|
||||
this.nowValueStr = this.stringArValuCoverToString()
|
||||
/**
|
||||
* 滑动变换时触发
|
||||
* @param {string} date 当前选中时间
|
||||
*/
|
||||
this.$emit('change', this.nowValueStr)
|
||||
|
||||
this.dateList = this.getTimeTreeByStartAndEnd(this._start_date, this._end_date)
|
||||
|
||||
this.$forceUpdate()
|
||||
this.onConfirm()
|
||||
},
|
||||
|
||||
onTouchstart() {
|
||||
setPagePullRefresh(false)
|
||||
},
|
||||
onTouchend() {
|
||||
setPagePullRefresh(this.nowPull)
|
||||
},
|
||||
onConfirm() {
|
||||
const syncValue:string = this.formatSyncValue?this.formatTimeDate():(toRaw(this.nowValueStr) as string)
|
||||
/**
|
||||
* 点击确认时同步。等同v-model
|
||||
*/
|
||||
this.$emit('update:modelValue', syncValue);
|
||||
|
||||
/**
|
||||
* 经格式化后的值。等同v-model:model-str
|
||||
*/
|
||||
this.$emit('update:modelStr', this.formatTimeDate());
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<view class="xPickerDateWrap" @touchstart="onTouchstart" @touchend="onTouchend" @touchcancel="onTouchend">
|
||||
<x-picker-view :cellUnits="[_cellUnits[index]]" @change="mchange($event as string[],index)"
|
||||
:model-value="nowValue[index]" v-for="(item,index) in dateList" :key="index" style="flex: 1;"
|
||||
:list="item"></x-picker-view>
|
||||
</view>
|
||||
</template>
|
||||
<style scoped>
|
||||
.xPickerDateWrap {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user