使有角度的ui-bootstrap datepicker成为向输入添加日期的唯一方法

Question

我想禁用按键输入并强制用户使用datepicker将日期添加到输入中，但是我不知道该怎么做。 在当前解决方案中，用户可以选择日期，也可以直接在输入中键入或删除值。 我想禁用输入，因此用户无法键入或擦除任何内容，但仍使日期选择器可用。

angular ui-bootstrap是否已经包含此功能（检查了文档但没有找到任何..），或者有人对此有解决方案吗？

这是ui-bootstrap文档中的一个简单版本，但基本上是我在网站上使用的版本：

 angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) { $scope.today = function() { $scope.dt = new Date(); }; $scope.today(); $scope.dateOptions = { formatYear: 'yy' }; $scope.open2 = function() { $scope.popup2.opened = true; }; $scope.popup2 = { opened: false }; });

 <!doctype html> <html ng-app="ui.bootstrap.demo"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script> <script src="example.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div ng-controller="DatepickerPopupDemoCtrl"> <h4>Popup</h4> <div class="row"> <div class="col-md-6"> <p class="input-group"> <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button> </span> </p> </div> </div> </div> </body> </html>

Answer 1

向输入中添加一个只读属性，它将按您期望的那样工作：)

 angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) { $scope.today = function() { $scope.dt = new Date(); }; $scope.today(); $scope.dateOptions = { formatYear: 'yy' }; $scope.open2 = function() { $scope.popup2.opened = true; }; $scope.popup2 = { opened: false }; });

 <!doctype html> <html ng-app="ui.bootstrap.demo"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script> <script src="example.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div ng-controller="DatepickerPopupDemoCtrl"> <h4>Popup</h4> <div class="row"> <div class="col-md-6"> <p class="input-group"> <input type="text"readonly class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button> </span> </p> </div> </div> </div> </body> </html>

使有角度的ui-bootstrap datepicker成为向输入添加日期的唯一方法

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-08-31 18:48:42

使有角度的ui-bootstrap datepicker成为向输入添加日期的唯一方法

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-08-31 18:48:42

解决方案1
0 已采纳 2016-08-31 18:48:42