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

Question

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

我尝试通过装饰 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;

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

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

• 类型错误:无法读取 null 的属性“$setTouched”
• 类型错误:无法读取 null 的属性“$setViewValue”

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

Answer 1

DO scss file

md-datepicker{ input{ pointer-events:none; } }