使用Moment.js处理JavaScript日期

日期处理是我们所有人在职业生涯中都必须跨越的发展障碍之一,而伟大的工具在驯服这只野兽方面有很长的路要走。Moment.js库是JavaScript开发人员的工具。自从发现Moment.js这个开源项目以来,我一直在认真地使用它来简化客户端日期的验证、解析和操作。

在本教程中,我将帮助您建立并运行这个非常有用的JavaScript日期库。

什么是Moment.js?

Moment.js是一个免费的开源JavaScript库,无需使用本地JavaScript日期直接对象。类的包装器日期对象(以同样的方式,jQuery是JavaScript的包装),使对象更容易使用。

JavaScript的问题日期对象不是它所带来的功能;对于开发人员来说,使用它非常麻烦。如果你想要进行复杂的解析、验证和显示日期,你最终会编写大量的代码。js还通过各种特性扩展了原生JavaScript的日期功能,比如相对时间、日历时间、持续时间和多语言支持。

它有一个似乎无穷无尽的插件列表,允许额外的功能,如时区支持,递归和Twitter集成。

教程信息

在本教程中,我们将了解Moment.js。以下是我们将要解决的问题。

  • 引用Moment.js并显示基本的日期输出
  • 显示格式化的日期
  • 解析日期
  • 检测无效日期
  • 纠正无效日期
  • 添加和减去日期

本教程几乎所有部分都有演示页面,演示所讨论的代码。或者,您也可以下载与本教程相关的所有演示文件作为ZIP存档。下载所有演示文件让我们开始吧。

引用Moment.js并显示基本输出

要开始,你需要下载并在HTML文档中引用它。你也可以在这里找到图书馆cdnjs.com(一个开放源码项目的公共CDN)。只要用这个词搜索图书馆就可以了“moment.js”

在本教程中,我们要做的第一件事是引用Moment.js库。然后,为了确保它正常工作,我们将实例化a时刻对象和JavaScript日期对象,然后输出它们的值。的值,以及实例化和显示的值时刻对象和JavaScript日期对象。

<!DOCTYPE html>  <!——引用Moment.js库——> 

Moment Date

. .<!——container for Moment.js输出——>

JavaScript Date

.<!——container for JavaScript Date output

视图演示1的代码长度时刻和本地日期物体看起来相当。

显示格式化日期

之间的事情时刻和JavaScript日期然而,当我们想输出一个简单的、人类可读的日期显示,格式为' Y-m-d '(例如' 2014-7-1 ')时,就会发生变化。

使用JavaScript日期这就是我们的代码。

//使用JavaScript Date在div中显示当前日期var NowDate = new Date();var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];var sDay = NowDate.getDate();var sMonth = NowDate.getMonth() + 1;var sYear = NowDate.getFullYear();var eDisplayDate = document.getElementById('displayJsDate');eDisplayDate。innerHTML = sYear+'-'+sMonth+'-'+ day;

js使我们的代码更简洁。

//使用Moment.js在div中显示当前日期(#displayMoment)var NowMoment = moment();var eDisplayMoment = document.getElementById('displayMoment');eDisplayMoment。innerHTML = NowMoment.format('YYYY-M-D');

视图演示2您将注意到,我们必须在本机解决方案中为特定的日期格式输出添加大量设置代码,并且只调用了一个简单的方法.format ()在Moment解决方案中。

我们传入的字符串参数.format (),即“YYYY-M-D”,是我们要求Moment.js库返回日期的格式。js网站有许多格式选项,方便地列在这里的表格中:

现在我们已经熟悉了显示和格式化当前日期的过程,让我们继续。

解析日期

Moment初始化器将接受一个参数并设置日期该日期的对象。

Output Date