uniapp时间格式化处理实现

 更新时间:2022年08月22日 08:23:38   作者:tiankongxiao  
本文主要介绍了uniapp时间格式化处理实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

应用需求分析:前台页面有时需要展示YYYY-MM-DD格式,但后台却返回给我们YYYY-MM-DD hh:mm:ss、或者是一串字符

//格式化处理 方式一:
            dateFormat(time) {
                let date = new Date(time);
                let year = date.getFullYear();
                // 在日期格式中,月份是从0开始的,因此要加0,使用三元表达式在小于10的前面加0,以达到格式统一  如 09:11:05
                let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                // 拼接
                // return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
                return year + "-" + month + "-" + day;
            },
<view v-if="item.rukudate">{{ dateFormat(item.rukudate) }}</view>

或者

<view v-if="item.yuyuedate" :class="dateFormat(item.yuyuedate) == day ? 'sameDay' : '' ">{{ dateFormat(item.yuyuedate) }}</view>
//格式化处理 方式二:

// 时间过滤器
        filters:{
            formatDate(date){
                console.log(date)
                let newDate = new Date(date);
                let year = newDate.getFullYear();
                let month = newDate.getMonth().toString().padStart(2,0);
                let day = newDate.getDay().toString().padStart(2,0);
                return year + '-' + month + '-' + day;
            }
        },
<view>发表时间:{{ item.add_time | formatDate }}</view>

PS:uniapp实现时间格式化,显示几分钟之前

<template>
    <view class="content">
        <view>
            <text>{{time}}</text>
        </view>
    </view>
</template>

<script>
    var dateUtils = require('../../components/util.js').dateUtils;
    export default {
        data() {
            return {
                time:''
            }
        },
        onLoad() {
            uni.request({
                url: 'http://api.hnwlcm.com:8081/articleCover/Recommend/1?category=1',
                method: 'GET',
                success: res => {
                    console.log(res);
                    var newsList = res.data.extend.articles;
                    
                    // 时间问题
                    for (var i in newsList) {
                        this.time = dateUtils.format(newsList[i].updateTime);
                        // console.log(this.time)
                    }
                }
            });
        },
        methods: {
            
        }
    }
</script>

<style>
</style>

到此这篇关于uniapp时间格式化处理实现的文章就介绍到这了,更多相关uniapp 时间格式化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript手写源码之实现arrify转数组

    JavaScript手写源码之实现arrify转数组

    这篇文章主要为大家详细介绍了如何利用JavaScript实现arrify转数组,文中的示例代码讲解详细,对我们学习JavaScript有一点的帮助,需要的可以参考一下
    2023-02-02
  • js实现不提交表单获取单选按钮值的方法

    js实现不提交表单获取单选按钮值的方法

    这篇文章主要介绍了js实现不提交表单获取单选按钮值的方法,涉及javascript鼠标事件及页面元素属性操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • JS的递增/递减运算符和带操作的赋值运算符的等价式

    JS的递增/递减运算符和带操作的赋值运算符的等价式

    JS的递增/递减运算符和带操作的赋值运算符的等价式...
    2007-12-12
  • 不使用ajax实现无刷新提交表单

    不使用ajax实现无刷新提交表单

    这篇文章主要介绍了不使用ajax实现无刷新提交表单的方法,需要的朋友可以参考下
    2014-12-12
  • 原生js实现弹出层登录拖拽功能

    原生js实现弹出层登录拖拽功能

    这篇文章主要为大家详细介绍了使用原生JavaScript实现弹出层登录拖拽功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • ECharts仪表盘实例代码(附源码下载)

    ECharts仪表盘实例代码(附源码下载)

    大家在汽车驾驶舱里一眼就可以看到仪表盘,使用使用Echarts制作的仪表盘可以轻松展示用户的数据,清晰的看出某个指标值所在的范围,仪表盘形式的报表应用在各种统计系统中,本文结合实例讲解仪表盘在销售任务完成率的统计应用
    2016-02-02
  • JS鼠标滑过图片时切换图片实现思路

    JS鼠标滑过图片时切换图片实现思路

    在浏览网页时会看到这样的效果:当鼠标滑过一张图片后,这张图片切换为了另外的一张图片,下面为大家介绍下具体是如何实现的,感兴趣的朋友不要错过
    2013-09-09
  • 解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题

    解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题

    本篇文章主要是对window.opener=null;window.close(),只支持IE6不支持IE7,IE8的解决方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • es5 类与es6中class的区别小结

    es5 类与es6中class的区别小结

    这篇文章主要给大家介绍了关于es5 类与es6中class区别的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • js漂浮广告实现代码

    js漂浮广告实现代码

    js漂浮广告实现代码,本质上就是一个来回滚动的小图片,也是一种广告形式,需要的朋友可以收藏下
    2015-08-08

最新评论