javascript 不会将 angular ui datepicker 日期正确转换为 UTC
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27172394/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript doesn't convert angular ui datepicker date to UTC correctly
提问by mk_yo
I'm using angular ui datepicker in my project(asp.net web api + angularjs). All works fine but when I'm trying to save date to Db it doesn't convert it to UTC format correctly and substructs 1 day(actually a few hours but it affects for a day too).
我在我的项目（asp.net web api + angularjs）中使用了 angular ui datepicker。一切正常，但是当我尝试将日期保存到 Db 时，它没有正确地将其转换为 UTC 格式，而是将 1 天（实际上是几个小时，但它也影响了一天）。
For example when I choose 01/11/2014 in the datepicker:
例如，当我在日期选择器中选择 01/11/2014 时：
Angularjs object:
Sat Nov 01 2014 00:00:00 GMT+0200 (FLE Standard Time)
In request:
2014-10-31T22:00:00.000Z
In asp.net api controller:
{31-Oct-14 10:00:00 PM}
Datepicker controller:
日期选择器控制器：
app.controller('DatepickerCtrl', function ($scope) {
$scope.today = function () {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function () {
$scope.dt = null;
};
$scope.open = function ($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.format = 'dd/MM/yyyy';
$scope.dateOptions = {
'starting-day': 1
};
});
hnml:
编码：
<div class="form-group inputGroupContainer" ng-controller="DatepickerCtrl">
<label for="date">Date of Birth</label>
<p class="input-group">
<input type="text" name="date1" ui-date="{dateFormat: 'yy-mm-dd'}" ui-date-format="yy-mm-dd" placeholder="DD/MM/YYYY" class="form-control" datepicker-popup="{{format}}" ng-model="user.Personal.BirthDate" max-date="currentDate" is-open="opened" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
But seems like angular datepicker highlight the correct date:
但似乎角度日期选择器突出显示了正确的日期：
I've tried to manually convert date to UTC format but unsuccessfully as well
我尝试将日期手动转换为 UTC 格式，但也没有成功
toUTCDate: function (d) {
var date = new Date(d);
var _utc = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());//, date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds()
return _utc;
}
Should I specify timezone or use angular js filter?
我应该指定时区还是使用 angular js 过滤器？
回答by harishr
I have had the exact same problem, the solution was to remove the timezone component of the date part. To solve the problem in a more generic way I had written a directive
我遇到了完全相同的问题，解决方案是删除日期部分的时区组件。为了以更通用的方式解决问题，我编写了一个指令
csapp.directive("csDateToIso", function () {
var linkFunction = function (scope, element, attrs, ngModelCtrl) {
ngModelCtrl.$parsers.push(function (datepickerValue) {
return moment(datepickerValue).format("YYYY-MM-DD");
});
};
return {
restrict: "A",
require: "ngModel",
link: linkFunction
};
});
above directive removes the timezone part and only considers the date part of the ISO date format input.
上述指令删除了时区部分，只考虑 ISO 日期格式输入的日期部分。
I do use moment.js for date manipulations. But you can easily convert above to not use moment.js
我确实使用 moment.js 进行日期操作。但是你可以很容易地转换为不使用moment.js
EDIT
编辑
use it like below
像下面一样使用它
<input ng-model='abc' cs-date-to-iso ui-datepicker>
回答by frhd
Just to add the coffeescript version of Entre's answer, which works for me in "angular": "~1.3.14",:
只是添加Entre答案的coffeescript版本，这对我有用"angular": "~1.3.14",：
app.directive 'dateToIso', [ () ->
restrict: 'A',
require: 'ngModel'
link: (scope, el, attrs, ngModel) ->
if (angular.isUndefined(attrs.ngModel))
console.log 'ngModel attribute missing for date-to-iso'
else
ngModel.$parsers.push (datePickerValue) ->
return moment(datePickerValue).format("YYYY-MM-DD")
]
回答by agusluc
Don't send the javascript object in the json request, javascript add the browsers timezone in the string representation of the object that is used in the JSON. You can use something like this to extract the date into an string without the timezone:
不要在 json 请求中发送 javascript 对象，javascript 在 JSON 中使用的对象的字符串表示中添加浏览器时区。您可以使用类似的方法将日期提取到没有时区的字符串中：
myApp.service('dateService', function(){
this.parse = function(date) {
if(!date){
return ""
}
var day = (date.getDate() < 10 ? '0' : '') + date.getDate();
var month = ((date.getMonth() + 1) < 10 ? '0' : '') + (date.getMonth() + 1);
var hours = (date.getHours() < 10 ? '0' : '') + date.getHours();
var minutes = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
var seconds = (date.getSeconds() < 10 ? '0' : '') + date.getSeconds();
return date.getFullYear() + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds
}
});
Then in your backend you only have to parse the string into a date object using the format "yyyy-MM-dd HH:mm:ss" in the timezone of your choosing. I don't know about .NET but in java you can do something like this:
然后在您的后端，您只需在您选择的时区中使用“yyyy-MM-dd HH:mm:ss”格式将字符串解析为日期对象。我不知道 .NET 但在 Java 中你可以做这样的事情：
def jsCalendarFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss")
jsCalendarFormat.setTimeZone(user.timezone)
Date dateObj = jsCalendarFormat.parse(date)
