[英]angularjs ui bootstrap datepicker unexpectedly adding a day
Good day, by default I set a date in the format like this YYYY-MM-DD in the ui bootstrap datepicker input field using momentjs. 美好的一天,默认情况下,我使用momentjs在ui引导日期选择器输入字段中以YYYY-MM-DD这样的格式设置日期。 The date shows correctly in the format I want it to be.
日期以我想要的格式正确显示。 when I select a different date it show correctly the input field but when I decide to console log the value a day is added to it and with a timezone (T00:00:00.000Z).
当我选择其他日期时,它会正确显示输入字段,但是当我决定控制台日志时,会在其中添加一天的值以及时区(T00:00:00.000Z)。 here is a snippet of my html
这是我的HTML的片段
<div class="row">
<div class="col-md-6">
<label>Drawdown Ent. Date <span style="color: red;">*</span></label>
<input type="text"
class="form-control"
datepicker-popup="yyyy-MM-dd"
ng-model="bookloan.drawdown_ent_date"
is-open="drawdown_ent_date.open"
ng-click="drawdown_ent_date.open = true"
datepicker-options="entDateOptions"
date-disabled="disabled(date, mode)"
close-text="Close" />
</div>
</div>
here is a snippit of my JavaScript code: 这是我的JavaScript代码的片段:
$scope.bookloan.drawdown_ent_date = moment().format("YYYY-MM-DD");
What could cause this? 是什么原因造成的? Thanks in advance..
提前致谢..
I found the solution to my problem by using this directive: 我通过使用以下指令找到了解决问题的方法:
app.directive('datepickerLocalDate', ['$parse', function ($parse) {
var directive = {
restrict: 'A',
require: ['ngModel'],
link: link
};
return directive;
function link(scope, element, attr, ctrls) {
var ngModelController = ctrls[0];
// called with a JavaScript Date object when picked from the datepicker
ngModelController.$parsers.push(function (viewValue) {
// undo the timezone adjustment we did during the formatting
viewValue.setMinutes(viewValue.getMinutes() - viewValue.getTimezoneOffset());
// we just want a local date in ISO format
return viewValue.toISOString().substring(0, 10);
});
// called with a 'yyyy-mm-dd' string to format
ngModelController.$formatters.push(function (modelValue) {
if (!modelValue) {
return undefined;
}
// date constructor will apply timezone deviations from UTC (i.e. if locale is behind UTC 'dt' will be one day behind)
var dt = new Date(modelValue);
// 'undo' the timezone offset again (so we end up on the original date again)
dt.setMinutes(dt.getMinutes() + dt.getTimezoneOffset());
return dt;
});
}
}]);
And place directive name in the input element: 并将指令名称放在输入元素中:
<div class="col-md-6">
<label>Drawdown Ent. Date <span style="color: red;">*</span></label>
<input type="text"
class="form-control"
datepicker-local-date
datepicker-popup="yyyy-MM-dd"
ng-model="bookloan.drawdown_ent_date"
is-open="drawdown_ent_date.open"
ng-click="drawdown_ent_date.open = true"
datepicker-options="entDateOptions"
date-disabled="disabled(date, mode)"
close-text="Close" />
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.