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 时间格式化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS快速实现简单计算器

    JS快速实现简单计算器

    这篇文章主要为大家详细介绍了JS快速实现简单计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-04-04
  • JS获取当前脚本文件的绝对路径

    JS获取当前脚本文件的绝对路径

    这篇文章主要介绍了JS获取当前脚本文件的绝对路径的相关资料,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 原生js实现波浪导航效果

    原生js实现波浪导航效果

    这篇文章主要为大家详细介绍了原生js实现波浪导航效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • JS一维数组转化为三维数组的实现示例

    JS一维数组转化为三维数组的实现示例

    很多时候,跟后端接口开发对接时,因为需求的关系,需要前端地区数据跟后端的数据要一一对应,有时候需要的是多维数据,这篇文章主要介绍了JS一维数组转化为三维数组的实现示例,感兴趣的可以了解一下
    2021-12-12
  • 老生常谈JavaScript 函数表达式

    老生常谈JavaScript 函数表达式

    下面小编就为大家带来一篇老生常谈JavaScript 函数表达式。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 微信小程序实现登录注册界面

    微信小程序实现登录注册界面

    这篇文章主要为大家详细介绍了微信小程序实现登录注册界面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • js获取当前日期时间及其它操作汇总

    js获取当前日期时间及其它操作汇总

    Js获取当前日期时间及其它操作,还有一些自己常用的方法,很好用,也很全。这里推荐给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • 原生js实现简单的焦点图效果实例

    原生js实现简单的焦点图效果实例

    下面小编就为大家分享一篇原生js实现简单的焦点图效果实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • JS中onpropertychange和onchange事件区别小结

    JS中onpropertychange和onchange事件区别小结

    当一个HTML元素的属性用js改变的时候,都能通过onpropertychange来捕获。例如一个文本text对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onpropertychange却能够捕获。
    2010-07-07
  • JavaScript获取页面上被选中文字的方法技巧

    JavaScript获取页面上被选中文字的方法技巧

    这篇文章主要介绍了JavaScript获取页面上被选中文字的方法技巧,本文直接给出实现代码和运行效果,需要的朋友可以参考下
    2015-03-03

最新评论