JavaScript日期对象：JavaScript日期和时间入门指南

最新推荐文章于 2024-10-10 10:50:43 发布

dingshi7798

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量156

点赞数

文章标签： javascript 前端 ViewUI

日期和时间值用于许多重要功能，例如搜索，验证和报告生成。 Web应用程序中没有标准的日期格式，因为不同时区和国家/地区的人们喜欢不同的格式。因此，作为前端开发人员，适应任何一种日期格式都可能是一个挑战。今天，我们将看到如何在JavaScript中有效地使用日期和时间函数。

`Date`对象入门

基本的Date构造函数不带任何参数，并初始化为当前日期，如下所示。

我们可以清楚地看到，结果日期取决于您的本地时区，因为显示了两个不同的时区。

var today = new Date();
// Thu Feb 27 2013 15:15:25 GMT+1000 (EST)
// Thu Feb 27 2013 10:45:25 GMT+0530 (IST)

使用Date对象的主要方法有两种：

通过将格式或特定日期作为参数提供给Date构造函数，可以生成自定义日期。
```
date1 = new Date ( "January 6, 2013" );
```
然后，我们可以使用许多内置函数来处理创建的日期。以下代码显示了如何使用可用函数提取日期的每个组成部分。
```
date1 = new Date ( "January 6, 2013" );
date = date1.getDate();
year = date1.getFullYear();
month = date1.getMonth();
```

让我们讨论使用日期函数时应了解的一些基本知识。通常，我们将使用日期，月份和年份组成部分。日期可以在1到31之间，月份可以在0到11之间。以下代码创建一个Date对象，并将该月的Date设置为20日。

date1 = new Date ();
date1.setDate(20);

同样，您也可以使用不属于上述范围的数字来生成将来或过去的日期。考虑下面的示例，该示例使用超出指定范围的值。

date1 = new Date ();
date1.setDate(-1);
date1.setMonth(-1);

假定当前日期为2013年2月20日。上面的代码将更改为上一年的上个月的倒数第二个日期（即2012年12月30日）。类似地，您可以对日期和日期使用大于31的值11个月以生成将来的日期。了解了如何使用Date对象使用各种方法生成日期后，让我们看看如何格式化日期。

日期格式

日期没有单一的通用格式，我们需要根据不同情况以不同的格式显示日期字符串。基本上，这是一个双向过程，我们必须首先将字符串转换为Date对象，然后再将其转换为我们喜欢的格式的字符串。初始过程包括将用户输入提供的字符串转换为Date对象。让我们考虑一些日期的常见用户输入方法。

过去，我们使用纯文本字段或三个选项字段来选择月，日和年。如今，用户输入元素已得到极大改进，日期选择器已成为选择日期的现代方式。除日期选择器外，JavaScript日历是广泛使用的组件，我们在此初始过程中必须考虑该组件。这些组件中的日期以字符串形式检索。如果日期字符串包含通用格式，我们可以通过传递输入字段值来创建Date对象，如下所示。

// Assume date is 2013-02-15
var current = $("start_date").value();
var date1=new Date(current);

如果使用日历，则日期将被指定为HTML5数据属性，而不是value属性。下面是一个示例。

  
  

var current = $("start_date").attr("date-current");
var date1=new Date(current);

大多数日期选择器和日历都提供了可以使用的多种预定义格式。但是，如果组件不提供通用格式，或者将日期指定为代码，那么我们必须使用如下所示的函数手动构造Date对象。

var month = {"JAN":"01","FEB":"02"};
var current = "2013-FEB-22";
var date_components = current.split("-");
var current_year = date_components[0];
var current_month= month[date_components[1].toString()];
var current_day = date_components[2];

current = current_year+"-"+current_month+"-"+current_day;
var date11=new Date(current);
document.write(date1);

由于我们知道每个组件的含义，因此可以拆分日期字符串，并构造一种通用格式来解析Date对象。

