【发布时间】：2016-01-25 21:37:13
【问题描述】：
我正在努力将Eternicode's Bootstrap Datepicker 集成到我的应用中。我不确定如何将它连接到我的模型，所以我从here 找到了一个使用它的指令。现在我的页面上有日期选择器，但是当我单击输入字段时它不会保持打开状态。日期选择器几乎立即打开和关闭。如果我单击相邻字段并在 datepicker 字段中单击标签，它将按预期保持打开状态。我也很难让它出现在我想要的位置。当它打开时，它位于其他一些元素之下并且不合适。它应该直接在输入字段下方打开。请看下面的截图。
在我的控制器中，我有：
$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: "foo.bar@baz.biz",
created_at: "2015-10-27T16:24:00.832Z",
updated_at: "2015-11-01T16:11:52.426Z",
company_id: 94
}
}
}
【问题讨论】：
-
你能提供一个小提琴吗？
-
我创建了一个小提琴，但我无法让它正常工作。我收到
Uncaught Error: [$injector:modulerr]错误，我不知道如何解决。这是链接：jsfiddle.net/kxge3cqf -
@ACIDSTEALTH 我在本地环境中复制了代码，而
[$injector:modulerr]似乎是因为angular.module('myApp', ['ui.bootstrap'])，这里没有定义ui.bootstrap，在从外部链接包含它之后，我又得到了@987654340 @ 和 groups.json 和 socila_media_posts.json 类似，你能提供这些文件或虚拟数据吗？这样我就可以调查了。但是，当我尝试分离出 detepicker 部分以及它有什么问题时。 -
顺便说一句，如果有帮助，我会为这个 plnkr.co/edit/tmcBSmkY6445KDZpbt2z?p=preview 找到一个有效的 plunk
-
我已将来自所有三个端点的示例数据添加到帖子中。此外，您上一条评论中的 Plunk 不起作用。日期选择器打开，但无法选择日期。
标签： angularjs angularjs-directive datepicker bootstrap-datepicker