如何在 Angular 6 中设置日期格式?

2024-04-07

我有一个功能,可以显示用户输入的实时日期,现在当用户输入输入时,我在前端显示[日期]:

28.10.2018 10:09

我希望更改日期(如果是过去几天、过去一周、过去一年等)

因此,如果昨天输入了输入,我想显示如下内容:

1d意思是一天前,一年也是如此(1y) , 一周 (1w) etc.

这是我到目前为止所尝试过的:

这是获取日期及其输入文本的函数

 this.activeRouter.params.subscribe((params) => {

        let id = params['id'];
        this.userService.getComments(id)
        .pipe(
          map(data => data.sort((a, b) => new Date(b.localTime).getTime() - new Date(a.localTime).getTime()))
        )
        .subscribe(data => this.comments = data);
        });

他这里是将文本输入和日期添加到服务器的功能

     addComments(task_id) {
        const formData = this.addForm.value;
        formData.task_id = task_id;
        this.userService.addComments(formData)
        .subscribe(data => {
          this.comments.push(this.addForm.value);
          this.addForm.reset();
        });
        const date = new Date();
        const d = date.getUTCDate();
        const day = (d < 10) ? '0' + d : d;
        const m = date.getUTCMonth() + 1;
        const month = (m < 10) ? '0' + m : m;
        const year = date.getUTCFullYear();
        const h = date.getUTCHours();
        const hour = (h < 10) ? '0' + h : h;
        const mi = date.getUTCMinutes();
        const minute = (mi < 10) ? '0' + mi : mi;
        const sc = date.getUTCSeconds();
        const second = (sc < 10) ? '0' + sc : sc;
        const loctime = `${year}-${month}-${day}T${hour}`;

        this. addForm.get('localTime').setValue(loctime);

}

这里是展示给前端的html HTML:

<div class="comments_details">
              <h1>Mike Ross</h1>
              <span class="days">{{comment.localTime | date:'dd.MM.yyyy H:mm'}}</span>
            </div>

这是用于抓取数据并将数据添加到服务器的服务函数

  addComments(comments: Comment) {
    comments.localTime = new Date();
    return this.http.post(this.commentsUrl, comments);
  }
  getComments(id: number) {
    return this.http.get<Comment[]>(this.commentsUrl);
  }

我需要在代码中更改哪些内容才能获得我想要的格式?


