uniapp uview 通过 “时间戳” 实现日历点击上一日，下一日的功能组件

太过爱你忘了你带给我的痛 2021-09-07 06:12 1644阅读 0赞

##### 示例图 #####

![实现图][20210222112632616.png]

###### 第一步，页面引用日期控件 步骤 (参考uniapp官方文档) ######

<template>
    	<view class="chooise-data">
    		<view class="yesterday" @click="prevDate()">
    			上一日
    		</view>
    		<view class="chooise-box">
    			<view class="date">
    				<view class="calendar">
    					<u-calendar v-model="show" ref="calendar" @change="change" :mode="mode" :btn-type="btnType"></u-calendar>
    					<view @click="showChange()">{
       {result}}</view>
    				</view>
    				<view class="date-icon">
    					<image style="width: 18px; height: 18px;" src="../static/img/home/pop-date.png" mode=""></image>
    				</view>
    			</view>
    		</view>
    		<view class="tomorrow" @click="nextDate">
    			下一日
    		</view>
    	</view>
    </template>

javasScript 部分

<script>
    	export default { 
    		data() { 
    			return { 
    				date: '',
    				show: false,
    				mode: 'date',
    				result: this.result,
    				btnType: 'primary',
    			};
    		},
    		beforeMount() { 
    			this.result = this.getcurrentday()
    		},
    
    		methods: { 	
    		
    			// 获取当前日期展示
    			getcurrentday() { 
    				var date = new Date();
    				let year = date.getFullYear();
    				let month = date.getMonth() + 1;
    				let day = date.getDate();
    				month = month < 10 ? "0" + month : month; //月小于10，加0
    				day = day < 10 ? "0" + day : day; //day小于10，加0
    				return `${ year}-${ month}-${ day}`;
    			},
    			
    			// 获取时间戳日期的格式
    			// 因为不知道为什么，加了date初始化日期就显示为NAN,所以我写了两遍..o(╥﹏╥)o(可能是日期格式不对？)
    			
    			getDate(date) { 
    				var date = new Date(date);
    				let year = date.getFullYear();
    				let month = date.getMonth() + 1;
    				let day = date.getDate();
    				month = month < 10 ? "0" + month : month; //月小于10，加0
    				day = day < 10 ? "0" + day : day; //day小于10，加0
    				return `${ year}-${ month}-${ day}`;
    			},
    			
    			prevDate() { 
    				//前一天
    				let odata = new Date(
    					//计算当前日期 -1
    					new Date(this.result).getTime() - 24 * 60 * 60 * 1000
    				);
    				this.result = this.getDate(odata); //格式化日期并赋值
    			},
    			
    			nextDate() { 
    				//后一天
    				let odata = new Date(
    					new Date(this.result).getTime() + 24 * 60 * 60 * 1000
    				); //计算当前日期 +1
    				this.result = this.getDate(odata); //格式化日期并赋值
    			},
    
    			showChange(index) { 
    				this.show = true; //是否显示控件
    			},
    			
    			change(e) { 
    				console.log(e)
    				this.result = e.result; //当前日期显示到页面组件
    			}
    		},
    		watch: { 
    			chooisedate(val) { 
    				this.$emit('result', this.result) //子组件传值
    			}
    		},
    	}
    </script>

Css部分（根据自己需求）

.chooise-data { 
    		margin-top: 20px;
    		display: flex;
    		justify-content: space-between;
    		align-items: center;
    		width: 100%;
    		height: 40px;
    	}
    
    	.yesterday { 
    		width: 80px;
    		height: 35px;
    		line-height: 35px;
    		text-align: center;
    		background-color: #2E95FF;
    		border: 1px solid #FFFFFF;
    		color: #FFFFFF;
    		border-radius: 5px;
    	}
    
    	.tomorrow { 
    		width: 80px;
    		height: 35px;
    		line-height: 35px;
    		text-align: center;
    		background-color: #2E95FF;
    		border: 1px solid #FFFFFF;
    		color: #FFFFFF;
    		border-radius: 5px;
    	}

![在这里插入图片描述][20210222112751832.png]

[20210222112632616.png]: /images/20210827/937e57bc77db48089a754ba76d9470bf.png
[20210222112751832.png]: /images/20210827/03a6787ea0a84260a4f2fbc175fbcae9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1644人围观）

还没有评论，来说两句吧...

相关阅读

相关 Golang获取年月日时间字符串和时间戳

1、获取字符串时间 //获取年、月、日、时、分、秒 getYear := time.Now().Year() //获取年 getMonth := ti

快来打我*/ 2023年01月16日 02:50/ 0 赞/ 187 阅读

相关 js时间戳转成年月日

时间戳转成年月日 function timestampToTime(timestamp) \{ var date = new Date(timestamp \ 1000)

分手后的思念是犯贱/ 2022年12月28日 06:22/ 0 赞/ 341 阅读

相关 uniapp时间戳转换成年月日时分秒的格式

后端返回的时间格式是时间戳,需要以年月日的格式渲染在前端界面由于uniapp是基于vue的,所以对于时间的处理。我们也可以用到过滤器。 1：在uniapp的项目的

向右看齐/ 2022年12月19日 03:40/ 0 赞/ 538 阅读

相关 java 图片上一张下一张_java实现预览图片,点击实现下一张

项目上需要实现图片预览功能,页面展示图片的预览小图,点击时弹出层展示原图,可以点击上一张和下一张等效果 1.本文将简单具体介绍实现的全过程,前后台代码和需要用到的插件 2.

àì夳堔傛蜴生んèń/ 2022年11月07日 15:50/ 0 赞/ 177 阅读

相关 java通过年月日获取时间戳_时间戳获取（周，年，月，日）

package com.aquilaflycloud.util; import net.sf.json.JSONArray; import java.text.ParseE

左手的ㄟ右手/ 2022年10月23日 00:52/ 0 赞/ 508 阅读

相关年月日时间戳和年月日互相转换,时分秒时间戳和时分秒互相转化

其中要用的工具包: <dependency> <groupId>cn.hutool</groupId> <artifactId>

- 日理万妓/ 2022年02月27日 12:20/ 0 赞/ 478 阅读

相关 mysql 时间戳转换为年月日时分秒

转载说明源处！ select FROM\_UNIXTIME(time/1000,'%Y-%m-%d %h:%i:%s') from order 注意：一定要用时间戳除以10

﹏ヽ暗。殇╰゛Y/ 2021年12月09日 22:19/ 0 赞/ 992 阅读

相关 uniapp uview 通过 “时间戳” 实现日历点击上一月，下一月的功能组件

借鉴链接: [js 写点击上一月下一月时候切换][js _]. 实现：![在这里插入图片描述][2021022215011145.png] html:引用的是uview

╰+攻爆jí腚メ/ 2021年09月07日 06:12/ 0 赞/ 2275 阅读

相关 uniapp uview 通过 “时间戳” 实现日历点击上一日，下一日的功能组件

示例图 ![实现图][20210222112632616.png] 第一步，页面引用日期控件步骤 (参考uniapp官方文档) <template>

太过爱你忘了你带给我的痛/ 2021年09月07日 06:12/ 0 赞/ 1645 阅读

相关 uniapp 电商小程序时间戳转化为年月日时分秒

时间戳的转化这个本质上就是Js的操作，适用于任何使用js的场所。 resolvingDate(date){ if(!date){ r

た入场券/ 2021年07月25日 23:19/ 0 赞/ 1287 阅读