Angular Bootstrap DatePicker 指令（Eternicode 版本）未保持打开状态
Angular Bootstrap DatePicker Directive (Eternicode version) not staying open
我正在努力整合 Eternicode's Bootstrap Datepicker into my app. I wasn't sure how to connect it to my model so I found a directive that uses it from here。现在我的页面上有日期选择器，但当我单击输入字段时它不会保持打开状态。日期选择器几乎立即打开和关闭。如果我单击相邻的字段并切换到日期选择器字段，它会按预期保持打开状态。我也很难让它出现在我想要的地方。当它确实打开时，它位于其他一些元素之下并且不合适。它应该直接在输入字段下方打开。请参阅下面的屏幕截图。
在我的控制器中我有：
$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">
我创建了一个 fiddle，但我无法让它正常工作。我收到一个 Uncaught Error: [$injector:modulerr] 错误，我不知道如何解决。这是 link：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
}
}
}
这似乎是你的问题
$event.stopPropagation();
angular.module('peskyDatepicker', ['ui.bootstrap'])
.controller('DatepickerDemoCtrl', ['$scope',
function ($scope) {
var vm = this;
vm.valuationDate = new Date();
vm.valuationDatePickerIsOpen = false;
vm.opens = [];
$scope.$watch(function () {
return vm.valuationDatePickerIsOpen;
},function(value){
vm.opens.push("valuationDatePickerIsOpen: " + value + " at: " + new Date());
});
vm.valuationDatePickerOpen = function ($event) {
if ($event) {
$event.preventDefault();
$event.stopPropagation(); // This is the magic
}
this.valuationDatePickerIsOpen = true;
};
}]);
<!DOCTYPE html>
<html ng-app="peskyDatepicker">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="DatepickerDemoCtrl as vm">
<pre>Selected date is: <em>{{vm.valuationDate | date:'fullDate' }}</em>
</pre>
<div class="row">
<div class="col-md-3">
<p class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="vm.valuationDatePickerOpen()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
<input type="text" class="form-control"
datepicker-popup="mediumDate"
is-open="vm.valuationDatePickerIsOpen"
ng-click="vm.valuationDatePickerOpen()"
ng-model="vm.valuationDate" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="vm.valuationDatePickerOpen($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
</div>
<p class="col-md-3">
The left button <em>doesn't</em> work (opens the picker and closes right away).<br />
The right button <em>does</em> work (opens the picker and stays open).<br />
And it's all down to <code>$event.stopPropagation();</code> - funny huh?</code>
</p>
<ul>
<li ng-repeat="open in vm.opens">{{open}}</li>
</ul>
</div>
</body>
</html>
还有一个关于这个问题的博客
http://blog.johnnyreilly.com/2015/05/angular-ui-bootstrap-datepicker-weirdness.html
将在您查看代码时尝试找出代码中的确切问题。
编辑1
你为什么不使用默认类型="date" like
<input type="date" ng-model="date" value="{{ date | date: 'yyyy/MM/dd' }}" />
<br />{{ date | date: 'dd/MM/yyyy' }}
编辑2
ok 尝试了你的代码，只取出了日期相关的部分，它工作正常。
所以你的代码中一定有其他东西导致了这个。
这是我试过的代码，如果有帮助的话
angular.module('ui.bootstrap.demo', ['ngAnimate']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function($scope,$filter) {
$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
}
});
angular.module('ui.bootstrap.demo').directive('bDatepicker', function() {
return {
require: '?ngModel',
restrict: 'A',
link: function($scope, element, attrs, controller) {
var updateModel, onblur;
if (controller != null) {
updateModel = function(event) {
console.log($scope.dateObject);
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('update', 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);
})
}
}
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="example.js"></script>
<!-- <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet">
</head>
<body ng-controller="DatepickerDemoCtrl">
<input b-datepicker="{{dateOptions}}" ng-model="dateObject" id="datepicker" >
</br>
Date: {{dateObject}}
</body>
</html>
如果你可以提供一些 git 回购或工作 plunk/fiddle 我可以找出到底是什么地方出了问题。但目前这就是我的全部。希望对你有帮助
我正在努力整合 Eternicode's Bootstrap Datepicker into my app. I wasn't sure how to connect it to my model so I found a directive that uses it from here。现在我的页面上有日期选择器，但当我单击输入字段时它不会保持打开状态。日期选择器几乎立即打开和关闭。如果我单击相邻的字段并切换到日期选择器字段，它会按预期保持打开状态。我也很难让它出现在我想要的地方。当它确实打开时，它位于其他一些元素之下并且不合适。它应该直接在输入字段下方打开。请参阅下面的屏幕截图。
在我的控制器中我有：
$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">
我创建了一个 fiddle，但我无法让它正常工作。我收到一个 Uncaught Error: [$injector:modulerr] 错误，我不知道如何解决。这是 link：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
}
}
}
这似乎是你的问题
$event.stopPropagation();
angular.module('peskyDatepicker', ['ui.bootstrap'])
.controller('DatepickerDemoCtrl', ['$scope',
function ($scope) {
var vm = this;
vm.valuationDate = new Date();
vm.valuationDatePickerIsOpen = false;
vm.opens = [];
$scope.$watch(function () {
return vm.valuationDatePickerIsOpen;
},function(value){
vm.opens.push("valuationDatePickerIsOpen: " + value + " at: " + new Date());
});
vm.valuationDatePickerOpen = function ($event) {
if ($event) {
$event.preventDefault();
$event.stopPropagation(); // This is the magic
}
this.valuationDatePickerIsOpen = true;
};
}]);
<!DOCTYPE html>
<html ng-app="peskyDatepicker">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="DatepickerDemoCtrl as vm">
<pre>Selected date is: <em>{{vm.valuationDate | date:'fullDate' }}</em>
</pre>
<div class="row">
<div class="col-md-3">
<p class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="vm.valuationDatePickerOpen()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
<input type="text" class="form-control"
datepicker-popup="mediumDate"
is-open="vm.valuationDatePickerIsOpen"
ng-click="vm.valuationDatePickerOpen()"
ng-model="vm.valuationDate" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="vm.valuationDatePickerOpen($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
</div>
<p class="col-md-3">
The left button <em>doesn't</em> work (opens the picker and closes right away).<br />
The right button <em>does</em> work (opens the picker and stays open).<br />
And it's all down to <code>$event.stopPropagation();</code> - funny huh?</code>
</p>
<ul>
<li ng-repeat="open in vm.opens">{{open}}</li>
</ul>
</div>
</body>
</html>
还有一个关于这个问题的博客 http://blog.johnnyreilly.com/2015/05/angular-ui-bootstrap-datepicker-weirdness.html
将在您查看代码时尝试找出代码中的确切问题。
编辑1
你为什么不使用默认类型="date" like
<input type="date" ng-model="date" value="{{ date | date: 'yyyy/MM/dd' }}" />
<br />{{ date | date: 'dd/MM/yyyy' }}
编辑2
ok 尝试了你的代码，只取出了日期相关的部分，它工作正常。
所以你的代码中一定有其他东西导致了这个。 这是我试过的代码，如果有帮助的话
angular.module('ui.bootstrap.demo', ['ngAnimate']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function($scope,$filter) {
$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
}
});
angular.module('ui.bootstrap.demo').directive('bDatepicker', function() {
return {
require: '?ngModel',
restrict: 'A',
link: function($scope, element, attrs, controller) {
var updateModel, onblur;
if (controller != null) {
updateModel = function(event) {
console.log($scope.dateObject);
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('update', 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);
})
}
}
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="example.js"></script>
<!-- <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet">
</head>
<body ng-controller="DatepickerDemoCtrl">
<input b-datepicker="{{dateOptions}}" ng-model="dateObject" id="datepicker" >
</br>
Date: {{dateObject}}
</body>
</html>
如果你可以提供一些 git 回购或工作 plunk/fiddle 我可以找出到底是什么地方出了问题。但目前这就是我的全部。希望对你有帮助