514 lines
15 KiB
Vue
514 lines
15 KiB
Vue
<template>
|
|
<view class="yu-datetime-picker">
|
|
<view class="yu-datetime-mask" :class="{'show':showPicker}" @tap="maskClick" @touchmove.stop.prevent catchtouchmove="true"></view>
|
|
<view class="yu-datetime-content" :class="{'show':showPicker}">
|
|
<view class="yu-datetime-hd" @touchmove.stop.prevent catchtouchmove="true">
|
|
<view class="yu-datetime-btn" @tap="pickerCancel">取消</view>
|
|
<view class="yu-datetime-btn" :style="{color: color}" @tap="pickerConfirm">确定</view>
|
|
</view>
|
|
<view class="yu-datetime-view">
|
|
<picker-view class="picker-view" v-if="isAll" :indicator-style="itemHeight" :value="values" @change="bindChange">
|
|
<picker-view-column>
|
|
<view class="yu-datetime-item" v-for="(item,index) in dateObj.years" :key="index">{{item}}年</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view class="yu-datetime-item" v-for="(item,index) in dateObj.months" :key="index">{{item}}月</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view class="yu-datetime-item" v-for="(item,index) in dateObj.days" :key="index">{{item}}日</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view class="yu-datetime-item" v-for="(item,index) in dateObj.hours" :key="index">{{item}}时</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view class="yu-datetime-item" v-for="(item,index) in dateObj.minutes" :key="index">{{item}}分</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view class="yu-datetime-item" v-for="(item,index) in dateObj.seconds" :key="index">{{item}}秒</view>
|
|
</picker-view-column>
|
|
</picker-view>
|
|
<picker-view v-else :indicator-style="itemHeight" :value="dateValues" @change="bindDateChange">
|
|
<picker-view-column class="yu-picker-column">
|
|
<view class="yu-datetime-item" v-for="(item,index) in dateObj.dates" :key="index">{{item}}</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view class="yu-datetime-item" v-for="(item,index) in dateObj.hours" :key="index">{{item}}时</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view class="yu-datetime-item" v-for="(item,index) in dateObj.minutes" :key="index">{{item}}分</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view class="yu-datetime-item" v-for="(item,index) in dateObj.seconds" :key="index">{{item}}秒</view>
|
|
</picker-view-column>
|
|
</picker-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "yuDatetimePicker",
|
|
props: {
|
|
isAll: { //全部日期有效可选
|
|
type: Boolean,
|
|
default () {
|
|
return true
|
|
}
|
|
},
|
|
current: { //默认显示当前日期时间
|
|
type: Boolean,
|
|
default () {
|
|
return true
|
|
}
|
|
},
|
|
color: { //颜色
|
|
type: String,
|
|
default () {
|
|
return '#3279e4'
|
|
}
|
|
},
|
|
startYear: { //开始年份
|
|
type: [String, Number],
|
|
default () {
|
|
return new Date().getFullYear()
|
|
}
|
|
},
|
|
endYear: { //结束年份
|
|
type: [String, Number],
|
|
default () {
|
|
return '2050'
|
|
}
|
|
},
|
|
value: { //设置默认日期时间，优先级高于current
|
|
type: String,
|
|
default () {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
let date = new Date()
|
|
let year = date.getFullYear()
|
|
let month = date.getMonth() + 1
|
|
let day = date.getDate()
|
|
let hour = date.getHours()
|
|
let minute = date.getMinutes()
|
|
let second = date.getSeconds()
|
|
let dates = []
|
|
let months = []
|
|
let years = []
|
|
let days = []
|
|
let hours = []
|
|
let minutes = []
|
|
let seconds = []
|
|
for (let i = month; i <= month + 2; i++) {//获取包括当前月份在内的3个月内的日期
|
|
let localMonth = i;
|
|
let localYear = year;
|
|
if (i == 13) {
|
|
localYear += 1;
|
|
}
|
|
if (i >= 13) {
|
|
localMonth -= 12;
|
|
}
|
|
let total = new Date(localYear, localMonth, 0).getDate();
|
|
if (i == month) {
|
|
for (let j = day; j <= total; j++) {
|
|
let m = localMonth;
|
|
let d = j;
|
|
if(localMonth < 10){ m = '0' + m;}
|
|
if(j < 10){ d = '0' + d;}
|
|
let str = year + '-' + m + '-' + d;
|
|
dates.push(str);
|
|
}
|
|
} else {
|
|
for (let j = 1; j <= total; j++) {
|
|
let m = localMonth;
|
|
let d = j;
|
|
if(localMonth < 10){ m = '0' + m;}
|
|
if(j < 10){ d = '0' + d;}
|
|
let str = localYear + '-' + m + '-' + d;
|
|
dates.push(str);
|
|
}
|
|
}
|
|
}
|
|
for (let i = parseInt(this.startYear); i <= this.endYear; i++) {
|
|
years.push(i)
|
|
}
|
|
for (let i = 1; i <= 12; i++) {
|
|
let str = i;
|
|
if(i < 10){ str = '0' + str;}
|
|
else{str = '' + str;}
|
|
months.push(str)
|
|
}
|
|
|
|
if(this.value){
|
|
let valueArr = this.value.split(' ');
|
|
let valueDateArr = valueArr[0].split('-');
|
|
let totalCurrent = new Date(valueDateArr[0], valueDateArr[1], 0).getDate();
|
|
for (let i = 1; i <= totalCurrent; i++) {
|
|
let str = i;
|
|
if(i < 10){ str = '0' + str;}
|
|
else{str = '' + str;}
|
|
days.push(str)
|
|
}
|
|
}else{
|
|
let totalCurrent = new Date(year, month, 0).getDate();
|
|
for (let i = 1; i <= totalCurrent; i++) {
|
|
let str = i;
|
|
if(i < 10){ str = '0' + str;}
|
|
else{str = '' + str;}
|
|
days.push(str)
|
|
}
|
|
}
|
|
for (let i = 0; i < 24; i++) {
|
|
let str = i;
|
|
if(i < 10){ str = '0' + str;}
|
|
else{str = '' + str;}
|
|
hours.push(str);
|
|
}
|
|
for (let i = 0; i < 60; i++) {
|
|
let str = i;
|
|
if(i < 10){ str = '0' + str;}
|
|
else{str = '' + str;}
|
|
minutes.push(str);
|
|
}
|
|
for (let i = 0; i < 60; i++) {
|
|
let str = i;
|
|
if(i < 10){ str = '0' + str;}
|
|
else{str = '' + str;}
|
|
seconds.push(str);
|
|
}
|
|
let dateObj = {
|
|
dates,
|
|
years,
|
|
months,
|
|
days,
|
|
hours,
|
|
minutes,
|
|
seconds
|
|
}
|
|
return {
|
|
year,
|
|
month,
|
|
day,
|
|
hour,
|
|
minute,
|
|
second,
|
|
dateObj,
|
|
itemHeight: `height: ${uni.upx2px(88)}px;`,
|
|
values: [0, 0, 0, 0, 0, 0],
|
|
selectArr: [],
|
|
selectRes: "",
|
|
showPicker: false,
|
|
dateValues: [0, 0, 0, 0]
|
|
};
|
|
},
|
|
mounted() {
|
|
this.initDate();
|
|
if(!this.value && this.current) {
|
|
this.showCurrent();
|
|
}
|
|
},
|
|
methods: {
|
|
initDate() {
|
|
let _this =this;
|
|
//解析默认显示的日期时间
|
|
if (_this.value) {
|
|
let values = [0, 0, 0, 0, 0, 0];
|
|
let dateValues = [0, 0, 0, 0];
|
|
let valueStr = _this.value;
|
|
let valueArr = valueStr.split(' ');
|
|
let valueDateArr = valueArr[0].split('-');
|
|
let valueTimeArr = valueArr[1].split(':');
|
|
if (_this.isAll) {
|
|
values[0] = (valueDateArr[0] - _this.startYear) > 0 ? valueDateArr[0] - _this.startYear : 0;
|
|
values[1] = parseInt(valueDateArr[1]) - 1;
|
|
values[2] = parseInt(valueDateArr[2]) - 1;
|
|
values[3] = parseInt(valueTimeArr[0]);
|
|
values[4] = parseInt(valueTimeArr[1]);
|
|
values[5] = parseInt(valueTimeArr[2]);
|
|
_this.$nextTick(() => {
|
|
_this.values = values;
|
|
})
|
|
if ((valueDateArr[0] - _this.startYear) >= 0) {
|
|
_this.selectArr = [valueDateArr[0], valueDateArr[1], valueDateArr[2], valueTimeArr[0], valueTimeArr[1],valueTimeArr[2]];
|
|
_this.selectRes = _this.value;
|
|
} else {
|
|
_this.selectArr = [_this.formatNum(_this.startYear), valueDateArr[1], valueDateArr[2], valueTimeArr[0],valueTimeArr[1], valueTimeArr[2]];
|
|
_this.selectRes = `${this.formatNum(_this.startYear)+'-'+valueDateArr[1]+'-'+valueDateArr[2]+' '+valueTimeArr[0]+':'+valueTimeArr[1]+':'+valueTimeArr[2]}`;
|
|
}
|
|
} else {
|
|
let str = valueDateArr.join('');
|
|
let localStr = _this.formatNum(_this.year) + _this.formatNum(_this.month) + _this.formatNum(_this.day) + '';
|
|
if (str < localStr) {
|
|
dateValues[0] = 0;
|
|
_this.selectArr = [_this.formatNum(_this.year), _this.formatNum(_this.month), _this.formatNum(_this.day), valueTimeArr[0],valueTimeArr[1], valueTimeArr[2]];
|
|
_this.selectRes =`${_this.formatNum(_this.year)+'-' + _this.formatNum(_this.month) + '-' + _this.formatNum(_this.day) + ' ' + valueTimeArr[0] +':'+valueTimeArr[1] +':'+valueTimeArr[2]}`;
|
|
} else {
|
|
|
|
let num = 0; //计算默认日期和当前日期相隔天数，计算下标
|
|
let start = _this.formatNum(_this.year) + '-' + _this.formatNum(_this.month) + '-' + _this.formatNum(_this.day);
|
|
let res = _this.getBetweenDateStr(start, valueArr[0]);
|
|
dateValues[0] = res.length - 1;
|
|
_this.selectArr = [valueDateArr[0], valueDateArr[1], valueDateArr[2], valueTimeArr[0], valueTimeArr[1],valueTimeArr[2]];
|
|
_this.selectRes = _this.value;
|
|
}
|
|
dateValues[1] = parseInt(valueTimeArr[0]);
|
|
dateValues[2] = parseInt(valueTimeArr[1]);
|
|
dateValues[3] = parseInt(valueTimeArr[2]);
|
|
_this.$nextTick(() => {
|
|
_this.dateValues = dateValues;
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
if (_this.isAll) {
|
|
_this.selectArr = [_this.formatNum(_this.startYear), '01', '01', '00', '00', '00'];
|
|
_this.selectRes = `${_this.formatNum(_this.startYear)+'-01-01 00:00:00'}`;
|
|
} else {
|
|
_this.selectArr = [_this.formatNum(_this.year), _this.formatNum(_this.month), '01', '00', '00', '00'];
|
|
_this.selectRes = `${_this.formatNum(_this.year)+'-' + _this.formatNum(_this.month) + '-01 00:00:00'}`;
|
|
}
|
|
},
|
|
showCurrent() { //显示当前的日期时间
|
|
let arr = [0, 0, 0, 0, 0, 0];
|
|
let dateArr = [0, 0, 0, 0];
|
|
this.selectArr = [this.formatNum(this.year), this.formatNum(this.month), this.formatNum(this.day), this.formatNum(this.hour), this.formatNum(this.minute), this.formatNum(this.second)];
|
|
this.selectRes = `${this.formatNum(this.year)+'-'+this.formatNum(this.month)+'-'+this.formatNum(this.day)+' '+this.formatNum(this.hour)+':'+this.formatNum(this.minute)+':'+this.formatNum(this.second)}`;
|
|
if (this.isAll) {
|
|
arr[0] = this.year - this.startYear;
|
|
arr[1] = this.month - 1;
|
|
arr[2] = this.day - 1;
|
|
arr[3] = this.hour;
|
|
arr[4] = this.minute;
|
|
arr[5] = this.second;
|
|
this.$nextTick(() => {
|
|
this.values = arr;
|
|
})
|
|
} else {
|
|
dateArr[1] = this.hour;
|
|
dateArr[2] = this.minute;
|
|
dateArr[3] = this.second;
|
|
this.$nextTick(() => {
|
|
this.dateValues = dateArr;
|
|
})
|
|
}
|
|
},
|
|
initDayArr: (year, month) => { //初始化月份天数
|
|
let totalDay = new Date(year, month, 0).getDate();
|
|
let dayArr = [];
|
|
for (let i = 1; i <= totalDay; i++) {
|
|
if (i < 10) {
|
|
i = '0' + i;
|
|
} else {
|
|
i = i + '';
|
|
}
|
|
dayArr.push(i);
|
|
};
|
|
return dayArr;
|
|
},
|
|
formatNum(num) { //日期时间的初始化
|
|
return num < 10 ? '0' + num : num + '';
|
|
},
|
|
maskClick() { //日期时间的遮罩
|
|
this.showPicker = false;
|
|
},
|
|
show() { //日期时间的显示
|
|
this.showPicker = true;
|
|
},
|
|
hide() { //日期时间的隐藏
|
|
this.showPicker = false;
|
|
},
|
|
pickerCancel() { //日期时间取消
|
|
this.$emit("cancel", {
|
|
selectArr: this.selectArr
|
|
});
|
|
this.showPicker = false;
|
|
},
|
|
pickerConfirm(e) { //日期时间确定
|
|
this.$emit("confirm", {
|
|
selectArr: this.selectArr,
|
|
selectRes: this.selectRes
|
|
});
|
|
this.showPicker = false;
|
|
},
|
|
bindChange(e) { //默认滚动日期时间方法
|
|
let valueArr = e.detail.value;
|
|
let year = "",
|
|
month = "",
|
|
day = "",
|
|
hour = "",
|
|
minute = "",
|
|
second = "";
|
|
let selectArr = this.selectArr;
|
|
let dayArr = [];
|
|
year = this.dateObj.years[valueArr[0]];
|
|
month = this.dateObj.months[valueArr[1]];
|
|
day = this.dateObj.days[valueArr[2]];
|
|
hour = this.dateObj.hours[valueArr[3]];
|
|
minute = this.dateObj.minutes[valueArr[4]];
|
|
second = this.dateObj.seconds[valueArr[5]];
|
|
if (year != selectArr[0]) {
|
|
dayArr = this.initDayArr(year, month);
|
|
this.dateObj.days = dayArr;
|
|
};
|
|
if (month != selectArr[1]) {
|
|
dayArr = this.initDayArr(year, month);
|
|
this.dateObj.days = dayArr;
|
|
};
|
|
this.selectArr = [year, month, day, hour, minute, second];
|
|
this.selectRes = `${year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second}`;
|
|
this.$nextTick(() => {
|
|
this.values = valueArr;
|
|
})
|
|
},
|
|
bindDateChange(e) { //有效日期的滚动日期时间方法
|
|
let valueArr = e.detail.value;
|
|
let dateStr = "",
|
|
dateArr = [],
|
|
hour = "",
|
|
minute = "",
|
|
second = "";
|
|
let selectArr = this.selectArr;
|
|
let dayArr = [];
|
|
dateStr = this.dateObj.dates[valueArr[0]];
|
|
dateArr = dateStr.split('-');
|
|
hour = this.dateObj.hours[valueArr[1]];
|
|
minute = this.dateObj.minutes[valueArr[2]];
|
|
second = this.dateObj.seconds[valueArr[3]];
|
|
this.selectArr = [dateArr[0], dateArr[1], dateArr[2], hour, minute, second];
|
|
this.selectRes = `${dateArr[0]+'-'+dateArr[1]+'-'+dateArr[2]+' '+hour+':'+minute+':'+second}`;
|
|
this.$nextTick(() => {
|
|
this.dateValues = valueArr;
|
|
})
|
|
},
|
|
//遍历两个日期间的所有日期
|
|
getBetweenDateStr(start, end) {
|
|
let result = [];
|
|
let beginDay = start.split("-");
|
|
let endDay = end.split("-");
|
|
let diffDay = new Date();
|
|
let dateList = new Array;
|
|
let i = 0;
|
|
diffDay.setDate(beginDay[2]);
|
|
diffDay.setMonth(beginDay[1] - 1);
|
|
diffDay.setFullYear(beginDay[0]);
|
|
result.push(start);
|
|
while (i == 0) {
|
|
let countDay = diffDay.getTime() + 24 * 60 * 60 * 1000;
|
|
diffDay.setTime(countDay);
|
|
dateList[2] = diffDay.getDate();
|
|
dateList[1] = diffDay.getMonth() + 1;
|
|
dateList[0] = diffDay.getFullYear();
|
|
if (String(dateList[1]).length == 1) {
|
|
dateList[1] = "0" + dateList[1]
|
|
};
|
|
if (String(dateList[2]).length == 1) {
|
|
dateList[2] = "0" + dateList[2]
|
|
};
|
|
result.push(dateList[0] + "-" + dateList[1] + "-" + dateList[2]);
|
|
if (dateList[0] == endDay[0] && dateList[1] == endDay[1] && dateList[2] == endDay[2]) {
|
|
i = 1;
|
|
}
|
|
};
|
|
return result;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.yu-datetime-picker {
|
|
position: relative;
|
|
z-index: 888;
|
|
}
|
|
|
|
.yu-datetime-mask {
|
|
position: fixed;
|
|
z-index: 1000;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.yu-datetime-mask.show {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
.yu-datetime-content {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
transition: all 0.3s ease;
|
|
transform: translateY(100%);
|
|
z-index: 3000;
|
|
}
|
|
|
|
.yu-datetime-content.show {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.yu-datetime-hd {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 30upx;
|
|
height: 44px;
|
|
background-color: #fff;
|
|
position: relative;
|
|
text-align: center;
|
|
font-size: 15px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.yu-datetime-btn {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.yu-datetime-hd:after {
|
|
content: ' ';
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
color: #e5e5e5;
|
|
transform-origin: 0 100%;
|
|
transform: scaleY(0.5);
|
|
}
|
|
|
|
.yu-datetime-view {
|
|
width: 100%;
|
|
height: 200px;
|
|
overflow: hidden;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
z-index: 666;
|
|
}
|
|
|
|
.yu-datetime-view .picker-view {
|
|
height: 100%;
|
|
}
|
|
|
|
.yu-picker-column {
|
|
-webkit-flex: 2;
|
|
-webkit-box-flex: 2;
|
|
flex: 2;
|
|
}
|
|
|
|
.yu-datetime-item {
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 88upx;
|
|
line-height: 88upx;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 30upx;
|
|
}
|
|
</style>
|