年月日时间范围选择框

 

        <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',['',''])
                    this.setDayData(this.pickerValue[1] + 1,0)
                }
            },
            setDayData(day,yearIndex){
                console.log(yearIndex,132)
                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[yearIndex] % 400 === 0 || this.yearList[yearIndex] % 4 === 0 && this.yearList[yearIndex] % 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,date[0])
            },
            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>