现在，我们已经将用户提供的日期字符串转换为JavaScript Date对象，以处理验证，比较以及应用程序所需的任何其他操作。最后，我们必须将其转换回字符串以保存或在Web浏览器中显示。这种转换比上一个转换容易得多，因为我们可以使用函数来破坏组件。我认为您应该有一个通用的转换功能，可以在所有项目中重复使用。让我们开发一个简单的函数将日期转换为各种字符串格式。

var date=new Date();
var format = "YYYY-MMM-DD DDD";
document.write(dateConvert(date,format));

function dateConvert(dateobj,format){
  var year = dateobj.getFullYear();
  var month= ("0" + (dateobj.getMonth()+1)).slice(-2);
  var date = ("0" + dateobj.getDate()).slice(-2);
  var hours = ("0" + dateobj.getHours()).slice(-2);
  var minutes = ("0" + dateobj.getMinutes()).slice(-2);
  var seconds = ("0" + dateobj.getSeconds()).slice(-2);
  var day = dateobj.getDay();
  var months = ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"];
  var dates = ["SUN","MON","TUE","WED","THU","FRI","SAT"];
  var converted_date = "";

  switch(format){
    case "YYYY-MM-DD":
      converted_date = year + "-" + month + "-" + date;
      break;
    case "YYYY-MMM-DD DDD":
      converted_date = year + "-" + months[parseInt(month)-1] + "-" + date + " " + dates[parseInt(day)];
      break;
  }

  return converted_date;
}

在这里，我们有一个函数，该函数将Date对象和所需的格式作为参数。在函数内部，所有日期组件都使用函数分配给变量。然后，我们有一个switch语句来选择格式。这种可重用的实用程序功能对于开发应用程序可能非常有效。当要求您提供新格式时，只需在switch语句中添加另一个条目，然后根据新格式返回组件。该代码的输出将为2013-FEB-17 SUN 。同样，您可以将其转换为自己的首选格式进行显示。

日期比较

在给定日期范围之间搜索记录是Web应用程序中最常用的日期使用之一。首先，在考虑比较之前，我们必须将用户提供的日期字符串转换为Date对象。让我们比较使用不同方法生成的两个日期，如下所示。使用getTime()方法比较日期是明智的。假设这些日期都是在2013年2月18日产生的。

var date1=new Date();
var date2=new Date("2013-02-18");

if(date1.getTime() == date2.getTime()){
  console.log("Dates are equal");
}

即使两个对象包含相同的日期，它们也不相等。 date1包含当前日期，并将包含当前时间。但是， date2将不包含当前时间，因此将不匹配。

解决方案是将两个对象的时间设置为标准时间格式。我已经看到很多开发人员将当前日期对象的时间设置为00:00:00，如下所示。

var date1=new Date();
date1.setHours(0,0,0,0);
var date2=new Date("2013-02-18");

因此， date1将类似于Mon Feb 18 2013 00:00:00 GMT+0530 (IST) 。但是，它仍然不匹配，因为date2将包含您当地时区的时间，对我来说，这是GMT + 5.30。如果您不想考虑时间，最好的方法是将两个日期设置为同一时间，如下所示。

var date1=new Date();
date1.setHours(0,0,0,0);
var date2=new Date("2013-02-17");
date2.setHours(0,0,0,0);

我们也可以使用相同的技术来比较日期范围。确保将两个日期的所有其他组件设置为相同的值，并且仅检查两个日期之间不同的组件。

我们应该使用日期处理库吗？

在整篇文章中，我们讨论了Date对象的工作方式，以及可用于操纵日期的必要功能。选择日期操作库是您必须根据自己的需求来决定的。没有库，可以轻松完成简单的日期处理。但是，如果您需要复杂的功能，建议您使用日期处理库（如Datejs），该库提供通过嵌套函数调用实现复杂功能的功能。

如果您喜欢阅读这篇文章，那么您会喜欢Learnable的； 向大师学习新鲜技能的地方。 会员可以立即访问所有SitePoint的电子书和交互式在线课程，例如Jump Start JavaScript 。

本文的评论已关闭。 有关于主题的问题吗？ 为什么不在我们的论坛上提问呢？

From: https://www.sitepoint.com/beginners-guide-to-javascript-date-and-time/