md-datepicker - поле ввода должно быть доступно только для чтения - ручной ввод даты не допускается

Здесь я хочу отметить, что я хочу отметить, что поле ввода (дочерний узел 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: Невозможно прочитать свойство '$setTouched' из null
  • TypeError: Невозможно прочитать свойство '$setViewValue' с нулевым значением

Что не так с элементом после запуска директивы декоратора? Пожалуйста, помогите.

Источник

4 ответа

DO scss файл

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

Источник

Я создал Директиву, а не применяя исправления или вместо оформления директивы

Надеюсь, это сэкономит кому-то время.

вот:

(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();
        });
    }
}
})();
Источник

В фокусе поля ввода явно вызывается средство выбора даты, которое открывает календарь, чтобы пользователь не мог редактировать дату.

<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>

Пример демонстрационной ссылки

Источник

Может быть, вы можете использовать эту опцию. Вы можете установить свойство readonly для ввода, созданного md-datepicker. Просто вы должны проверить, что страница загружена, прежде чем устанавливать свойство.

     $scope.$on('$viewContentLoaded', function(event) {
     $("input.md-datepicker-input").prop('readonly', true);
     });

input.md-datepicker-input - это CSS, применяемый для ввода md-datepicker.

Источник
Другие вопросы по тегам