uni-app日期范围选择，颗粒度为年-月-日
Posted st646889325
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uni-app日期范围选择，颗粒度为年-月-日相关的知识，希望对你有一定的参考价值。
效果图：
1.在components中引入term-picker.vue
<template>
<view :class="'pickerMask':visable" @click="maskClick" @touchmove.stop.prevent="returnHandle">
<view class="picker-box" :class="'picker-show':visable">
<view class="operate-box" @touchmove.stop.prevent="returnHandle" @tap.stop="returnHandle">
<view class="time-box">
<view @click="touchSelect(0)" class="time-item" :style="color:touchIndex?'#000000':themeColor">
<text>startText</text>
<text>resultDate[0]</text>
</view>
<text>至</text>
<view @click="touchSelect(1)" class="time-item" :style="color:touchIndex?themeColor:'#000000'">
<text>endText</text>
<text>resultDate[1]</text>
</view>
</view>
<view :style="color:themeColor" @click="pickerConfirm">确定</view>
</view>
<picker-view :value="pickerValue" @change="pickerChange" class="picker-view" :indicator-style="indicatorStyle" @tap.stop="returnHandle">
<picker-view-column>
<view class="picker-item" v-for="(item, index) in years" :key="index">item年</view>
</picker-view-column>
<picker-view-column>
<view class="picker-item" v-for="(item, index) in months" :key="index"> item 月</view>
</picker-view-column>
<picker-view-column v-if="days.length > 0">
<view class="picker-item" v-for="(item, index) in days" :key="index"> item 日</view>
</picker-view-column>
</picker-view>
</view>
</view>
</template>
<script>
export default
name: 'termPicker',
props:
visable:
type: Boolean,
default: false
,
defaultDate:
type: Array,
default: () => []
,
minYear:
type: Number,
default: 1990,
,
themeColor:
type: String,
default: '#10BE9D'
,
startText:
type: String,
default: '开始时间'
,
endText:
type: String,
default: '结束时间'
,
data()
const date = new Date();
const years = [];
const year = date.getFullYear();
const months = [];
const month = date.getMonth() + 1;
const day = date.getDate();
for (let i = this.minYear; i <= date.getFullYear(); i++)
years.push(i);
for (let i = 1; i <= 12; i++)
months.push(i);
return
indicatorStyle: 'height: 100rpx;',
touchIndex: 0,
year,
month,
day,
years,
months,
days: [],
pickerValue: [],
resultDate: []
;
,
mounted()
this.setDate()
,
methods:
returnHandle(),
setDate()
if (this.defaultDate.length > 0)
let date = this.defaultDate[0]
this.resultDate = this.defaultDate
this.setPicker(date)
else
let month = this.month < 10 ? '0' + this.month : this.month
let day = this.day < 10 ? '0' + this.day : this.day
let nowTime = this.year + '-' + month + '-' + day
this.resultDate = [nowTime, nowTime]
this.setPicker(nowTime)
,
setPicker(date)
const splitVal = date.split('-')
let year = this.years.indexOf(Number(splitVal[0]))
let month = Number(splitVal[1]) - 1
let day = Number(splitVal[2]) - 1
this.pickerChange(
detail:
value: [year, month, day]
)
,
touchSelect(val)
let date = this.resultDate[val]
this.touchIndex = val
this.setPicker(date)
,
getDateTime(date)
let year = this.years[date[0]]
let month = this.months[date[1]]
let day = this.days[date[2]]
if (month < 10)
month = '0' + month
if (day < 10)
day = '0' + day
this.resultDate[this.touchIndex] = year + '-' + month + '-' + day
,
pickerChange(e)
const currents = e.detail.value;
if (currents[1] + 1 === 2)
this.days = [];
if (
((currents[0] + this.minYear) % 4 === 0 &&
(currents[0] + this.minYear) % 100 !== 0) ||
(currents[0] + this.minYear) % 400 === 0
)
for (let i = 1; i < 30; i++)
this.days.push(i);
else
for (let i = 1; i < 29; i++)
this.days.push(i);
else if ([4, 6, 9, 11].some((item) => currents[1] + 1 === item))
this.days = [];
for (let i = 1; i < 31; i++)
this.days.push(i);
else if (
[1, 3, 5, 7, 8, 10, 12].some((item) => currents[1] + 1 === item)
)
this.days = [];
for (let i = 1; i < 32; i++)
this.days.push(i);
this.pickerValue = currents
this.getDateTime(currents)
,
maskClick()
this.$emit('update:visable', false)
,
pickerConfirm()
const resultDate = this
let startTime = new Date(resultDate[0]).getTime()
let endTime = new Date(resultDate[1]).getTime()
let nowTime = new Date().getTime()
if (startTime <= endTime && endTime <= nowTime)
this.$emit('confirm', resultDate)
this.maskClick()
else
uni.showToast(
title: '时间范围不正确！',
icon: 'none'
)
</script>
<style lang="scss" scoped>
.pickerMask
position: fixed;
z-index: 998;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
.picker-box
position: fixed;
bottom: 0;
left: 0;
width: 100%;
transition: all 0.3s ease;
transform: translateY(100%);
z-index: 998;
.operate-box
display: flex;
align-items: center;
justify-content: space-between;
padding: 18rpx 30rpx;
background-color: #FFFFFF;
text-align: center;
font-size: 30rpx;
border-bottom: 2rpx solid #e5e5e5;
.time-box
width: 60%;
display: flex;
align-items: center;
justify-content: space-between;
.time-item
display: flex;
flex-direction: column;
.picker-show
transform: translateY(0);
.picker-view
width: 750rpx;
height: 600rpx;
background-color: #FFFFFF;
.picker-item
height: 100rpx;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
</style>2.使用
<template>
<view :class="'pickerMask':visable" @click="maskClick" @touchmove.stop.prevent="returnHandle">
<view class="picker-box" :class="'picker-show':visable">
<view class="operate-box" @touchmove.stop.prevent="returnHandle" @tap.stop="returnHandle">
<view class="time-box">
<view @click="touchSelect(0)" class="time-item" :style="color:touchIndex?'#000000':themeColor">
<text>startText</text>
<text>resultDate[0]</text>
</view>
<text>至</text>
<view @click="touchSelect(1)" class="time-item" :style="color:touchIndex?themeColor:'#000000'">
<text>endText</text>
<text>resultDate[1]</text>
</view>
</view>
<view :style="color:themeColor" @click="pickerConfirm">确定</view>
</view>
<picker-view :value="pickerValue" @change="pickerChange" class="picker-view" :indicator-style="indicatorStyle" @tap.stop="returnHandle">
<picker-view-column>
<view class="picker-item" v-for="(item, index) in years" :key="index">item年</view>
</picker-view-column>
<picker-view-column>
<view class="picker-item" v-for="(item, index) in months" :key="index"> item 月</view>
</picker-view-column>
<picker-view-column v-if="days.length > 0">
<view class="picker-item" v-for="(item, index) in days" :key="index"> item 日</view>
</picker-view-column>
</picker-view>
</view>
</view>
</template>
<script>
export default
name: 'termPicker',
props:
visable:
type: Boolean,
default: false
,
defaultDate:
type: Array,
default: () => []
,
minYear:
type: Number,
default: 1990,
,
themeColor:
type: String,
default: '#10BE9D'
,
startText:
type: String,
default: '开始时间'
,
endText:
type: String,
default: '结束时间'
,
data()
const date = new Date();
const years = [];
const year = date.getFullYear();
const months = [];
const month = date.getMonth() + 1;
const day = date.getDate();
for (let i = this.minYear; i <= date.getFullYear(); i++)
years.push(i);
for (let i = 1; i <= 12; i++)
months.push(i);
return
indicatorStyle: 'height: 100rpx;',
touchIndex: 0,
year,
month,
day,
years,
months,
days: [],
pickerValue: [],
resultDate: []
;
,
mounted()
this.setDate()
,
methods:
returnHandle(),
setDate()
if (this.defaultDate.length > 0)
let date = this.defaultDate[0]
this.resultDate = this.defaultDate
this.setPicker(date)
else
let month = this.month < 10 ? '0' + this.month : this.month
let day = this.day < 10 ? '0' + this.day : this.day
let nowTime = this.year + '-' + month + '-' + day
this.resultDate = [nowTime, nowTime]
this.setPicker(nowTime)
,
setPicker(date)
const splitVal = date.split('-')
let year = this.years.indexOf(Number(splitVal[0]))
let month = Number(splitVal[1]) - 1
let day = Number(splitVal[2]) - 1
this.pickerChange(
detail:
value: [year, month, day]
)
,
touchSelect(val)
let date = this.resultDate[val]
this.touchIndex = val
this.setPicker(date)
,
getDateTime(date)
let year = this.years[date[0]]
let month = this.months[date[1]]
let day = this.days[date[2]]
if (month < 10)
month = '0' + month
if (day < 10)
day = '0' + day
this.resultDate[this.touchIndex] = year + '-' + month + '-' + day
,
pickerChange(e)
const currents = e.detail.value;
if (currents[1] + 1 === 2)
this.days = [];
if (
((currents[0] + this.minYear) % 4 === 0 &&
(currents[0] + this.minYear) % 100 !== 0) ||
(currents[0] + this.minYear) % 400 === 0
)
for (let i = 1; i < 30; i++)
this.days.push(i);
else
for (let i = 1; i < 29; i++)
this.days.push(i);
else if ([4, 6, 9, 11].some((item) => currents[1] + 1 === item))
this.days = [];
for (let i = 1; i < 31; i++)
this.days.push(i);
else if (
[1, 3, 5, 7, 8, 10, 12].some((item) => currents[1] + 1 === item)
)
this.days = [];
for (let i = 1; i < 32; i++)
this.days.push(i);
this.pickerValue = currents
this.getDateTime(currents)
,
maskClick()
this.$emit('update:visable', false)
,
pickerConfirm()
const resultDate = this
let startTime = new Date(resultDate[0]).getTime()
let endTime = new Date(resultDate[1]).getTime()
let nowTime = new Date().getTime()
if (startTime <= endTime && endTime <= nowTime)
this.$emit('confirm', resultDate)
this.maskClick()
else
uni.showToast(
title: '时间范围不正确！',
icon: 'none'
)
</script>
<style lang="scss" scoped>
.pickerMask
position: fixed;
z-index: 998;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
.picker-box
position: fixed;
bottom: 0;
left: 0;
width: 100%;
transition: all 0.3s ease;
transform: translateY(100%);
z-index: 998;
.operate-box
display: flex;
align-items: center;
justify-content: space-between;
padding: 18rpx 30rpx;
background-color: #FFFFFF;
text-align: center;
font-size: 30rpx;
border-bottom: 2rpx solid #e5e5e5;
.time-box
width: 60%;
display: flex;
align-items: center;
justify-content: space-between;
.time-item
display: flex;
flex-direction: column;
.picker-show
transform: translateY(0);
.picker-view
width: 750rpx;
height: 600rpx;
background-color: #FFFFFF;
.picker-item
height: 100rpx;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
</style>以上是关于uni-app日期范围选择，颗粒度为年-月-日的主要内容，如果未能解决你的问题，请参考以下文章
uni-app日期范围选择，颗粒度为`年-月`，支持`至今`选项
uni-app日期范围选择，颗粒度为`年-月`，支持`至今`选项