Bootstrap 3 DateTimePicker-绑定到角度模型没有'在'dp.change'
Bootstrap 3 DateTimePicker - binding to angular model doesn't work after 'dp.change'
我正在尝试从eonasdan
使用Bootstrap 3 DateTimePicker
。一切都正常,但我遇到了将输入中的实际日期绑定到angular ng模型的问题。当我使用选择器更改数据时,"dp.change"事件正在工作,输入中的日期正在更改,但我必须按空格键或任何其他键才能实现模型更新检测。
代码的一些平静:
JS带角度指令:
(function () {
'use strict';
var module = angular.module('feedApp');
module.directive('datetimepicker', [
'$timeout',
function ($timeout) {
return {
require: '?ngModel',
restrict: 'EA',
scope: {
options: '@',
onChange: '&',
onClick: '&'
},
link: function ($scope, $element, $attrs, controller) {
$($element).on('dp.change', function () {
//alert("change");
$timeout(function () {
var dtp = $element.data('DateTimePicker');
controller.$setViewValue(dtp.date());
$scope.onChange();
});
});
$($element).on('click', function () {
$scope.onClick();
});
controller.$render = function () {
if (!!controller) {
if (controller.$viewValue === undefined) {
controller.$viewValue = null;
}
else if (!(controller.$viewValue instanceof moment)) {
controller.$viewValue = moment(controller.$viewValue);
}
$($element).data('DateTimePicker').date(controller.$viewValue);
}
};
$($element).datetimepicker($scope.$eval($attrs.options));
}
};
}
]);
})();
HTML:
<div style="max-width: 250px">
<div class="input-group input-group-sm date">
<input type="text" class="form-control" options="{format:'DD.MM.YYYY HH:mm', locale:'pl'}" datetimepicker ng-model="feed.reminderDateTime" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
知道怎么解决这个问题吗?我将不胜感激。
在返回时遇到了类似的问题。没有源代码可以参考,但我确实记得它是这样的。
因为你的ng型号是ng-model="feed.reminderDateTime"
在您的控制器中,您应该执行$scope.feed = {reminderDateTime:''};
那么你应该能够通过这样的$scope.feed.reminderDateTime
访问它
让我知道的进展情况
require('datetimepicker');
Vue.directive('datetimepicker', {
twoWay: true, //very important to bind the modeldata
bind: function () {
$(this.el).datetimepicker({
format: 'YYYY/MM/DD', //see moment for more valid date time formats
useCurrent: false
}).on('dp.change', function (value) {
//todo: do the required changed to the value here
});
},
update: function (value) {
$(this.el).val(value).trigger('dp.change');
},
unbind: function () {
$(this.el).off().datetimepicker('destroy');
}
});
相关文章:
- Selenium WebDriver and JavaScript change
- Bootstrap 3 Datepicker v4:dp.show和dp.change事件在Datepicker内联时不
- 带有.change()的AJAX不起作用
- Change iframe src
- 动态填充Bootstrap选择选择器:change event dos'不起作用
- 在IE9中使用jQuery.change定位select元素
- Sencha触摸,字段设置为Change Listener
- Jquery change onchange in onload
- Javascript、jquery、主干网、splunk:on(“change”、{data}、handler)导致Ty
- 在change事件javascript上动态添加行
- 为什么“ng checked”不适用于“ng change”
- 了解'这'在jQuery on change事件中
- 如何通过JQuery触发JS原生甚至addEventListener(“change”,函数)
- jQuery change()和bind(“change”)不起作用
- 为什么我的on change事件在ie9上返回空
- 试图在change上激发多个函数
- jQuery.change()事件未被触发
- Bootstrap 3 DateTimePicker-绑定到角度模型没有'在'dp.change'
- 在on.change事件之后运行函数
- 选择使用 jQuery 接收 change() 事件的表单的提交按钮