41

我想知道是否可以在不保留用户语言环境的时区信息的情况下使用 AngularStrap 的日期选择器。在我们的应用程序中，我们希望处理具有到期日期的 Contract 对象。

添加或编辑合同对象时，有一个日期选择器字段用于选择日期。会发生以下情况：

  1. 用户选择日期（例如 2013-10-24）
  2. Angular 将 javascript 日期对象绑定到 ng-model 字段
  3. 绑定的日期对象在用户的时区（例如 GMT+3）
  4. 用户提交表单
  5. 使用 Angular 的 $http 服务将日期发送到服务器

在步骤 5 中，日期被转换为 UTC 格式。所选日期为 GMT+3 2013-10-24 午夜，但 UTC 转换将日期更改为 2013-10-23 晚上 9 点。

我们如何防止转换，或者在整个过程中使用 UTC 日期？我们不希望合同的日期根据用户的本地时区而改变。相反，我们希望日期始终为 2013-10-24，无论哪个时区。

我们当前的解决方案是对 AngularStrap 库进行小幅更改，以便日期在发送到服务器时不会更改。

如果我们可以在服务器中获取用户选择的时区，我们可以在那里进行另一次转换，但服务器没有该信息。

感谢所有想法！

4

3 回答 3

46

问题不在于 AngularStrap。它只是 javascript 日期的工作方式以及 JSON 如何格式化它们以进行传输。当您将 javascript 日期对象转换为 JSON 字符串时，它会将字符串格式化为 UTC。

例如，我在犹他州，现在是 2013-10-24 的 07:41。如果我创建一个新的 javascript 日期并将其打印到控制台，它会说：

Thu Oct 24 2013 07:41:19 GMT-0600 (MDT)

如果我将同一日期字符串化（使用JSON.stringify(date)，我得到：

"2013-10-24T13:41:47.656Z"

您可以看到它不在我当前的时区，而是在 UTC。因此，当表单从 javascript 对象转换为 JSON 字符串时，转换发生在表单发送到服务器之前。

最简单的方法是在将日期发送到服务器之前将日期更改为您自己选择的字符串。因此，与其让 JSON 将日期更改为 UTC，（假设您不关心一天中的时间），您可以这样做：

var dateStrToSend = $scope.date.getUTCFullYear() + '-' + ($scope.date.getUTCMonth() + 1) +  '-' + $scope.date.getUTCDate();

这将为您提供一个看起来像的基于 UTC 的字符串，'2013-10-24'然后您可以将其发送到服务器，而不是包含时间信息的 JSON 格式。希望这会有所帮助。

更新：正如@Matt Johnson 所说，有两种方法可以做到这一点。你说：How could we prevent the conversion, or use UTC dates during the whole process?。如果您想使用 UTC，请使用我上面的解释。如果您只想“防止转换”，您可以使用以下内容：

var dateStrToSend = $scope.date.getFullYear() + '-' + ($scope.date.getMonth() + 1) +  '-' + $scope.date.getDate();
于 2013-10-24T13:50:47.600 回答
16

有点晚了，但我花了我一个下午的时间，有人可能会觉得它很有用。

另一种以声明方式执行此操作的方法是使用 dateType、dateFormat 和 modelDateFormat 属性。在配置或 HTML 中设置这些，例如

angular.module('app').config(function ($datepickerProvider) {
    angular.extend($datepickerProvider.defaults, {
        dateFormat: 'dd-MMMM-yyyy',
        modelDateFormat: "yyyy-MM-ddTHH:mm:ss",
        dateType: "string"
    });
});

DateFormat 是日期将在日期选择器中显示给用户的格式，而 modelDateFormat 是在绑定到模型之前将转换为的格式。

我也有来自服务器的默认值，我需要在页面加载时将其绑定到日期选择器。因此，我必须更新 JSON 中服务器序列化日期的格式以匹配 modelDateFormat。我正在使用 Web API，所以我使用了以下内容。

var jsonSettings = Formatters.JsonFormatter.SerializerSettings;
jsonSettings.DateFormatString = "yyyy-MM-ddTHH:mm:ss";
于 2014-07-23T06:56:34.707 回答
11

“Angular 方式”是使用$filter服务来格式化 datepicker 返回的日期。

示例（HTML）：

{{inpDate | date: 'dd-MM-yyyy'}}

示例（JS）：

$scope.processDate = function(dt) {
return $filter('date')(dt, 'dd-MM-yyyy');
}

戳这里

于 2014-01-17T08:44:18.623 回答