Я работаю над интеграцией Eternicode's Bootstrap Datepicker в свое приложение. Я не был уверен, как подключить его к моей модели, поэтому я нашел директиву, которая использует ее от here. Теперь у меня есть datepicker на моей странице, но он не останется открытым, когда я нажимаю на поле ввода. Датпикер открывается и закрывается почти мгновенно. Если я нажму на соседнее поле и вкладку в поле datepicker, он останется открытым, как и ожидалось. У меня также возникают проблемы с тем, чтобы он появился там, где я бы хотел. Когда он открывается, он находится под некоторыми другими элементами и неуместен. Он должен открываться непосредственно под полем ввода. См. Снимок экрана ниже.Угловая Bootstrap Директива DatePicker (версия Eternicode) не остается открытой
В мой контроллер у меня есть:
$scope.dateOptions = {
format: 'dd/mm/yyyy',
autoclose: false,
clearBtn: true,
container: '#datepicker',
showOnFocus: true,
startDate: new Date(),
todayBtn: true,
todayHighlight: true,
weekStart: 1,
zIndexOffset: 5000
}
$scope.newPost = {
token: $scope.token,
post: $scope.post,
posts: {
twitter: null,
facebook: null,
linkedin: null
},
attachment_url: $scope.attachment_url,
media_url: $scope.media_url,
services: {
twitter: $scope.twitter,
facebook: $scope.facebook,
linkedin: $scope.linkedin
},
dateObject: today,
timeObject: today
};
Тогда в моей директиве у меня есть:
.directive('bDatepicker', function(){
return {
require: '?ngModel',
restrict: 'A',
link: function ($scope, element, attrs, controller) {
var updateModel, onblur;
if (controller != null) {
updateModel = function (event) {
element.datepicker('hide');
element.blur();
};
onblur = function() {
//we'll update the model in the blur() handler
//because it's possible the user put in an invalid date
//in the input box directly.
//Bootstrap datepicker will have overwritten invalid values
//on blur with today's date so we'll stick that in the model.
//this assumes that the forceParse option has been left as default(true)
//https://github.com/eternicode/bootstrap-datepicker#forceparse
var date = element.val();
return $scope.$apply(function() {
return controller.$setViewValue(date);
});
};
controller.$render = function() {
var date = controller.$viewValue;
if (angular.isDefined(date) && date != null && angular.isDate(date))
{
element.datepicker().data().datepicker.date = date;
element.datepicker('setValue');
element.datepicker('update');
} else if (angular.isDefined(date)) {
throw new Error('ng-Model value must be a Date object - currently it is a ' + typeof date + ' - use ui-date-format to convert it from a string');
}
return controller.$viewValue;
};
}
return attrs.$observe('bDatepicker', function (value) {
var options;
options = { }; //<--- insert your own defaults here!
if (angular.isObject(value)) {
options = value;
}
if (typeof (value) === "string" && value.length > 0) {
options = angular.fromJson(value);
}
return element.datepicker(options).on('changeDate', updateModel).on('blur', onblur);
})
}
}
});
Наконец, на мой взгляд у меня есть:
<input b-datepicker="{{dateOptions}}" ng-model="newPost.dateObject" id="datepicker">
Я создал скрипку, но я не могу заставить ее работать правильно. Я получаю ошибку Uncaught Error: [$injector:modulerr], что я не могу понять, как ее решить. Вот ссылка: https://jsfiddle.net/kxge3cqf/
Вот образец из `social_media_posts.json:
[
{
id: 50,
company_id: 94,
employer_id: 3,
post: "testing without attachments",
attachment_url: null,
twitter: true,
facebook: false,
linkedin: false,
post_date: "Fri, Oct 30, 2015",
post_time: " 2:50 PM EDT"
},
{
total_count: 1
}
]
Вот пример из groups.json:
{
groups: {
1: {
id: 1,
name: "Human Resources",
created_at: "2015-10-27T16:23:07.287Z",
updated_at: "2015-11-01T16:11:43.329Z",
company_id: 94
},
2: {
id: 2,
name: "Marketing",
created_at: "2015-11-01T15:32:28.988Z",
updated_at: "2015-11-01T16:11:43.354Z",
company_id: 94
}
}
}
Вот образец из contacts.json:
{
contacts: {
1: {
id: 1,
first_name: "Foo",
last_name: "Bar",
email: "[email protected]",
created_at: "2015-10-27T16:24:00.832Z",
updated_at: "2015-11-01T16:11:52.426Z",
company_id: 94
}
}
}
Вы можете предоставить скрипку? –
Я создал скрипку, но я не могу заставить ее работать правильно. Я получаю сообщение об ошибке «Неудачная ошибка: [$ инжектор: modulerr]], что я не могу понять, как ее решить. Вот ссылка: https://jsfiddle.net/kxge3cqf/ – ACIDSTEALTH
@ACIDSTEALTH Я скопировал код в локальном env и что '[$ injector: modulerr]' кажется из-за 'angular.module ('myApp', ['ui .bootstrap ']), здесь ui.bootstrap не был определен, после включения его из внешней ссылки, я снова получил 'невозможно загрузить файл: ///contacts.json. 'и аналогично для groups.json и socila_media_posts.json, вы можете предоставить эти файлы или фиктивные данные. так что я могу изучить его. Однако, к тому времени, когда я попытаюсь выделить часть детектора и какую проблему у нее есть. –