<view class="search-bar-box" style="background: #fff;" @click="openPicker">
<view style="width:100%;height:100%;padding:0 24rpx;">
<sofar-picker :visable.sync="pickerVisable" :defaultDate="defaultDate" :minYear="1990" separator="."
themeColor="#10BE9D" startText="开始时间" endText="结束时间" @confirm="confirm"
@defaultDate1="defaultDate1">
</sofar-picker>
</view>
</view>
// 打开日期选择框
openPicker() {
this.pickerVisable = true
},
<template>
<view :class="{'pickerMask':visable}" @click="maskClick" @touchmove.stop.prevent="returnHandle">
<input type="text" v-model="defaultDate1" disabled>
<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 yearList" :key="index">
{{item+'年'}}</view>
</picker-view-column>
<picker-view-column>
<view class="picker-item" v-for="(item,index) in monthList" :key="index">
<text>{{item}}月</text>
</view>
</picker-view-column>
<picker-view-column>
<view class="picker-item" v-for="(item,index) in dayList" :key="index">
<text>{{item}}日</text>
</view>
</picker-view-column>
</picker-view>
</view>
</view>
</template>
<script>
export default {
name: 'sofarPicker',
props: {
defaultDate: {
type: Array,
default: () => []
},
visable: {
type: Boolean,
default: false
},
minYear: {
type: Number,
default: 1990,
},
separator: {
type: String,
default: '.'
},
themeColor: {
type: String,
default: '#10BE9D'
},
startText: {
type: String,
default: '开始时间'
},
endText: {
type: String,
default: '结束时间'
}
},
data() {
const date = new Date();
const yearList = [];
const year = date.getFullYear();
const monthList = [];
const month = date.getMonth() + 1;
const day = date.getDate()
for (let i = this.minYear; i <= date.getFullYear(); i++) {
yearList.unshift(i);
}
for (let i = 1; i <= 12; i++) {
monthList.push(i);
}
return {
indicatorStyle: 'height: 100rpx;',
touchIndex: 0,
yearList: yearList,
monthList: monthList,
dayList:[],
year: year,
month: month,
day:day,
pickerValue: [0, month - 2,0],
resultDate: [],
defaultDate1:[],
}
},
mounted() {
this.setDate()
},
created() {
// this.defaultDate1 = this.defaultDate
console.log(this.pickerValue,97)
},
methods: {
returnHandle() {},
maskClick() {
this.$emit('update:visable', false)
},
setDate() {
console.log(this.defaultDate,105)
if (this.defaultDate.length > 0) {
let date = this.defaultDate[0]
this.resultDate = this.defaultDate
console.log(this.resultDate,116)
this.setPicker(date)
} else {
let startTime = this.year + this.separator + (this.month-1) + this.separator + 1
let endTime = this.year + this.separator + this.month + this.separator + 1
this.resultDate = [startTime, endTime]
console.log(this.resultDate,122)
this.defaultDate1 = startTime + ' - ' + endTime
console.log(this.defaultDate1,115)
this.$emit('defaultDate1',[startTime,endTime])
this.setDayData(this.pickerValue[1] + 1)
}
},
setDayData(day){
let num = 0;
let months = [1, 3, 5, 7, 8, 10, 12]
let month = day
if(months.indexOf(month) > -1){
num = 31;
}else{
num = 30
}
if (month === 2) {
if (this.yearList[0] % 400 === 0 || this.yearList[0] % 4 === 0 && this.yearList[0] % 100 !== 0) {
num = 29;
} else {
num = 28;
}
}
let arr = []
for (let i = 1; i < num + 1; i++) {
arr.push(i);
}
this.dayList = arr
// console.log(arr,171)
},
setPicker(date) {
console.log(date,119)
let dateArray = date.split(this.separator)
let yearIndex = this.yearList.indexOf(Number(dateArray[0]))
let monthIndex = this.monthList.indexOf(Number(dateArray[1]))
let dayIndex = this.dayList.indexOf(Number(dateArray[2]))
this.pickerValue = [yearIndex, monthIndex,dayIndex]
console.log(this.pickerValue,160)
},
getDate(date) {
console.log(date,161)
let result = ''
let year = this.yearList[date[0]]
let month = this.monthList[date[1]]
let day = this.dayList[date[2]]
result = year + this.separator + month + this.separator + day
this.resultDate[this.touchIndex] = result
console.log(result,133)
this.setDayData(this.pickerValue[1] + 1)
},
touchSelect(val) {
let date = this.resultDate[val]
if (this.touchIndex === val) {
return
} else {
this.touchIndex = val
}
if (date) {
this.setPicker(date)
}
},
pickerChange(e) {
this.pickerValue = e.detail.value
console.log(this.pickerValue,189)
this.getDate(e.detail.value)
},
pickerConfirm() {
const {
resultDate,
year,
month,
day
} = this
let nowTime = new Date(year + '.' + month + '.' + day).getTime()
let startTime = new Date(resultDate[0]).getTime()
let endTime = new Date(resultDate[1]).getTime()
console.log(resultDate,200)
console.log(resultDate[0].split('.'),resultDate[1].split('.'))
if (startTime <= endTime && endTime <= nowTime) {
if(resultDate[0].split('.')[0] !== resultDate[1].split('.')[0]){
uni.showToast({
title: '不能跨年选择！',
icon: 'none'
})
}else{
this.$emit('confirm', resultDate)
this.defaultDate1 = resultDate[0] + ' - ' + resultDate[1]
console.log(this.defaultDate1,199)
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;
}
}
/deep/ .uni-input-input {
height: 64rpx;
line-height: 64rpx;
position: absolute;
top: 0;
}
</style>
