- 首页
- 其他开发
- 如何使用 ngmodel 在 datetimepicker 中设置默认日期?
如何使用 ngmodel 在 datetimepicker 中设置默认日期?
[英] How to set default date in datetimepicker with ngmodel?
本文介绍了如何使用 ngmodel 在 datetimepicker 中设置默认日期?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了这个 angular 指令，它包装了一个 jQuery 插件 datetimepicker.
如何让控制器中定义的默认日期显示为控件中的默认日期?
http://jsfiddle.net/edwardtanguay/ef1o3c95/5
我用 ngModel.$viewValue 尝试了许多变体，但无法让 yyyy-mm-dd 文本简单地显示在控件中.
<div class="form-group"><div class='input-group date' timepicker ng-model="date1"><input type='text' class="form-control"/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<div>{{date1 |日期:'yyyy-MM-dd HH:mm'}}
<div class="form-group"><div class='input-group date' timepicker ng-model="date2"><input type='text' class="form-control"/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<div>{{date2 |日期:'yyyy-MM-dd HH:mm'}}
<小时>
angular.module('myApp', []).controller('mainController', function($scope) {$scope.date1 = '2015-09-01 00:00';$scope.date2 = '2015-09-30 23:59';}).directive('时间选择器', [功能() {变量链接；链接 = 函数(范围、元素、属性、ngModel){控制台日志(ngModel)；元素 = $(元素);element.datetimepicker({格式:'YYYY-MM-DD HH:mm',默认日期:ngModel.$viewValue});element.on('dp.change', function(event) {范围.$应用(函数(){ngModel.$setViewValue(event.date._d);});});};返回 {限制:'A'，链接:链接，要求:'ngModel'};}])
解决方案
我认为你可以在这里使用 isolated scope 指令，并将 ngModel 指令值暴露给 ngModelcode>timepicker 指令范围如下.
return {限制:'A'，范围: {日期:'=ngModel'},链接:链接};
<小时>
element.datetimepicker({格式:'YYYY-MM-DD HH:mm',默认日期:scope.date});
这里每个指令实例都有唯一的scope，并且该范围将ngModel指令值共享为scope.date.并且不需要 require 属性.
这是演示
这里是指令 DOC 并查看 隔离指令的范围 部分了解更多信息.
这是一篇很好的文章.
<小时>请注意，您也可以像下面一样使用共享范围指令.
element.datetimepicker({格式:'YYYY-MM-DD HH:mm',默认日期:范围[attr.ngModel]});
这是演示
I've created this angular directive that wraps a jQuery plugin datetimepicker.
How can I get the default dates defined in the controller to display as the default date in the controls?
http://jsfiddle.net/edwardtanguay/ef1o3c95/5
I've tried a number of variations with ngModel.$viewValue but can't get the yyyy-mm-dd text to simply display in the control.
<div ng-controller="mainController">
<div class="form-group">
<div class='input-group date' timepicker ng-model="date1">
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<div>{{date1 | date:'yyyy-MM-dd HH:mm'}}</div>
</div>
<div class="form-group">
<div class='input-group date' timepicker ng-model="date2">
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<div>{{date2 | date:'yyyy-MM-dd HH:mm'}}</div>
</div>
</div>
angular.module('myApp', [])
.controller('mainController', function($scope) {
$scope.date1 = '2015-09-01 00:00';
$scope.date2 = '2015-09-30 23:59';
})
.directive('timepicker', [
function() {
var link;
link = function(scope, element, attr, ngModel) {
console.log(ngModel);
element = $(element);
element.datetimepicker({
format: 'YYYY-MM-DD HH:mm',
defaultDate: ngModel.$viewValue
});
element.on('dp.change', function(event) {
scope.$apply(function() {
ngModel.$setViewValue(event.date._d);
});
});
};
return {
restrict: 'A',
link: link,
require: 'ngModel'
};
}
])
解决方案
I think you can use isolated scope directive here, and expose the ngModel directive value to the timepicker directive scope as below.
return {
restrict: 'A',
scope: {
date: '=ngModel'
},
link: link
};
element.datetimepicker({
format: 'YYYY-MM-DD HH:mm',
defaultDate: scope.date
});
here each and every directive instance it has unique scope and that scope is sharing the ngModel directive value as scope.date. and no need of require property.
here is the DEMO
here is the Directive DOC and see the Isolating the Scope of a Directive section for more info.
here is a good article.
And note that you can also use the shared scope directive as like your one as below.
element.datetimepicker({
format: 'YYYY-MM-DD HH:mm',
defaultDate: scope[attr.ngModel]
});
here is the DEMO
这篇关于如何使用 ngmodel 在 datetimepicker 中设置默认日期?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
