You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
380 lines
9.4 KiB
380 lines
9.4 KiB
<template>
|
|
<view class="jnpf-dateTime">
|
|
<u-input input-align='right' type="select" :select-open="selectShow" v-model="innerValue"
|
|
:placeholder="placeholder" @click="openSelect" :disabled="disabled">
|
|
</u-input>
|
|
<u-popup v-model="selectShow" mode="bottom" @click="colse()">
|
|
<view class="t-pop" @tap.stop>
|
|
<view class="pop-main">
|
|
<view class="top">
|
|
<view class="top-l">
|
|
<view @click="changeSwp('1')" :style="{color:sindex==1?'#1E79FF':'#333333'}">
|
|
<text>{{checkyear}}</text>
|
|
</view>
|
|
<view @click="changeSwp('2')" :style="{color:sindex==2?'#1E79FF':'#333333'}"
|
|
v-if="allDay==0">
|
|
<text>{{checkhour}}:{{checkminute}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="top-r" @click="onOK()">
|
|
<text>确定</text>
|
|
</view>
|
|
</view>
|
|
<swiper class="swiper" circular :current-item-id="sindex">
|
|
<swiper-item :item-id="'1'">
|
|
<view class="mid">
|
|
<scroll-view scroll-y="true" style="height: 960rpx" @scrolltolower="tolower">
|
|
<uni-calendar ref="calendar" :insert="insert" :lunar='lunar'
|
|
@change='calendarChange' :date='today' />
|
|
</scroll-view>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item :item-id="'2'" v-if="allDay==0">
|
|
<picker-view :indicator-style="indicatorStyle" :value="swiperTime" @change="bindChange"
|
|
class="picker-view">
|
|
<picker-view-column>
|
|
<view class="item" v-for="(v,i) in 24" :key="i">{{i<10?'0'+i:i}}时</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view class="item" v-for="(v,i) in 12" :key="i">{{i<2?'0'+i*5:i*5}}分
|
|
</view>
|
|
</picker-view-column>
|
|
</picker-view>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "t-datetime",
|
|
model: {
|
|
prop: 'value',
|
|
event: 'input'
|
|
},
|
|
props: {
|
|
type: {
|
|
type: Number,
|
|
default: 0 //默认时间后推0分钟
|
|
},
|
|
allDay: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
date: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '请选择'
|
|
},
|
|
delayMin: {
|
|
type: Number,
|
|
default: 0 //默认时间后推0分钟
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
canToday: { //是否可选择当天之前的时间
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
textList: ['日', '一', '二', '三', '四', '五', '六'],
|
|
mList: [],
|
|
checkyear: 0,
|
|
checkmonth: 0,
|
|
checkdate: 0,
|
|
checkhour: 0,
|
|
checkminute: 0,
|
|
indicatorStyle: `height: 50px;`,
|
|
sindex: '1',
|
|
nowYear: 0,
|
|
nowMonth: 0,
|
|
nowDate: 0,
|
|
lunar: false,
|
|
insert: true,
|
|
innerValue: '',
|
|
selectShow: false,
|
|
swiperTime: [],
|
|
year: 0,
|
|
hours: '',
|
|
minutes: '',
|
|
today: ''
|
|
};
|
|
},
|
|
watch: {
|
|
allDay(val) {
|
|
let allTime = this.date.year + '-' + this.date.month + '-' + this.date.date
|
|
this.today = allTime
|
|
let srt = this.time(allTime)
|
|
this.innerValue = ''
|
|
if (srt) {
|
|
this.innerValue = srt + this.date.month + '月' + this.date.date + '日'
|
|
} else {
|
|
if (this.date.year == this.year) {
|
|
this.innerValue = this.date.month + '月' + this.date.date + '日'
|
|
} else {
|
|
this.innerValue = this.date.year + '年' + this.date.month + '月' + this.date.date + '日'
|
|
}
|
|
}
|
|
if (this.allDay == 0) {
|
|
this.innerValue = this.innerValue + ' ' + this.hours + ':' +
|
|
this.minutes
|
|
}
|
|
},
|
|
date(val) {
|
|
this.init()
|
|
},
|
|
},
|
|
created() {
|
|
this.timestampToTime(+new Date())
|
|
this.init()
|
|
},
|
|
methods: {
|
|
tolower() {
|
|
this.init()
|
|
},
|
|
openSelect() {
|
|
if (this.disabled) return
|
|
this.selectShow = true
|
|
this.init()
|
|
},
|
|
calendarChange(e) {
|
|
this.date.year = e.year
|
|
this.date.month = e.month
|
|
this.date.date = e.date
|
|
this.date.date = this.date.date < 10 ? '0' + Number(this.date.date) : this.date.date
|
|
this.date.month = this.date.month < 10 ? '0' + Number(this.date.month) : this.date.month
|
|
this.checkyear = this.year == this.date.year ? this.date.month + '月' + this.date.date + '日' : this.date
|
|
.year +
|
|
'年' + this.date.month + '月' + this.date.date + '日'
|
|
this.sindex = '2'
|
|
},
|
|
init() {
|
|
this.innerValue = ''
|
|
this.today = this.date.year + '-' + this.date.month + '-' + this.date.date
|
|
this.date.minutes = this.date.minutes < 10 ? '0' + Number(this.date.minutes) : this.date.minutes
|
|
this.date.hours = this.date.hours < 10 ? '0' + Number(this.date.hours) : this.date.hours
|
|
this.date.date = this.date.date < 10 ? '0' + Number(this.date.date) : this.date.date
|
|
this.date.month = this.date.month < 10 ? '0' + Number(this.date.month) : this.date.month
|
|
this.checkyear = this.year == this.date.year ? this.date.month + '月' + this.date.date + '日' : this.date
|
|
.year + '年' + this.date.month + '月' + this.date.date + '日'
|
|
this.checkhour = this.date.hours
|
|
this.checkminute = this.date.minutes < 10 ? '0' + Number(this.date.minutes) : this.date.minutes
|
|
let checkminute = this.date.minutes / 5
|
|
this.swiperTime = [Number(this.checkhour), checkminute]
|
|
this.hours = this.date.hours
|
|
this.minutes = this.date.minutes
|
|
let allTime = this.date.year + '-' + this.date.month + '-' + this.date.date
|
|
let srt = this.time(allTime)
|
|
if (srt) {
|
|
this.innerValue = srt + this.date.month + '月' + this.date.date + '日'
|
|
} else {
|
|
if (this.date.year == this.year) {
|
|
this.innerValue = this.date.month + '月' + this.date.date + '日'
|
|
} else {
|
|
this.innerValue = this.date.year + '年' + this.date.month + '月' + this.date.date + '日'
|
|
}
|
|
}
|
|
if (this.allDay == 0) {
|
|
this.innerValue = this.innerValue + ' ' + this.hours + ':' +
|
|
this.checkminute
|
|
}
|
|
},
|
|
colse() {
|
|
this.selectShow = false
|
|
},
|
|
bindChange(e) {
|
|
const val = e.detail.value
|
|
this.swiperTime = [val[0], val[1]]
|
|
this.checkhour = Number(val[0]) < 10 ? '0' + val[0] : val[0]
|
|
this.checkminute = val[1] == '天' ? '00' : val[1] < 2 ? '0' + val[1] * 5 : val[1] * 5
|
|
},
|
|
changeSwp(i) {
|
|
this.sindex = i
|
|
},
|
|
onOK() {
|
|
if (this.allDay == 1) {
|
|
this.date.hours = '00'
|
|
this.date.minutes = '00'
|
|
} else {
|
|
this.date.hours = this.checkhour
|
|
this.date.minutes = this.checkminute
|
|
}
|
|
this.selectShow = false
|
|
let allTime = this.date.year + '-' + this.date.month + '-' + this.date.date
|
|
let srt = this.time(allTime)
|
|
if (srt) {
|
|
this.innerValue = srt + this.date.month + '月' + this.date.date + '日'
|
|
if (this.allDay == 0) {
|
|
this.innerValue = this.innerValue + ' ' + this.date.hours +
|
|
':' + this.date.minutes
|
|
}
|
|
} else {
|
|
if (this.date.year == this.year) {
|
|
this.innerValue = this.date.month + '月' + this.date.date + '日'
|
|
} else {
|
|
this.innerValue = this.date.year + '年' + this.date.month + '月' + this.date.date + '日'
|
|
}
|
|
if (this.allDay == 0) {
|
|
this.innerValue = this.innerValue + ' ' + this.date.hours +
|
|
':' + this.date.minutes
|
|
}
|
|
|
|
}
|
|
this.selectShow = false
|
|
this.$emit('confirm', this.date, this.type)
|
|
},
|
|
timestampToTime(timestamp) {
|
|
var date = new Date(timestamp);
|
|
this.year = date.getFullYear();
|
|
},
|
|
time(date) {
|
|
if (this.date.year != this.year) return false
|
|
let time_str = "";
|
|
if (new Date(date).getDate() === new Date().getDate()) {
|
|
time_str = "今天 · ";
|
|
} else if (new Date(date).getDate() === (new Date().getDate() - 1)) {
|
|
time_str = "昨天 · ";
|
|
} else if (new Date(date).getDate() === (new Date().getDate() + 1)) {
|
|
time_str = "明天 · ";
|
|
} else if (new Date(date).getDate() < new Date().getDate()) {
|
|
time_str = "";
|
|
}
|
|
return time_str;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.jnpf-dateTime {
|
|
width: 100%;
|
|
|
|
/deep/.u-drawer {
|
|
z-index: 999 !important;
|
|
}
|
|
}
|
|
|
|
/deep/.uni-calendar-item__weeks-box-item {
|
|
line-height: 36rpx;
|
|
}
|
|
|
|
|
|
|
|
.t-pop {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.pop-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border-radius: 24px;
|
|
height: 900rpx;
|
|
width: 100%;
|
|
|
|
}
|
|
}
|
|
|
|
.swiper {
|
|
height: 840rpx;
|
|
width: 100vw;
|
|
}
|
|
|
|
.top {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin: 20rpx 0;
|
|
|
|
.top-l {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-left: 30rpx;
|
|
}
|
|
|
|
.top-r {
|
|
margin-right: 30rpx;
|
|
color: #1E79FF;
|
|
}
|
|
|
|
}
|
|
|
|
.calendar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
width: 100vw;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.ca-top {
|
|
width: 14.2vw;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 66rpx;
|
|
z-index: 10;
|
|
}
|
|
|
|
.cell {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
border-radius: 30rpx;
|
|
}
|
|
|
|
.cell-active {
|
|
background-color: #1E79FF;
|
|
color: #fff;
|
|
}
|
|
|
|
.cabg {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100vw;
|
|
font-size: 180rpx;
|
|
color: beige;
|
|
position: absolute;
|
|
z-index: 9;
|
|
}
|
|
|
|
.picker-view {
|
|
width: 750rpx;
|
|
height: 600rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.item {
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
</style> |