Angular-ui-bootstrap - 日期选择器 - 如何限制对弹出窗口中日期选择器的访问? [英] Angular-ui-bootstrap - Date Picker - How can I restrict access to the date-selector in popup?
问题描述
目前,我可以先选择年份,然后是月份,然后是日期.但是,我只需要访问月份和年份.我不确定如何禁用日期选择器选项.
此外,我还想去掉日期选择器中的所有页脚按钮(今天、清除等).我怎样才能做到这一点?
我正在寻找类似于$scope.showweeks = false;"的东西
以下是我的 Plunker 示例
请随时指导我查看任何可用的文档.到目前为止,我只能找到
http://angular-ui.github.io/bootstrap/
谢谢
您可以尝试使用 datepicker for Bootstrap 和 jQuery 包裹的指令.
参见 Plunker
JS
var app = angular.module('plunker', []);app.controller('MainCtrl', function($scope) {$scope.var1 = '07-2013';});app.directive('datetimez', function() {返回 {限制:'A',要求:'ngModel',链接:函数(范围、元素、属性、ngModelCtrl){element.datetimepicker({格式:MM-yyyy",视图模式:月",minViewMode: "月",选择时间:假,}).on('changeDate', function(e) {ngModelCtrl.$setViewValue(e.date);范围.$应用();});}};});
HTML
<input data-format="MM-yyyy" type="text" id="input1" name="input1"></input><span class="附加组件"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span>
At the moment, I can first select the year, then the month, and then, the date. However, I only need access to month and the year. I'm not sure how to disable the date-selector option.
Also, I would like to get rid of all the footer buttons (today, clear, etc) in the date-picker as well. How can I achieve this ?
I'm looking for something similar to '$scope.showweeks = false;'
Below is my Plunker example
Please feel free to direct me to any documentations available. So far, I could only find
http://angular-ui.github.io/bootstrap/
Thanks
You can try to use datepicker for Bootstrap with jQuery wrapped by directive.
See Plunker
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.var1 = '07-2013';
});
app.directive('datetimez', function() {
return {
restrict: 'A',
require : 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
element.datetimepicker({
format: "MM-yyyy",
viewMode: "months",
minViewMode: "months",
pickTime: false,
}).on('changeDate', function(e) {
ngModelCtrl.$setViewValue(e.date);
scope.$apply();
});
}
};
});
HTML
<div id="date" class="input-append" datetimez ng-model="var1">
<input data-format="MM-yyyy" type="text" id="input1" name="input1"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
这篇关于Angular-ui-bootstrap - 日期选择器 - 如何限制对弹出窗口中日期选择器的访问?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!