angular的datePipe（时间管道）函数也太香了吧

最新推荐文章于 2024-05-18 15:39:18 发布
最新推荐文章于 2024-05-18 15:39:18 发布
阅读量2.3k 收藏 2
点赞数 1
文章标签： html5 前端 angular ts js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cb294/article/details/120809057
版权

这几天做项目的时候，研究了一下公司大佬写的框架，发现了宝藏datePipe函数。

用这个函数可以直接给日期格式化，不需要自己封装函数。

用这个函数前先引入import { DatePipe } from '@angular/common';

然后在@Component({})里输入providers: [DatePipe]

接下来就可以用this.datePipe.transform(new Date(), 'yyyy-MM-dd HH:mm:ss')去格式化时间了

new Date()是返回的日期格式是世界标准时间，而且是返回当天的时间

 new Date()不单单可以返回当天的世界标准时间，只需要在()里输入你想返回的时间即可将日期格式返回成世界标准时间（可以输入日期，也可以输入毫秒数）

cb294
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
angular10 DatePipe 日期格式化 亲测可用
朝花夕拾的博客
12-17 1529
1、引入DatePipe 2、初始化 3、使用
Angular4 之DatePipe（时间管道）
Coder_KellySha的博客
07-31 1万+
{{ dateTime | date:'yyyy-MM-dd HH:mm:ss'}} // 1989-07-22 10:21:21 {{ dateTime | date:'medium' }} // 1989年7月22日 上午10:21:21 {{ dateTime | date:'short' }} // 1989/7/22 上午10:21 {{ dateTime | date:'...
Angular2的管道Pipe的使用方法
11-27
管道Pipe可以将数据作为输入，然后按照规则将其转换并输出。在Angular2中有许多内置的Pipe，比如DatePipe、UpperCasePipe和CurrencyPipe等。在这里我们主要介绍如何自定义Pipe。 1. 管道定义 Pipe的定义如下代码所示： import { PipeTransform, Pipe } from '@angular/core'; /*users: Array<any> = [ { name: '1', id: 1 }, { name: '2', id: 2 }, { name: '3', id: 3 }, { name: '4', i
angular时间格式化
热门推荐
我的技术博客
12-26 1万+
angular在格式化时间时不需要自己写方法,内置的管道可以直接使用 在组件中直接使用{{date | date:'yyyy-MM-dd HH:mm:ss'}} 在class中使用 引入 DatePipe import { DatePipe } from '@angular/common'; 注入 constructor中,constructor(private datePipe: DatePi...
angular时间格式转换
weixin_39150852的博客
08-01 1932
//导入 import { DatePipe } from '@angular/common'; //构造器 constructor(private datePipe: DatePipe ) { } //js使用 this.basicFormInfo.birthday = this.datePipe.transform(this.basicFormInfo.birthday, 'yyyy-M...
angular中格式日期
m0_54944506的博客
05-25 3015
如何在angular中对数据进行格式化操作 有两种方法 第一种是利用formatDate方法进行日期格式转换，另一种是利用datePipe管道进行日期数据处理 formatDate()方法 首先引入 import { formatDate } from '@angular/common' import {Component,Inject,LOCALE_ID }from '@angular/core'; 使用 formatDate(value :string|number|date,format:strin
angular用DatePipe进行日期转换
chenchuwai的博客
06-26 5406
angular中日期转换为要显示的格式可以使用DatePipe： （1）HTML <span*ngIf="CompareYear(notification.date)!==currentYear;elseelseCurrentYear"> {{notification.date|date:'yMMMd'}} </span> <ng-template#elseCurrentYear> <span*ngIf="Comp...
Angular12-new Date()与DatePipe时间管道
m0_46696670的博客
09-22 1018
NGZORRO的DatePicker组件输入输出仅支持Date，填入’yyyy-MM-dd HH:mm:ss’格式的值报错；输出时要把Date转为’yyyy-MM-dd HH:mm:ss’格式。提示：以下是本篇文章正文内容，下面案例可供参考date与DatePipe的简单使用。
Angular: 设置日期格式
梁什么鸭“的博客
01-22 483
Angular: 设置日期格式
Angular4 之DatePipe（日期时间管道）
chelen_jak的专栏
04-12 1344
原文出处：https://blog.csdn.net/sinat_41806435/article/details/97891684 {{ dateTime | date:'yyyy-MM-dd HH:mm:ss'}} // 1989-07-22 10:21:21 {{ dateTime | date:'medium' }} // 1989年7月22日 上午10:21:21 {{ dateTime | date:'short' }} .
Angular2管道Pipe及自定义管道格式数据用法实例分析
01-19
本文实例讲述了Angular2管道Pipe及自定义管道格式数据用法。分享给大家供大家参考，具体如下： 管道(Pipe)可以根据开发者的意愿将数据格式化，还可以多个管道串联。 纯管道(Pure Pipe)与非纯管道(Impure Pipe) 管道...
Angular中管道操作符(|)的使用方法
01-19
比如关于日期的展示，对于源数据使用管道1可以以yyyy/MM/dd来展示，也可以使用管道2展示成Feb 28, 2017的形式。但原数据依然是date，并没有改变。利用管道我们可以将数据格式化的内容剥离出来，使之独立，有需要格式...
Angular的date管道timezone参数
qq_34885184的博客
11-03 635
- 问题 后台拿到的dataset.creationTime的值为"2021-11-02T15:58:36.000Z"，但是经过“date”管道处理后，显示在前端的时间为“23:58”。 <div>{{ dataset.creationTime | date: "yyyy-MM-dd" }}</div> <div>{{ dataset.creationTime | date: "EEE HH:mm" }}</div> - 原因 dataset.cre
angular中常见的管道及用法
城南蝈蝈
03-03 538
{{ dateTime | date:‘medium’ }} // 2022年12月12日 上午11:21:21。{{ dateTime | date:‘short’ }} // 2022/12/12 上午10:21。{{ dateTime | date:‘mediumTime’ }} // 上午10:21:21。minFractionDigits：小数点后的最小位数。这篇文章介绍一下，angular中自带的一些好用管道。这个管道可以将句子的首字母大写，实际开发中没怎么用过。
angular之在ts中运用管道及日期格式转换
平平无奇小码农的博客
01-13 1659
1.引入管道 import { DatePipe } from ‘@angular/common’; 2.在装饰器@component中注入 providers: [DatePipe]； 代码如下（示例）： @Component({ selector: 'app-version-ui', templateUrl: './version-ui.component.html', styleUrls: ['./version-ui.component.scss'], providers: [Dat
angular2格式化日期
web
06-02 662
我使用得是angular9 后台返回给我得日期格式是： 如图里的：openTime 我要的是： 行如这样的 代码： <td>{{ item.openTime | date:'MM' }}</td> <td>{{ item.openTime | date:'dd'}}</td> <td>{{ item.openHoleCount }}</td> <td>{{ item.openTime | date:'H
Angular中的管道
Dominic_W的博客
03-27 1253
管道的本质是一个函数，既然这样我们就可以自定义一个类，在这个类中定义一个函数进行数据逻辑的处理，然后使用@Pipe()装饰器把它标记为管道，这样一个自定义的管道就创建好了，在NgModule中引入之后就可以使用这个管道了。我在这里定义一个接受number型数据，并把输入值乘以十倍之后返回的管道：1、首先创建一个类，命名为，然后让这个类继承接口并实现一个transform方法，这个transform方法使用管道输入值作为第一个参数，把其它任何参数都以列表的形式作为第二个参数，并返回转换后的值。
Angular：angular中的日期管道的使用，进行日期格式化
灿灿大王搭建的黄金屋
11-12 7042
angular中的日期管道： {{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }} 其中value为日期表达式，是一个Date对象、数字（从 UTC 时代以来的毫秒数）或一个 ISO 字符串 ； format是一个要包含的日期、时间部分的格式，使用预定义选项或自定义格式字符串—— format包括：s...
前端基础入门三大核心之HTML篇：构建网页世界的基石与HTML5的魔力
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-18 744
HTML是一种标记语言，它使用一系列标签来描述网页内容的结构和表现形式。这些标签告诉浏览器如何处理和显示文本、图片、视频等网页元素。从最基础的段落、标题到复杂的表格、表单，HTML都能轻松应对。
Angular html 怎么调用Angular js中的函数
05-26
要在Angular HTML中调用Angular JS中的函数，可以使用以下步骤： 1. 在HTML中使用ng-controller指令来指定一个控制器，例如： ```html <div ng-controller="MyController"> <button ng-click="myFunction()">点击我</button> </div> ``` 2. 在Angular JS控制器中定义要调用的函数，例如： ```javascript app.controller('MyController', function($scope) { $scope.myFunction = function() { console.log('被点击了！'); }; }); ``` 在这个例子中，当用户点击按钮时，Angular会调用名为`myFunction()`的函数，这个函数会在控制台中输出“被点击了！”。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值