我认为你不应该在角度中使用力矩。它不是 tree shakable 的,并且会让你的包变得巨大。您应该看一下 date-fns 或 date.js。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Angular 6 中设置日期格式? 的相关文章

  • 检测 Google 验证码的挑战窗口何时关闭

    我正在使用谷歌隐形验证码 有没有办法检测挑战窗口何时关闭 我所说的挑战窗口是指您必须选择一些图像进行验证的窗口 目前 我在按钮上放置了一个旋转器 一旦单击按钮 就会呈现验证码挑战 无法向用户提示另一个质询窗口 我以编程方式调用渲染函数 gr
  • 检查 TypeScript 中是否选中复选框元素

    我的 html 文件上有一个复选框
  • JS 保留以零结尾的小数[重复]

    这个问题在这里已经有答案了 在JavaScript中 是否可以 锁定 十进制数 以保留以零结尾的 浮点数 例如 我有 2 个不同的数字 如下所示 伪代码 let a 1 0 let b 1 00 a b true should be fal
  • 更改API数据输出的布局

    我是 API 集成和 PHP 的新手 我最近将 VIN 解码器集成到我的应用程序中 在输入框中输入车辆的 VIN 选择提交 然后就会显示 API 数据库中有关该车辆的所有信息 数据存储为关联数组 其中包含类别及其相应元素 例如 对于 VIN
  • React JS 服务器端问题 - 找不到窗口

    你好 我正在尝试在我的reactJS项目中使用react rte 我有服务器端渲染 每次我想使用这个包时 我都会得到 return msie 6 9 b test window navigator userAgent toLowerCase
  • JavaScript 将键添加到数组中的每个值

    我下面有这个数组 它由一个简单的数组组成 我想要完成的是放一把钥匙id在每个数组值前面以实现类似的效果 id a id b id c id d 有没有一种简单的方法可以做到这一点 任何帮助将不胜感激 谢谢 var test a b c d
  • 如何在 React Native 上显示 SVG 文件?

    我想显示 svg 文件 我有一堆 svg 图像 但我找不到显示的方式 我尝试使用Image and Use的组成部分反应本机 svg https github com magicismight react native svg但他们不这样做
  • C# 和 Javascript SHA256 哈希的代码示例

    我有一个在服务器端运行的 C 算法 它对 Base64 编码的字符串进行哈希处理 byte salt Convert FromBase64String serverSalt Step 1 SHA256Managed sha256 new S
  • 全局传递 xhr onload 函数的值

    在我正在创建的应用程序中 我有以下 XMLHttpRequest 并且我正在尝试传递结果data在 的里面xhr onload 到在同一父函数中创建的数组中 var url http api soundcloud com resolve j
  • 使用 JQuery 禁用和启用所有超链接

    我有以下禁用所有超链接的内容 但在事件发生后我想再次启用它们 我该如何执行此操作 a click function return false 我认为这不仅仅是将其设置为 true 那么简单 谢谢大家 不要以这种方式绑定 点击 处理程序 而是
  • 如何使跨度标签不可删除?

    我正在尝试使 contenteditable div 内的跨度标记不可删除 div Editable span Read Only span div 只读范围确实是只读的 但我可以通过单击删除键来删除整个范围 有没有一种属性方法可以告诉sp
  • 当我多次调用 requestAnimationFrame 时会发生什么

    我的意思是一次调用多个具有相同功能的 requestAnimationFrame function Draw DoSomething function AFunc prepare something requestAnimationFram
  • 如何为我的整个 Node.js 应用程序使用相同的 MySQL 连接?

    我有一个app js 我从那里运行我的整个应用程序 在 app js 内部 我require许多文件中都有代码 对于每个文件 我都这样做 var mysql require mysql var mclient mysql createCon
  • 如何在画布上所有其他内容后面绘制图像? [复制]

    这个问题在这里已经有答案了 我有一块画布 我想用drawImage在画布上当前内容后面绘制图像 由于画布上已经有内容 我正在使用字面上的画布来创建包含图像的画布 因此我无法真正先绘制图像 所以我无法使用drawImage在我呈现其余内容之前
  • 如何重复 ajax 请求,直到满足 RxJS Observable 的条件?

    我正在尝试重复请求 直到响应包含使用 RxJS 的数据 此时我想调用成功 或失败 处理程序 但我在使用 RxJS 时遇到了麻烦 这是我目前的方法 redux observable action observable mergeMap gt
  • Service Worker 与 Shared Worker

    Service Worker 和 Shared Worker 有什么区别 我什么时候应该使用 Service Worker 而不是 Shared Worker 反之亦然 Service Worker 具有共享 Worker 之外的附加功能
  • Facebook 点赞按钮消失

    我的网站中的 Facebook Like 按钮出现问题 添加此代码 由 facebook 提供 按钮在创建时正确显示在任何页面中
  • 在 TypeScript 中,可以在没有“new”关键字的情况下使用类吗?

    TypeScript 是包含类型的 ES6 Javascript 超集 可以使用以下方式声明一个类class关键字并使用实例化new关键字与 Java 中的关键字类似 我想知道 TypeScript 中是否有任何用例可以在不使用new关键词
  • 为什么 Node.js 应用程序只能从 127.0.0.1/localhost 访问?

    我本来打算教我的朋友介绍 Node 但是后来 我想知道为什么这个代码来自nodejs org var http require http http createServer function req res res writeHead 20
  • Bootstrap 导航栏与 Google 位置重叠自动完成下拉菜单

    我有一个导航栏 我试图在其中添加一个地点搜索框 除了谷歌位置提示框的一小部分被导航栏重叠 如下图所示 之外 一切几乎都有效 我尝试过改变z index输入框的值改为10或2000或90000但似乎没有效果 我还缺少其他需要做的事情吗 这是

