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

向右看齐 2022-12-19 03:40 583阅读 0赞

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

1：在uniapp的项目的static目录底下，新建一个test.json文件,

![dcc7b3f6d1a2f57a80eeb1eecf1063ec.png][]  
test.json里面写好模拟数据(未处理的时间戳）

{
    "time":"1588061853944"
    }

2：步骤：  
写一个请求方法请求json数据，在data里面定义一个数组，将请求成功的数据赋值给数组，然后再渲染的view里面，这个步骤就不多说了，常规操作哦。

这里要用到filters过滤的方法，时间戳的处理其实和jquery里面用到的是一样的。

<view class="text-cut">
                {
       {timeArray.time | formatDate}}
     </view>

//时间戳的处理    
            filters: {
                formatDate: function(value) {
                    var date = new Date();
                    //date.setTime(value);
                    var month = date.getMonth() + 1;
                    var hours = date.getHours();
                    if (hours < 10)
                        hours = "0" + hours;
                    var minutes = date.getMinutes();
                    if (minutes < 10)
                        minutes = "0" + minutes;
                    var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
                        " " + hours + ":" + minutes;
                    return time;
                }
    
            },

3:完整的示例代码如下index.vue

<template>
    	<view>
    		<view class="text-cut">
    			{
       {timeArray.time | formatDate}}
    		</view>
    	</view>
    </template>
    <script>
    	export default {
    		data() {
    			return {
    				timeArray: [],
    			};
    		},
    		onLoad() {
    			this.getList();
    		},
    		methods: {
    			getList() {
    				uni.request({
    					url: "../../static/test.json",
    					method: 'get',
    					dataType: 'json',
    					success: (res) => {
    						console.log(res.data);
    						this.timeArray = res.data;
    					},
    					// fail: function (err) {
    					//        console.log("服务器繁忙")
    					// }				
    				});
    			},
    	
    		},
    		//时间戳的处理	
    		filters: {
    			formatDate: function(value) {
    				var date = new Date();
    				//date.setTime(value);
    				var month = date.getMonth() + 1;
    				var hours = date.getHours();
    				if (hours < 10)
    					hours = "0" + hours;
    				var minutes = date.getMinutes();
    				if (minutes < 10)
    					minutes = "0" + minutes;
    				var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
    					" " + hours + ":" + minutes;
    				return time;
    			}
    
    		},
    	}
    </script>
    <style>
    </style>

4:显示结果如下  
![ad35d045a57f56e14f5e5f8c0b14e81b.png][]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

[dcc7b3f6d1a2f57a80eeb1eecf1063ec.png]: /images/20221120/d6404aaec3e64f319d1106862fb16504.png
[ad35d045a57f56e14f5e5f8c0b14e81b.png]: /images/20221120/79eed97803b447c5bf3e346aea93e884.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/8caf4e6726064696ba0f493a8dcd3673.png