【无标题】uniapp picker中的日期选择器和时间选择器

最新推荐文章于 2024-07-12 09:32:29 发布

continue_fight

最新推荐文章于 2024-07-12 09:32:29 发布

阅读量1k

点赞数

文章标签：前端框架 view design Powered by 金山文档

本文链接：https://blog.csdn.net/continue_fight/article/details/129277621

版权

日期选择器

<template>
    <view>
        <view class="box_date">
            <view>
                <text>请选择日期：</text>
            </view>
            <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="changeDate">
               <view class="date">
                    <input type="text" disabled="true" v-model="date">
               </view>
            </picker>
        </view>
     
    </view>
</template>
<script>
function getDate(type) {
    const date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
 
    if (type === 'start') {
        year = year - 10;
    } else if (type === 'end') {
        year = year + 10;
    }
    month = month > 9 ? month : '0' + month;
    day = day > 9 ? day : '0' + day;
 
    return `${year}-${month}-${day}`; 
}
export default {
    data() {
        return {
            date: getDate(), //当前日期
            startDate: getDate('start'), //可选择的最小日期
            endDate: getDate('end'), //可选择的最大日期
        };
    },
    methods: {
        changeDate(e){
            this.date = e.detail.value;    
            console.log('选择的日期：',this.date)
        },
    }
};
</script>
<style >
    .box_date{
        margin: 20upx;
        display: flex;
    }
    .date{
        border: 1px solid #ccc;
        padding: 10upx;
        width: 300upx;
    }
    .box_date text{
        line-height: 60upx;
    }
</style>

时间选择器

<template>
    <view>
      <view class="box_time">
            <view>
                <text>请选择时间：</text>
            </view>
            <picker mode="time" :value="time"  :start="minTime" :end="maxTime" @change="changeTime">
                <view class="time">
                    <input type="text" disabled="true" v-model="time">
                </view>
            </picker>
        </view>
    </view>
</template>
<script>
function getTime(){
        const time = new Date();
        let hour = time.getHours();
        let minute = time.getMinutes();
        
        hour = hour > 9 ? hour : '0' + hour;
        minute = minute > 9 ? minute : '0' + minute;
        
        return `${hour}:${minute}`;
    }
export default {
   data() {
            return {
                time: getTime(), //当前时间
                minTime: '09:00', //可选择的最小时间
                maxTime: '18:00' //可选择的最大时间
            };
        },
        methods: {
            changeTime(e) {
                this.time = e.detail.value
            }
        }
};
</script>
<style >
    .box_time{
        margin: 20upx;
        display: flex;
    }
    .time{
        border: 1px solid #ccc;
        padding: 10upx;
        width: 300upx;
    }
    .box_time text{
        line-height: 60upx;
    }
</style>