无法在 Angular 2/4 中获得每月的第一天答案

【问题标题】：Unable to get the first day of the Month in Angular 2/4无法在 Angular 2/4 中获得每月的第一天
【发布时间】：2017-12-25 07:20:37
【问题描述】：

我正在计算我的应用程序的日期，例如日期、周、月。

首先我定义日、周、月、自定义，例如：

this.reportTypes = [{TypeId: 1, Type: 'Day'}, {TypeId: 6, Type: 'Week'}, {TypeId: 30, Type: 'Month'}, {
      TypeId: 10,
      Type: 'Custom'
    }]

接下来我定义的日期如下：

var currdate = new Date();
 if(reportType==1){
        // this.reportDataFromDate=currdate;
        // this.reportDataToDate=currdate;
        //This is for setting the current date
        this.reportDataFromDate= currdate;
        this.reportDataToDate= currdate;
    }
    else if(reportType==30){
      var First = new Date(currdate.getFullYear(),currdate.getMonth(),1);

      this.reportDataFromDate=First;

      this.reportDataToDate=currdate;
    }
    else if(reportType!=10){
       var last = new Date(currdate.getTime() - (reportType * 24 * 60 * 60 * 1000));

      this.reportDataFromDate=last;
      this.reportDataToDate=currdate;
    }
  }

问题是在选择reportType == 30之后，它必须得到当月的第一天。

它显示日期为1-Dec-2017，但它正在获取截至2017年11月30日的数据？

这是 SQL 服务器的屏幕截图。我将日期发送为 2017 年 12 月 1 日，但它正在 2017 年 11 月 30 日。

【问题讨论】：

你在哪个时区...别忘了，你在控制台看到的是UTC
@JaromandaX 在控制台中我看到了 2017 年 12 月 1 日的 IST
确实，抱歉，您在图片中显示的是 UTC（以为是一些控制台输出） - 所以，一切都很好
@JaromandaX 它是后端收到的数据/请求..
不管是什么，你的时区是 2017 年 12 月 1 日 0:0:0

标签： javascript angular datetime ionic-framework ionic2

【解决方案1】：

当使用整数调用 Date() 构造函数时，结果是一个日期对象，该日期假定您的系统（读取浏览器/操作系统）时区。

例子：

let d = new Date(2017);
// returns Thu Jan 01 1970 01:00:02 GMT+0100 (W. Europe Standard Time)
// and with d.toUTCString(): Fri, 30 Dec 2016 23:00:00 GMT

发送到服务器时可能会在完全不同的年份结束

使用字符串构造函数并指定时区将帮助您克服这个问题。

例子：

let d = new Date('2017z');
// returns Sun Jan 01 2017 01:00:00 GMT+0100 (W. Europe Standard Time)
// and with d.toUTCString(): Sun, 01 Jan 2017 00:00:00 GMT

后者是你应该传递给服务器的，通常在上面进行计算。

但是，请注意，日期计算是一件复杂的事情，最好留给像 moment.js 这样的库。要了解您正在处理的内容，请查看来自 WebRebel 会议的 great talk。

所以要真正回答你的标题，试试这个例子，它使用 UTC 在一个简单的字符串中创建日期：

let d = new Date(currdate.getUTCFullYear() + ' ' +(currdate.getUTCMonth() + 1) + ' 1z');
d.getUTCDay(); // returns the day as an integer where Monday is 0.

请注意，由于 getUTCMonth() 将一月返回为 0，因此我们添加了 1 个月。

【讨论】：

好的，对不起，我刚刚意识到你已经说了我回答的第一部分（也许不是那么好:)）。

【解决方案2】：

为什么会有差异？

new Date(x,y,z) 构造函数将参数视为本地日期值。

见MDB Web Docs - Date

注意：如果 Date 被称为具有多个参数的构造函数，则指定的参数表示本地时间。如果需要 UTC，请使用具有相同参数的 new Date(Date.UTC(...))。

但是，在后台，日期存储为 UTC（自 1970 年 1 月 1 日以来的毫秒数）。

const date = new Date(2017, 11, 29); 
console.log('valueOf()', date.valueOf())  // 1514458800000

UTC 日期与您的本地日期不同（请参阅尾随的“Z”表示 UTC）

const date = new Date(2017, 11, 29); 
console.log('date', date)  // "2017-12-28T11:00:00.000Z" (trailing 'Z' means UTC)

// The difference in minutes between browser local and UTC
console.log('getTimezoneOffset()', date.getTimezoneOffset() )

当你将它发送到服务器时，JSON 将它作为 UTC 发送

const date = new Date(2017, 11, 29); 
console.log('JSON', date.toJSON())
// JSON will yield string version of UTC === 2017-12-28T11:00:00.000Z

如何解决

好吧，您可能决定您实际上想要本地日期/时间，并得出结论它没有损坏。

但如果你想发送 UTC到服务器，请将参数包装在Date.UTC()

const date = new Date(Date.UTC( 2017, 11, 29 ))
console.log('date.toJSON()', date.toJSON() )   // 2017-12-29T00:00:00.000Z

月份参数=== 11呢？

从上面引用的 MDB 页面，

注意：参数月份是从 0 开始的。这意味着一月 = 0，十二月 = 11。

【讨论】：

【解决方案3】：

如果您使用 .Net Web API 作为后端，您可以在 Web API WebApiconfig.cs 中配置时区，如下所示。它将以 UTC 序列化时间。

public static void Register(HttpConfiguration config)
{
    config.Formatters.JsonFormatter.SerializerSettings.DateTimeZoneHandling = Newtonsoft.Json.DateTimeZoneHandling.Utc;
}

或者使用

config.Formatters.JsonFormatter.SerializerSettings.DateTimeZ‌oneHandling = Newtonsoft.Json.DateTimeZoneHandling.RoundtripKind; //Time zone information should be preserved when converting.

【讨论】：