随机推荐

  • 如何在 odoo 中打印重复的 qweb 报告?

    我创建了一份运行良好的报告 现在我在表单的标题名称 打印重复 中创建了一个按钮 它将打印相同的报告 但是 当我点击 打印副本 按钮 我想在报告顶部打印 重复报告 截屏 https i stack imgur com Hiu67 png 单击
  • gulp通过markdown json用jade生成html文件

    我在用着gulp markdown to json and gulp jade 我的目标是从 markdown 文件中获取数据 如下所示 template index jade title Europa This is a test gra
  • 更改 TFS 工作项类型

    是否可以更改 TFS 工作项的类型 例如 我有一个 Bug 我想将其更改为更改请求 如前所述 您无法直接更改工作项类型 但是有一个很好的快捷方式可以为您在这些情况下节省大量时间 它将自动复制更改集 测试用例等的链接 右键单击您的工作项并选择
  • 无法使用类型为“(start: String.Index, end: String.Index)”的参数列表调用类型“Range”的初始值设定项

    let greenHex hex substring with Range
  • Postgres regr_slope 返回 NULL

    有人可以帮我了解一下情况吗regr slope数据集中有行时返回 NULL 例如 log gt select from sb1 order by id ts id elapsed ts 317e 86 1552861322 627 317e
  • Xcode 自定义字体未显示在 Storyboard 中

    我将两种字体添加到我的项目文件夹中 我将它们添加到 info plist 中 我在故事板的自定义字体列表中看不到它们 我做错了什么 我知道这是一个很老的问题 但我遇到了同样的问题 而且上述提示对我不起作用 除了标准检查 存在于捆绑包中 重新
  • Rspec 不删除 2 个特定表

    我正在使用 Rspec 来测试 Rails 应用程序 我有 2 个导入数据的表 测试数据库和开发数据库 整个应用程序依赖于表数据 这意味着整个功能是匹配 计算和测量该表中的数据并将其放入其他表中 因此 在测试时 删除这些表的数据是没有意义的
  • 为什么java没有byte类型后缀? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 独立验证表单片段

    我有一个非常大的表格 我以类似向导的方式将其分成四个部分 向导插件 智能向导 具有当前处于焦点的表单段 而其余 3 个段隐藏在 dom 中 我正在使用 jquery 验证插件来动态验证表单 问题是验证所显示的表单部分 仅当用户进入下一步时
  • 在 Eclipse 中找不到 run as junit test

    我在 Eclipse 中创建了一个这样的测试类 RunWith SpringJUnit4ClassRunner class ContextConfiguration locations classpath applicationContex
  • 初学者:Scala 2.10 中的 Scala 类型别名?

    为什么此代码无法编译并出现错误 未找到 值矩阵 从文档和一些 可能已经过时的 代码示例来看 这应该可行吗 object TestMatrix extends App type Row List Int type Matrix List Ro
  • 模板参数推导:哪个编译器在这里?

    考虑以下代码 template
  • 为什么 helm 不使用部署模板中定义的名称?

    即来自name Chart Name Values module5678 name pod below deployment yaml apiVersion apps v1 kind Deployment metadata labels a
  • 在启动时注册多个 DbContext 实例以在通用存储库中使用

    我正在尝试创建一个通用存储库 它接受 2 个通用类型 例如 public class EfRepository
  • 在 Azure 上部署 MEAN+Webpack

    如何部署 MEAN STACK WEBPAC 应用程序 我有一个 MEAN Stack Webpac 应用程序和 nodejs 服务器 提供其余api 我使用 webpack 开发服务器运行 Angular 应用程序 构建 webpack
  • QMessageBox::ritic 不显示标题文本

    我需要显示简单的错误消息 QMessageBox critical nullptr My Title Text 但出现的对话框的标题为空 我做错了什么 PS 操作系统 MacOS 10 9 1 你没有做错什么 从QMessageBox se
  • Silverlight 应用程序中的跨线程访问无效

    我正在使用 Hammock 框架从 Silverlight 应用程序到 Rest 服务进行异步服务调用 在 完成 回调中 我正在更新绑定到视图上组合框的 ObservableCollection OnPropertyChanged 事件处理
  • Spring AMQP RabbitMQ 如何直接发送到Queue而不需要Exchange

    我正在使用 Spring AMQP 和 Rabbitmq 模板 如何直接将消息发送到队列而不使用Exchange 我该怎么做 我该怎么做 你不能 发布者不知道队列 只是交换和路由密钥 但是 所有队列都绑定到默认交换器 以队列名称作为其路由键
  • 将列名称文本包装在 R 中的 ggpairs 中

    我正在使用 ggpairs 在绘制矩阵时 我收到一个矩阵 如下所示 正如您所看到的 某些文本长度很大 因此文本看不完整 无论如何 我可以将文本换行 使其完全可见吗 Code ggpairs df 我希望文本换行 以便可以看到类似这样的内容
  • 如何在 Angular 6 中设置日期格式?

    我有一个功能 可以显示用户输入的实时日期 现在当用户输入输入时 我在前端显示 日期 28 10 2018 10 09 我希望更改日期 如果是过去几天 过去一周 过去一年等 因此 如果昨天输入了输入 我想显示如下内容 1d意思是一天前 一年也