uniapp自带的选择日期的使用

年月日的下拉框

直接看代码

javascript 复制代码
<view class="uni-title uni-common-pl">日期选择器</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					当前选择
				</view>
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>
		</view>
	<script>
export default {
    data() {
        const currentDate = this.getDate({
            format: true
        })
        return {
            date: currentDate,//默认设置的时间 此处可以从后台获取
        }
    },
    computed: {
        startDate() {
            return this.getDate('start');
        },
        endDate() {
            return this.getDate('end');
        }
    },
    methods: {
  
        bindDateChange: function(e) {
            this.date = e.detail.value
        },
        
        //获取当前的日子
        getDate(type) {
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();

            if (type === 'start') {
                year = year - 60;
            } else if (type === 'end') {
                year = year + 2;
            }
            month = month > 9 ? month : '0' + month;
            day = day > 9 ? day : '0' + day;
            return `${year}-${month}-${day}`;
        }
    }
}
</script>
相关推荐
卷Java3 分钟前
小程序前端功能更新说明
java·前端·spring boot·微信小程序·小程序·uni-app
卷Java5 分钟前
小程序原生导航栏返回键实现
spring boot·云原生·微信小程序·uni-app
2501_915918415 小时前
Video over HTTPS,视频流(HLSDASH)在 HTTPS 下的调试与抓包实战
网络协议·http·ios·小程序·https·uni-app·iphone
鱼樱前端7 小时前
uni-app快速入门章法(一)
前端·uni-app
Q_Q5110082858 小时前
python+springboot+uniapp基于微信小程序的任务打卡系统
spring boot·python·django·flask·uni-app·node.js·php
李慕婉学姐8 小时前
【开题答辩过程】以《基于SpringBoot+Vue+uni-app的智慧校园服务系统的设计与实现》为例,不会开题答辩的可以进来看看
spring boot·uni-app
withoutfear8 小时前
uni-app 开发H5软键盘会顶起底部内容的解决方案
uni-app·软键盘
影子信息8 小时前
uniapp 日历组件 uni-datetime-picker
前端·uni-app
不知名的前端专家8 小时前
uniapp 安卓FTP上传下载操作原生插件
android·uni-app
2501_9160137415 小时前
iOS 26 系统流畅度检测 从视觉特效到帧率稳定的实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone