如何在没有时区的情况下发送AngularStrap datepicker值？

Question

我想知道是否可以使用AngularStrap的datepicker而不保留用户的语言环境的时区信息.在我们的应用程序中,我们希望处理具有过期日期的Contract对象.

添加或编辑合同对象时,有一个用于选择日期的datepicker字段.发生以下事情:

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

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

我们怎样才能阻止转换,或在整个过程中使用UTC日期？我们不希望合约的日期根据用户的本地时区进行更改.相反,我们希望日期始终是2013-10-24,无论时区是什么.

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

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

所有的想法都很感激!

Answer 1

问题不在于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();

Answer 2

有点晚了,但我花了我的下午,有人可能会发现它很有用.

声明性地执行此操作的另一种方法是使用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是在绑定到模型之前将转换为的格式.

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

var jsonSettings = Formatters.JsonFormatter.SerializerSettings;
jsonSettings.DateFormatString = "yyyy-MM-ddTHH:mm:ss";

Answer 3

"Angular方式"是使用$ filter服务来格式化datepicker返回的日期.

示例(HTML):

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

示例(JS):

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

这里的人物