角度带日期选择器:返回不一致的时间戳,UTC+0与UTC+12小时
Angular Strap Datepicker: Inconsistent timestamps returned, UTC +0 vs UTC +12 hours
情况:
- 我们正在使用Angular Strap的日期选择器,并希望将UTC时间戳返回到服务器
- 在选择日期(无时间选择)时,我们发现有些计算机返回的时间戳为0:00,有些则为12:00
- 这是独立于浏览器的,但在不同的计算机之间有所不同
问题:
- 有些计算机返回0点,有些返回12点
我尝试了什么:
- 在调试过程中,我发现问题出现在控制器angular strap/dist/modules/datepicker.js#L379的第379行$dateValue返回"1987年3月28日星期六12:00:00 GMT+0100(西欧标准时间)",而不是其他计算机返回的值"1987年5月28日周六00:00:00 GMT+0100"
问题:
- 如何在所有情况下返回0:00时间
我也面临着同样的问题。我所做的是编写一个指令来转换日期utc-date。检查代码示例。这解决了我的问题。
(function (angular) {
angular.module('myApp').directive('datePicker', ['$parse', 'dateFilter', function ($parse, dateFilter) {
var inputDateFormat = 'dd/MM/yyyy';
var utcDateGeneretor = function (dateString) {
if ('undefined' === typeof dateString || '' === dateString) {
return null;
}
var parts = dateString.split('/');
if (3 !== parts.length) {
return null;
}
var year = parseInt(parts[2], 10);
var month = parseInt(parts[1], 10);
var day = parseInt(parts[0], 10);
if (year.toString().length < 4) {
return null;
}
if (month < 0 || year < 0 || day < 1) {
return null;
}
//Javascript month is zero based. thats why always reduce 1 form selected month.
return new Date(Date.UTC(year, (month - 1), day));
};
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ctrls) {
var mindatecalvalue = parseInt(attrs["mindatecalvalue"], 10);
var maxdatecalvalue = parseInt(attrs["maxdatecalvalue"], 10);
var twoDigitCutoffSpecified = attrs["twoDigitCutoff"];
var twoDigitYear1900cutoff = -1; //If a 2-digityear is less than this number it is treated as being 2000+, otherwise 1900+.
if (twoDigitCutoffSpecified) {
twoDigitYear1900cutoff = parseInt(attrs["twoDigitCutoff"], 10);
if (isNaN(twoDigitYear1900cutoff)) {
twoDigitYear1900cutoff = -1;
} else if (twoDigitYear1900cutoff <= 0) {
twoDigitYear1900cutoff += (new Date().getFullYear() - 2000); //A negative number is interpreted as a number of years before the current year.
}
}
var updateModel = function (dateText) {
var canonicalisedDateText = ensureFullYear(dateText, twoDigitYear1900cutoff);
// call $apply to bring stuff to angular model
scope.$apply(function () {
ctrls.$setViewValue(canonicalisedDateText);
});
ctrls.$render();
};
var ensureFullYear = function (dateText, twoDigitYear1900cutoff) {
var findYearRegex = /(.+[^0-9])([0-9]+)'s*$/;
var dateParts = findYearRegex.exec(dateText);
if ((!dateParts) || (dateParts.length != 3)) {
return dateText; //can't find a year in this date.
}
var originalYearAsStr = dateParts[2];
if (originalYearAsStr.length > 2) {
return dateText; //Not a 2-digit year.
}
var originalYear = parseInt(originalYearAsStr, 10);
var fullYear = 0;
if (originalYear <= twoDigitYear1900cutoff) {
fullYear = 2000 + originalYear;
} else {
fullYear = 1900 + originalYear;
}
var restOfDate = dateParts[1];
return restOfDate + fullYear;
}
ctrls.$formatters.push(function (modelValue) {
return dateFilter(modelValue, inputDateFormat);
});
ctrls.$parsers.push(function (dateString) {
return utcDateGeneretor(dateString);
});
}
};
}]);
})(angular);
关于只选择日期,我也遇到过类似的问题。。。我使用ng模型的$parsers解决了这个问题。
ngModelCtrl.$parsers.push(function (datepickerValue) {
return moment(datepickerValue).format("YYYY-MM-DD");
});
我正在使用moment.js进行日期处理。但上述解决方案即使没有moment.js也可以工作,如下所示。(注意:我还没有测试下面的代码,所以你可能需要稍微调整一下)
ngModelCtrl.$parsers.push(function (datepickerValue) {
//return new Date(datepickerValue).toISOString().substring(0,10);
return new Date(datepickerValue).format("YYYY-MM-DD");
});
上面会给你没有时间戳的日期。但如果你的要求说你总是需要0点结束,那也可以很容易地实现。。。
ngModelCtrl.$parsers.push(function (datepickerValue) {
return moment(datepickerValue).format("YYYY-MM-DD") + " 0:00";
});
我使用的完整指令代码是:
shared.directive("dateToIso", 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
};
});
我已经将它定义为一个属性,这样您就可以将它与其他指令一起使用。你可以像下面这样使用它。。。
<input type="text" ng-model="myDate" name="date" bs-datepicker date-to-iso>
除了修复AngularStrap本地副本中的错误之外,您还可以创建一个指令来包装DatePicker指令。我从有角度的带子上抓住plunker,写了一个装饰指令,在所有情况下总是返回0:00时间。这很好,因为您可以在指令中编写所需的所有自定义逻辑。注意-此指令在模型上创建一个手表,然后在更新后执行任何需要的修改,并通过回调将其返回到应用程序的控制器。注意:为了便于使用,我还切换到了moment.js。
Plunker
HTML:
<date-wrapper></date-wrapper>
指令:
app.directive('dateWrapper', function($compile) {
return {
restrict:'AE',
link:function(scope, element, attrs, ctrl) {
var html = '<input type="text" class="form-control" name="date" ng-model="selectedDate" bs-datepicker>';
var e = $compile(html)(scope);
element.replaceWith(e);
scope.$watch('selectedDate', function(date) {
var updatedDate = moment.utc(date).hour(0).minute(0).second(0).format("YYYY-MM-DDTHH:mm:ss Z");
scope.dateChanged(updatedDate);
});
}
}
});
应用程序控制器示例:
// call back for updated date
$scope.dateChanged = function(date) {
$scope.selectedZeroHourUtcDate = date;
};
相关文章:
- 如何在时间标签和相同的类中以UTC格式重新格式化ISO 8601时间戳,并通过JavaScript根据用户区域设置和时区
- 如何使用javascript在网络上仅将UTC时间戳转换为本地时间?从 http://openweathermap.or
- JavsScript:如何将UTC时间戳转换为人类可读时间
- Angularjs:带日期助手的格式化UTC时间的时间戳
- 使用JavaScript将时间戳UTC转换为IST
- UTC时间戳不在momentjs时刻
- JS和SQL Server之间的UTC时间戳不同
- 如何将PST Unix时间戳转换为UTC
- 如何在 JavaScript 中获取 UTC 时间戳
- 从格式化日期获取UTC时间戳-javascript
- 如何只更改utc时间戳的小时和秒部分
- 获取UTC时区's在javascript中的时间戳
- 角度带日期选择器:返回不一致的时间戳,UTC+0与UTC+12小时
- 更新如何获取JavaScript中的UTC时间戳
- 如何将utc日期时间转换为模糊时间戳
- jquery日期选择器值到UTC时间戳
- 如何从UTC时间戳中获取JS Date对象
- 从今天开始获取UTC时间戳's当地时间
- 如何使用node.js生成utc时间戳
- 转换时间戳在UTC到用户本地时间javascript