使有角度的ui-bootstrap datepicker成为向输入添加日期的唯一方法
[英]Make angular ui-bootstrap datepicker the only way to add date to input
问题描述
I would like to disable key input and force the user to use the datepicker to add date to the input but I don't know how to do this. 
我想禁用按键输入并强制用户使用datepicker将日期添加到输入中，但是我不知道该怎么做。 In the current solution the user can select date but also type or erase the value directly in the input. 在当前解决方案中，用户可以选择日期，也可以直接在输入中键入或删除值。 I would like to disable the input, so the user can't type or erase anything, but still make the datepicker available. 我想禁用输入，因此用户无法键入或擦除任何内容，但仍使日期选择器可用。
Does angular ui-bootstrap already include this feature (checked the docs but didn't find any..) or do anyone have a solution for this? angular ui-bootstrap是否已经包含此功能（检查了文档但没有找到任何..），或者有人对此有解决方案吗？
This is a simpler version copy from the ui-bootstrap docs but its basically what I use in my site: 这是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>
1 个解决方案
解决方案1
0 已采纳 2016-08-31 18:48:42
Add a readonly attribute to the input and it will work as you expect :) 向输入中添加一个只读属性，它将按您期望的那样工作：)
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.