javascript - md-datepicker - 输入字段应该是只读的 - 不允许手动输入日期

Question

我想在这里实现的是我想将输入字段（md-datepicker 的子节点）标记为只读，以便用户无法手动输入日期值（键入）并强制从 md-datepicker 中选择日期。

我尝试通过装饰 md-datepicker 指令来实现这一点，但没有运气。

是否有任何其他简单且正确的方法将输入字段标记为只读并强制用户仅从日历中选择日期？

我正在使用 Angularjs。

==================================================== ==========================

我尝试的是装饰 md-datepicker 指令并实现我想要的行为

(function () {
'use strict';

angular.module('APPLICATION_NAME').config(['$provide', function($provide) {

    $provide.decorator('mdDatepickerDirective', [
        '$delegate',

        /**
         * @function mdDatepickerDirective
         * @description decorates mdDatepickerDirective to extend functionality:
         *              - Mark input field as read-only so which will prevent user from typing date manually
         *                and should select from date-picker calender only.
         * @param {angular.Directive} $delegate
         * @returns {angular.Directive} $delegate
         */
            function mdDatePickerDecorator($delegate) {
            var directive = $delegate[0];
            var compile = directive.compile;

            directive.compile = function (tElement) {
                var link = compile.apply(this, arguments);
                tElement.find("input").prop("readOnly", "true");
            };

            return $delegate;

        }
    ]);
}])})();

但是我遇到了一些错误，例如：

• TypeError：无法读取 null 的属性“$setTouched”
• TypeError：无法读取 null 的属性“$setViewValue”

指令装饰器运行后元素有什么问题？请帮忙。

Answer 1

做scss文件

md-datepicker{ 输入{ 指针事件：无；} }

Answer 2

在输入框的焦点上显式调用将打开日历的日期选择器，以便用户无法编辑日期。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">

<div ng-app="StarterApp" ng-controller="AppController" ng-init="initDatepicker();">
    <md-content flex class="padding-top-0 padding-bottom-0" layout="row">
        <md-datepicker id="datePicker" ng-model="user.submissionDate1" md-placeholder="Start date" flex ng-click="ctrl.openCalendarPane($event)"></md-datepicker>
    </md-content>
</div>
<script>
  var app = angular.module('StarterApp', ['ngMaterial']);

app.controller('AppController', function($scope) {


 document.querySelectorAll("#datePicker input")[0].setAttribute("readonly","readonly");
    $scope.initDatepicker = function(){
        angular.element(".md-datepicker-button").each(function(){
            var el = this;
            var ip = angular.element(el).parent().find("input").bind('click', function(e){
                angular.element(el).click();
            });
            angular.element(this).css('visibility', 'hidden');
        });
    };
});
</script>

演示链接示例

Answer 3

我创建了指令而不是应用补丁或指令装饰

希望这会节省一些人的时间。

这里是 ：

(function () {
'use strict';

angular.module('myApplication').directive('mcReadOnly', mcReadOnly);

/**
 * @function mcReadOnly
 * @description creates a directive which will override the behavior of md-datepicker and
 *              will not allow user to enter date manually.
 * @param
 * @returns {Directive} directive - for DOM manipulation of md-datepicker directive.
 */
function mcReadOnly() {
    var directive = {
        restrict: 'A',
        link: link
    };

    return directive;

    /**
     * @function link
     * @description link function of this directive will do following things :
     *              1. Will mark 'input' field as readonly so it will not edited/changed by user manually - can only
     *              be changed/edited by changing value from calender pane.
     *              2. When clicked upon 'input' text field of md-datepicker, It will open calender pane (like user clicked on
     *              Date picker calender icon)
     * @param {scope} - scope of directive
     * @param {element} - DOM element where directive is applied
     * @returns
     */
    function link(scope, element) {
        element.find("input")[0].setAttribute("readonly","true");
        element.find("input").bind('click', function(){
            element.find("button")[0].click();
        });
    }
}
})();